Typography Options

Typography is probably the most complicated and confusing aspects of designing your website, regardless if you are using a theme that has font and typography management options. This is a very big topic when you take in account what fonts involve:

  • font family
  • font size
  • font style
  • font weight
  • line height
  • letter spacing
  • font variant
  • colour

Then we get into other things that relate to the above list like font sizes:

  • pixels (px)
  • percent (%)
  • em
  • rem
  • initial

If you want to read more about fonts and attributes, you can check out the W3schools website:

W3Schools Fonts

Fonts can be overwhelming, especially when we are dealing with literally 1000’s of fonts and font families. But it doesn’t just stop there, we also have to take in account that not all fonts are compatible with every language on the planet. 

I know many theme users like to have at least some control over fonts and/or attributes associated with the theme they use. Not all themes have extra fonts, while some people will use font plugins instead. Generally the better solution because with a plugin, you can use your fonts if you change themes, but they often include extra font features and settings you can use compared to what a theme offers.

Prelude Typography Management

This theme includes some font management which is found in the Customizer. This quick tutorial will give you an introduction to what you can do with fonts, but you can still override fonts and styling with your own — you don’t have to use the theme’s typography options.

Enable Typography Options

This turns on all your font option settings in the customizer.

  1. Go to Appearance >> Typography Options
  2. If you need to use “Cyrillic” fonts, the font that this theme uses for headings is a Google font called Raleway, so you can check this box if needed.
    type load cyrillic
  3. You have the option to add two more Google Fonts. Make sure you enter the Google font name as the name is shown at Google. For example, if you want to use Ubuntu Condensed, you would add that to the Google font field like this:
    added fontadd third font
  4. Click “Save & Publish

Custom CSS for the Site Title

The site title (when using a text based site title and no logo) uses the Google font Raleway, but you can change it:

#site-title {
   font-family: Raleway, Arial, Sans-serif;
}

Custom CSS for Headings

If you want to use your own font for headings and page titles, here is the starter CSS code you would use:

h1, h2, h3, h4, h5, h6 {
     font-family: Raleway, Arial, Sans-Serif;
}

When using a font name that has more than one words, wrap them with double quotes like this example: “Times New Roman”

Custom CSS for the Main Body Font

This is the main body font for posts and pages. Currently, this theme uses “Raleway” as the body font, so if you want to change that, start with something like this example if you were to use the “Candara” font:

body {
   font-family: Candara, Arial, Helvetica, Sans-serif;
}

Custom CSS for Widget Titles

Widget titles use the Raleway font. To change widget titles, use this as your starting point:

.widget-title {     font-family: Raleway,arial, sans-serif; }

Custom CSS for Main Menu Font Styling

The main menu inherits the body font, in this case, Raleway. But if you want to change the font sizes and other font attributes, use this as your starting point:

.main-navigation li {     padding: 30px 20px;     font-size: 0.938rem; }

.main-navigation ul ul {
    font-size: 0.875rem
}
 @media (min-width: 64em) .main-navigation li {     text-transform: uppercase; } }

@media (min-width: 64em) .main-navigation ul ul li {     text-transform: none; }

NOTE If you need support regarding what the theme code is for a particular part of the navigation, post your question in the support forum.

Font Sizing

You might notice I use “rem” as my font size unit, such as this example from the Typography Option settings.

font size setting

In the old days, people used “px” as the size unit, but with responsive sites and the need for accessibility, we need to use “relative” sizing like:

  • em
  • rem
  • %

If you want to know what rem’s convert to in pixels, and vice versa, you the following online tool to make the conversion:

Px to EM

This online tool is actually px to em (not rem), but you can still use the same value for em as rem.