To adjust typography at a website level, go to the Customizer -> General Settings -> Typography.
You have separate options for:
Headings, Body text, Lead text, Links and Blockquotes.
Customize typography for headings
Take each heading type (H1, H2… H6) and start customizing it:
- Choose a font family for that heading type
- Choose the weight of the font for that heading type
- Select the color that will be applied to all texts marked as Heading 1
- Set the dimensions for the text marked as Heading 1 (the values can be expressed in pixels, em or rem)
- You can also set the Headings to uppercase, lowercase, capitalize it, etc.
Advanced options for Headings (click on the cog icon next to Advanced to open the panel with further customization options):
- Define the style of the headings (normal/italic)
- Underline text, add an overline, add a line through
- Set the height of the line of text representing the headings
- Determine the distance between the letters in a heading text
- Set the distance of the heading text from the top and to the bottom of the section, by filling in the corresponding areas with your own values
Customize typography for body text
The body text represents normal text that is included in page sections.
Click on Body text and start customizing it:
- Choose a font family for the text
- Choose the weight of the font for the text
- Select the color that will be applied to normal text
- Set the dimensions for the text (the values can be expressed in pixels, em or rem)
Advanced options for body text (click on the cog icon next to Advanced to open the panel with further customization options):
- Define the style of the text (normal/italic)
- Set the height of the line of text
- Determine the distance between the letters in a text
- Set the distance of the text from the top and to the bottom of the section, by filling in the corresponding areas with your own values
Customize typography for lead text
A lead text represents the opening text of a section, that summarizes or introduces the story.
Click on Lead text and start customizing it:
- Choose a font family for the lead text
- Choose the weight of the font for the lead text
- Select the color that will be applied to the lead text
- Set the dimensions for the lead text (the values can be expressed in pixels, em or rem)
Advanced options for the lead texts (click on the cog icon next to Advanced to open the panel with further customization options):
- Set the lead text to uppercase, lowercase, capitalize, etc.
- Define the style of the lead text (normal/italic)
- Set the height of the line of text
- Determine the distance between the letters in a lead text
- Set the distance of the lead text from the top and to the bottom of the section, by filling in the corresponding areas with your own values
Customize typography for links (anchor text of links)
These settings refer to customizations for the anchor text on which you place links in the page.
Here are the options:
- Choose the font family for the anchor text of the links
- Define the weight of the font
- Determine the optimal dimensions of the anchor text for links in the website (the values can be expressed in pixels, em or rem)
The following options can be set differently for different states of the links (links in normal state, links as they appear when users hover with their mouse over them, links as they appear after they have been visited):
- Select a color for the anchor text of the links (by using the color picker)
- Choose to underline the anchor text of links, overline it, etc.
Setting the color and decoration of the anchor text differently for different states of the links serves usability purposes: visitors get better orientation into the web pages, and they understand its content more easily.
For advanced options related to typography of the anchor texts for links, click on the cog icon next to Advanced:
Advanced customizations include:
- You can turn the anchor text to uppercase, lowercase, capitalize it, etc.
- You can define the style of the text (normal/italic)
- You can set the height of the line of text
- You can adjust values for the distance between the letters composing the anchor text of links
You can define the margin for the anchor text, that is the distance of the links text from the top and to the bottom of the section
