How to Use Global Typography

Global Typography allows you to specify the typography styles of your headings and text across all your blocks.

The power of Global Typography comes from being able to adjust your text styles across your different webpages. You can tweak your global typography and your entire site will adjust!

Accessing the Global Typography

You can access Stackable's Global Typography by clicking on the Stackable logo at the top right of the Block Editor.

Applying Typography Styles

Users can also choose whether to apply the typography styles to native WordPress blocks and third-party blocks. However, due to differences in how block plugins function, typography settings may not always be compatible with third-party blocks.

Font Pairs

Stackable includes preset font pairs that you can select. When a font pair is chosen, all text across Stackable blocks will automatically inherit the fonts used in that pair. This ensures a consistent design throughout the website.

Customizing Typography Settings

Below the preset font pair selection, you can access the Typography Settings panel, where you can fine-tune typography styles for specific text elements, including:

  • Headings (H1-H6)
  • Subtitle
  • Text
  • Button Text

For each text type, you can adjust:

  • Font Size
  • Font Weight
  • Text Transform
  • Line Height
  • Letter Spacing

Even if a font pair is selected, you can override it by adjusting individual typography settings in this panel. Simply click on the Pencil button to open the typography settings and adjust the styles of your headings. All changes are live and will automatically reflect in your webpages.

Once you've modified a Global Typography for a heading, you can still further customize it on a per block level.

Creating a Custom Font Pair

You can create your own custom font pairs:

  1. Click on the + button in the Preset Font Pairs box.
  2. Customize the typography settings for headings, subtitles, text, and buttons.
  3. Your website will then use these typography settings for any text. The custom font pair will also be available for selection.

Adjusting Tablet and Mobile Global Typography

Some typography settings can be adjusted specifically for tablet and mobile screen sizes.

To adjust these, use the responsive toggles and select tablet or mobile then edit your typography settings while in tablet or mobile view modes.

Theme Compatibility

If the global typography settings are not working in the frontend of your theme, you can tweak some of the settings found in Stackable > Global Settings

  • Content Selector - usually theme's content area contains the CSS class .entry-content if your theme uses a different class to designate the content area, please put the proper selector here.
  • Force Typography Styles - if your theme's doesn't display the global typography that you set, then you may enable this to force the typography styles in the frontend. Ideally, you should not enable this and should be the last resort to make your typography work.