Manage typography

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.

Theme 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.

  1. Go to Appearance >> Typography Options
    typography setting
  2. If you need to use “Cyrillic” fonts, you can enable that setting, but you will need to make sure the font you use supports it. Right now, Receptive uses the Google font called Oswald for the headings and titles, but uses Arial and/or Helvetica for the main body font.
    cyrillic setting
  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:
    google font1google font2
  4. Click “Save & Publish

IMPORTANT Whenever you change the font to an element with your own CSS, make sure for fonts that contain more than one name, such as “Helvetica Narrow”, that you wrap the name with double quotes like you see below:

font-family: Oswald, “Helevtica Narrow”, Arial, Sans-serif;

Custom CSS for the Site Title

The site title (when using a text based site title and no logo) uses the Google font Oswald, but you can change it, but make sure you add more options in case someone visiting your website does not see that font, instead Helvetica Narrow will be used–if not that one, then it goes to the next, which is Arial:

.site-title {     font-size: 2rem;     font-family: Oswald, "Helevtica Narrow", Arial, Sans-serif;     letter-spacing: 1px;

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 for your h1, h2, h3, h4, h5, h6, and also for a few additional headings I added called display-1, display-2, etc:

h1,h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5 { 	font-family: Oswald, "Helevtica Narrow", Arial, Sans-serif; 	color: #333; 	font-weight: 400; 	line-height: 1.2; }

Custom CSS for the Main Body Font

This is the main body font for posts and pages. Currently, this theme uses “Arial” as the body font, so if you want to change that, make sure you add alternate choices as well:

body {     font-family: Arial, "Helvetica Neue", sans-serif;     line-height: 1.5; }

Custom CSS for Widget Titles

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

.widget-title {     font-family: Oswald, "Helevtica Narrow", Arial, Sans-serif;
    font-size: 1.313rem;     font-weight: 400;     line-height: 1.2; }

Custom CSS for Main Menu Font Styling

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

.main-navigation li {     font-size: 0.875rem;     letter-spacing: 1px; }

NOTE If you need to edit the submenu font or typography sizes etc., then you can do this:

.submenu li {     font-size: 0.875rem;     letter-spacing: 1px; }

Font Sizing

You might notice I use “rem” as my font size unit, such as this example from the Typography Option settings. 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.

Where to Add Custom CSS for Typography Changes?

You have three (3) choices:

  1. Child Theme – if you are using a child theme for more than just CSS customization, you would add your code to the child theme’s style.css file
  2. Jetpack – If you are using Jetpack, you can use its own “Custom CSS” feature.
  3. Plugin – Or, you can use a popular plugin called “Simple Custom CSS“.