Customizer Typography Options

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

Typogrpahy

Once you’ve clicked that, you’ll see the various typography options provided by the Customizer, like this:

Typography options

Google Font Subsets

The next option you’ll see is for Google Font Subsets.

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:

Font subsets On

The options are to set the font subset on or off for:

  • Cyrillic
  • Greek
  • Vietnamese

Body and Content

The next section in the typography panel of the Customizer is Body and content:

Body and content

The first option is for the Body font:

Body and content font

The next option in the Customizer is for the body font color:

Body Font color

The next options are for the Body font size and content font size:

Body 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:

Body and content font weight

Like the other font weight options this also has three values of:

  • Book
  • Regular
  • Bold

Setting the font-weight to Book makes our content look like this:

Book font weight pages

Setting the font-weight to Regular makes our content look like this:

Regular Font weight pages

Setting the font-weight to Bold makes our content look like this:

Bold Font weight pages

Headings

The next section in the Customizer for typography is for the headings:

Heading options

The first option of which is Headings font.

Headings font

The next option you’ll see is for the Headings Font Color:

Headings font color

The next option you’ll see is for the Heading Font Weight:

Headings font weight

This again like the other typography font weights has three options of:

  • Book
  • Regular
  • Bold

With the font weight set to Book our heading looks like this:

Headings font weight Book

With the font weight set to Regular our heading looks like this:

Heading font weight regular

With the font weight set to Bold our heading looks like this:

Heading font weight Bold

The next option you’ll see is for the headings letter spacing:

Heading 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:

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.

Widget Icons

If we set widgets icons to Off, our sidebar looks like this:

Sidebar no icons

If we change that and set widget icons to On our sidebar then looks like this:

Sidebar with icons!

Site Links

The last option is for site links, both site links color and site links hover color:

Site links hover

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:

Site links color

If we change that to blue, our site then looks like this:

Site links color changed

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.