A SAGE BRAND SHOP TOOL
Typography By Design
Create a clear, consistent typography hierarchy with responsive settings designed to work across screen sizes.
From heading sizes to line height and spacing, build a practical typography system that gives every level a purpose.
From a starting size to a complete system.
- 01
Choose your starting settings
Enter your body text size, choose a scale ratio, and optionally set a maximum H1 size.
- 02
Explore your typography settings
Review calculated heading sizes, line heights, and spacing recommendations across desktop, tablet, and mobile.
- 03
Preview and save
See your typography hierarchy in context, save your project, and export your typography settings sheet for reference.
A typography system that works together.
Typography is more than choosing font sizes. The relationships between headings, body text, line height, and spacing determine how comfortably people read and navigate your content.
Typography By Design helps you establish those relationships through a consistent scale, with recommendations that adapt across desktop, tablet, and mobile screens.
Build your hierarchy
Start with your preferred body text size and select a modular scale ratio to generate a coordinated H1–H6 hierarchy.
Plan for every screen
Explore responsive typography settings for desktop, tablet, and mobile, with proportional adjustments that maintain a recognizable hierarchy.
See the relationships
Review recommended line heights and spacing, then explore the complete hierarchy through a visual typography preview.
Give every type level a purpose.
Build a responsive typography hierarchy you can use as a consistent reference across your brand's digital materials.