Adjusting typography in WordPress using GenerateBlocks is a little complex at first, but its uses are vast and versatile, perfect for building blogs, pages or various content in WordPress.
Using a GenerateBlocks Block
By default, when making a new paragraph / heading, WordPress will use the standard of each. However these can be easily changed to a GenerateBlocks "Headline" by selecting it from the options that appear when choosing a new block or changing the paragraph by clicking the Paragraph Icon at the beginning of the toolbar. The headline is the Blue "H" icon that appears (see image below).
These typography settings can also be set to a GenerateBlocks container, meaning if you'd like to use core WordPress blocks, you can wrap them within a GenerateBlocks container to adjust the typography of the content.
Toolbar Settings
The Toolbar Settings that appear just above the text you're editing allow you to edit specific words within the block you're editing.
For example, you can highlight several words within the paragraph, and attribute them the following settings:
- Bold (Ctrl + B)
- Italic (Ctrl + I)
- Underline (Ctrl + U)
- Highlight - Font Colour
- Highlight - Background Colour
- Superscript
- Subscript
Sidebar Settings
The sidebar has many more typography settings:
- Text alignment
- Allows the user to align the selected block to the left, center, right or justified.
- Font Weight
- Options include: Default, Normal, Bold and unit measurements from 100 - 900 with descriptions.
- Transform
- Can be used to change the style of the paragraph: Uppercase (all characters in uppercase), Lowercase (all characters in lowercase), Capitalised (the beginning of each word is capitalised), and Normal.
- Font Size
- Units available include: px, em, %, rem, vw, vh, and ch. Recommended to use px.
- Line Height and Letter Spacing
- Units available include: px, em, %, rem, vw, vh, and ch. Recommended to use px or em. Letter Spacing Shouldn't need to be adjusted.
- Font Family
- If wanted, the font family can be changed for the selected block, as well as a fallback font if the selected family isn't available.
