Responsive Typography

Genesis Blocks adds responsive controls to the default WordPress® Heading and Paragraph blocks that allow you to choose different font sizes, and in some cases line heights*, to display on desktop, tablet, and mobile devices.¹

*The line height option is only available if you’re using a theme that supports custom line heights for headings and paragraphs (example: the Twenty Twenty-One theme).

After adding a Heading or Paragraph block to the post or page, you’ll see two typography settings, as shown in the image below.

Click image to enlarge

1. Typography: This is the original WordPress typography setting. The font size and line height you set here will be displayed on all devices/screen sizes if you don’t configure the responsive settings.
2. Responsive Typography: These settings are only available when Genesis Blocks or Genesis Blocks Pro is active on the site. This is where you can choose different font sizes and line heights for each device/screen size. See below for details about each setting.

Click image to enlarge

1. Screen size: Click the device for which you’d like to set the font size and line height. Note: The Desktop font size and line height entered here will override the font size set in the original Typography setting.
2. Font size: Choose (or enter) the font size you’d like to display for each device/screen size.
3. Line height: Enter the line height you’d like to display for each device/screen size. Note: The line height option only appears if you’re using a theme that supports custom line heights for headings and paragraphs (example: the Twenty Twenty-One theme).

Disable Responsive Typography

If you’d like to disable the Responsive Typography feature, you can add this filter to your theme’s functions.php file or to a custom plugin.