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.
Emotions Lite 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.
- Go to Appearance >> Typography Options
- If you need to use “Cyrillic” fonts, the font that Emotions uses for headings is a Google font called Merriweather, so you can check this box if needed.
- 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:
- 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 Merriweather, but you can change it:
#site-title {
font-family: Merriweather, "Times New Roman", 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: Merriweather, "Times New Roman", Serif;
}
When using a font name that has more than one words, wrap them with double quotes like you see for Times New Roman in the above code.
Custom CSS for the Main Body Font
This is the main body font for posts and pages. Currently, this theme uses “Candara” as the body font, so if you want to change that, start with this:
body {
font-family: Candara, Arial, Helvetica, Sans-serif;
}
Custom CSS for Widget Titles
Widget titles do not use the Merriweather font, they use Candara. To change widget titles, use this as your starting point:
.widget-title { font-family: candara,arial, helvetica, sans-serif; }
Custom CSS for Main Menu Font Styling
The main menu inherits the body font, in this case, Candara. But if you want to change the font sizes and other font attributes, use this as your starting point:
@media (min-width: 992px) { .main-navigation li { font-size: 1rem; line-height: 1; padding: 18px 0; text-transform: uppercase; }
.main-navigation li li { font-size: 0.813rem; line-height: 1.1; padding: 0; }
}
Font Sizing
You might notice I use “rem” as my font size unit. 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.