Typography Settings Overview

Many types of blocks allow you to customize and edit their Typography Settings.

Typography Settings will change the font and appearance of text for your entire selected block. When utilized, they allow you to have new ways to differentiate your content.

These settings include: Font Size, Line Height, Font Style, Font Weight, Text Transform, Letter Spacing, Font Family, and Text Decoration.

How to Access Typography Settings

The Typography Settings can be found in the Block Settings sidebar under the section labeled Typography.

• Select the block you want to customize.
• If you've selected a block and the Settings sidebar is not showing on the right side of the page, click the Settings Icon (cog) next to the "Save" button at the top of the page.

Note: Clicking the Settings Icon with the sidebar showing will collapse the menu.

• In the Settings sidebar, select the "Block" tab at the top.
• Scroll down to the "Typography" section of the menu.

• If you see a + Icon to the right of the "Typography" title, click to find more Typography Settings available to adjust.
• Click the setting you want to adjust; it will now appear in the Typography section.
• If you see an Ellipsis to the right of the "Typography" title, either all available options are shown by default, or you've selected at least one to add already.
• Once you've selected an additional option to add, it will show in the Typography section.

Note: To revert ALL Typography changes back to original settings at the same time, click the + Icon or Ellipsis and select "Reset All" - this resets the settings and removes all typography-related changes.

Note: using the Font Size setting will adjust the size of all text within the block.

Font Size

Font Size allows you to adjust the size of your text in the selected block. You can choose from your template's preset sizes, or you can set a custom value by clicking the slider icon directly above the default selections.

• Select your block, then in the Settings sidebar, select the "Block" tab at the top.
• Scroll down to the "Typography" section of the menu to find "Size" - one of the default Typography Settings.
• Choose from your template's default Size options, or click the Slider Icon for the ability to input a custom pixel value.

Note: using the Font Size setting will adjust the size of all text within the block.

Line Height

The Line Height setting adjusts the spacing above and below each line of text within a given block.

• Select your block, then in the Settings sidebar, select the "Block" tab at the top.
• Scroll down to the "Typography" section of the menu to find "Line Height" - shown by default or found by clicking either the + Icon or Ellipsis next to the Typography title and choosing it as an option.
• Increase or decrease by 0.1 when using the Up and Down arrows located in the input field, or click the input field to type a value - you can preview the text changes as you make adjustments.

Note: using the Line Height setting will adjust the spacing between lines of text within the entire block.

Letter Case

This setting allows you to set all text in a selected block to three casing options: all caps (AB), all lowercase (ab), or the first letter of each word capitalized (Ab). Selecting an option will change the entire selected block.

• Select your block, then in the Settings sidebar, select the "Block" tab at the top.
• Scroll down to the "Typography" section of the menu to find "Letter Case" - shown by default or found by clicking either the + Icon or Ellipsis next to the Typography title and choosing it as an option.
• Choose between AB (ALL CAPS), ab (all lowercase), or Ab (First Letter Capitalized) - you can preview the text changes as you make adjustments.

Letter Spacing

This setting allows you to set the space between each individual character for all text in your block.

• Select your block, then in the Settings sidebar, select the "Block" tab at the top.
• Scroll down to the "Typography" section of the menu to find "Letter Spacing" - shown by default or found by clicking either the + Icon or Ellipsis next to the Typography title and choosing it as an option.
• Click the input field to type a value - you can preview the text changes as you make adjustments. By default, the Letter Spacing field is shown in pixels (px) but you can also select from other options:
  • em: Relative to the parent element
  • rem: Relative to the root element
  • %: Percent relative to the parent element
  • vw: Relative to the viewport’s width
  • vh: Relative to the viewport’s height

Note: Pixel (px) are an absolute unit, meaning it does not change based on any other element. Use the px option for maintaining consistent sizing, so if you have elements that should not be resized, then using px unit is a good option.

Element (em), root element (rem), %, viewport height (vh) and viewport width (vw) are relative units; using any of these options means that you want the element to be responsive, or scale up and down based on other elements size. They also get interpreted into the equivalent px unit by the browser.

• em: Relative to the parent element
• rem: Relative to the root element
• %: Percent relative to the parent element
• vw: Relative to the viewport’s width
• vh: Relative to the viewport’s height

If you use any of these options, it will give the viewer the freedom to adjust their default browser font size, while still maintaining the relative scale of each element that you’ve specified.