How to Use Global Typography Type Scale

A consistent type system is essential for maintaining visual hierarchy and readability throughout your website. Stackable makes this easier with the Type Scale feature, allowing you to apply consistent typography ratios to all text elements including Heading, Body text, and Button, with just a few clicks.

Type Scale Options

Within the Stackable Global Typography settings, you can find the Type Scale dropdown. Simply select a ratio, and all headings and text elements will automatically adjust their font sizes based on the chosen scale.

You can also customize type scale settings individually for desktop, tablet, and mobile views. To do this, click the desktop icon next to the setting, then choose the screen size you want to adjust. This ensures your design remains responsive and visually consistent across all devices.

Customizing Type Scale

You can further customize the type scale to match your design preferences. Just click on any heading level in the Typography settings and manually adjust its font size.

Resetting to Default

If you want to revert any changes made to your Type Scale settings, you can use the Reset button beside the type scale settings to restore the values back to None.