This article was last updated on the December 21, 2016.
In this article we’ll cover the typography settings provided by the WordPress Customizer, when using X, we’ll cover each setting one by one.
Make sure you have the WordPress Customizer open and click on Typography
Once you’ve clicked that, you’ll see the various typography options provided by the Customizer, like this:
Google Font Subsets
The next option you’ll see is for Google Font Subsets.
This again has a On or Off value, with it set to On, you’ll see additional options in the Customizer under font subsets, like this:
The options are to set the font subset on or off for:
Body and Content
The next section in the typography panel of the Customizer is Body and content:
The first option is for the Body font:
The next option in the Customizer is for the body font color:
The next options are for the Body font size and content font size:
The Body font size, is content that isn’t on the actual page, for example, the sidebar font size, setting the body content font size, will effect everything apart from the actual page content font size (and of course headings, menus etc, as that’s set separately).
The Content font size, sets the font size globally for all content, for example posts and pages. Changing this setting will effect all posts and pages and not just an individual post or page. All values are in PX.
The last option for the body and content typography options is for font weight:
Like the other font weight options this also has three values of:
Setting the font-weight to Book makes our content look like this:
Setting the font-weight to Regular makes our content look like this:
Setting the font-weight to Bold makes our content look like this:
The next section in the Customizer for typography is for the headings:
The first option of which is Headings font.
The next option you’ll see is for the Headings Font Color:
The next option you’ll see is for the Heading Font Weight:
This again like the other typography font weights has three options of:
With the font weight set to Book our heading looks like this:
With the font weight set to Regular our heading looks like this:
With the font weight set to Bold our heading looks like this:
The next option you’ll see is for the headings letter spacing:
You’ll see that there are six different options for the various heading sizes, from h1-h6, the values are on a slider scale and in “em” value rather than PX. You can adjust each slider individually with the value going from -0.15em to 0.5em.
The next option in the Customizer for the headings section is Uppercase:
With this set to On all headings are shown as uppercase, with this set to Off, headings are shown as entered.
The last option for headings, is for Widget Icons, this sets whether a icon shows next to the widget heading.
If we set widgets icons to Off, our sidebar looks like this:
If we change that and set widget icons to On our sidebar then looks like this:
The last option is for site links, both site links color and site links hover color:
These colors effect various parts of the design, all links, so social icons in the footer, menu accent above the selected menu item, links in content etc. For example, here’s our site currently:
If we change that to blue, our site then looks like this:
Setting the site links hover color, will then change the color when you hover over any site link.
There are also other various typography controls available throughout the WordPress Customizer under there respective sections such as Headings, Logo links etc
Congrats! You’ve made it to the end of the typography tutorial and should now have a better understanding of the various options for Typography provided by the WordPress customizer.