The unique Customizer provided with this theme gives us a large number of options for the typography of all aspects of the website. This covers the standard font, size and color settings, but stretches into placement, overrides and special relationships between typography elements.
Body Typography
As it sounds, here we can set up the font, size, color and more for the main body text.
The “Body Font” and “Main Body Text Color” will set the font and color for most of the text, but will not affect the site titles, logos or the footer. Those have their owns sections in this Customizer tool. There is one special note on the text color: setting text color here will affect the text color of posts in the masonry post display, but not in the one-column post display. This is due to the latter being designed with a white background and dark text as part of intended style
It is unlikely to ever want to have a different font family for the links, but styling links bold, italics, etc, is not uncommon. This tool will default to the body font settings for almost everything, but we can override them here, if desired. NOTE: This will affect posts in the masonry post display, but not affect the link color in the one-column post display. This is due to the latter being designed with a white background and dark text as part of intended style
Navigation Typography
Here we can set up the font, size, color and more for the main nav menu text.
“Menu Bar Text” will do as it says and affect the menu bar. It is important to note, however, that this will not affect the small site title in the menu bar. That is controlled in the “Small Site Title Text” controller below.
This will control the settings only for the small site title in the menu bar. This will not control the large site title that appears in the page head on the “Front and “Home” pages. For that, use the “Large Site Title Text” controller.
Along with the standard font settings, we can move t the menu bar site title left, right, up or down to get it it sitting perfectly in the menu bar. Note In some cases the page must be scrolled upwards to see the site title.
Like many areas of the site, we can override the font family of the menu bar with any font we want. For example: font-family: “Good Times Rg”; Note: This does not load the font into the browser. If the font is not already one of the included Google fonts or part of the browser, then it will need to be loaded either through a plugin or by adding the font via linking in the document head. Information on this is readily available online. If you are not familiar with this, it might be best to stick to the many supplied Google and browser fonts.
Large Page Head Titles
Here we can set up the font, size, color and more for the large site title and description in the page head. NOTE: This applies only on the “Home” and “Front” pages as these use the site title and description instead of a page title. This will not affect any other page.
We can turn the large site title off and on as well as make huge or tiny. In addition, we can move it up, down, left or right. These settings will move this title and the small site description together to preserve their spatial relationship. The small site description can still be moved independently below, but only in relation to the large site title.
Setting the font variant, like small-caps, along with the color setting can be especially useful when trying to make the site title stand out from the other elements on the page. We can do that plus override the font-family, if we want (assuming we load the font via plugin or similar way).
We can turn the small site description off and on as well as control the size. As mentioned in a previous section, we can move this element’s placement in relation to the large site title.
Footer Typography
In most cases we will want to keep the footer typography following the same styles as the rest of the website. There are occasions where we might want to make the footer a more distinct experience to ensure it, and the valuable last bit of info the page can offer, are not overlooked. This theme’s expanded Customizer allows us to change the background of the footer, so, especially in these situations, changing all aspects fo the footer text can be beneficial or necessary.
In this section we can adjust the footer text colors (both main text and links), the font, size, letter spacing and more.