Typography scale
A typography scale is a defined system of font sizes that creates a consistent, harmonious hierarchy of text across a website or design system — from the largest display headings down to the smallest captions and labels.
What is a Typography Scale?
A typography scale is a defined system of font sizes that creates a consistent, harmonious hierarchy of text across a website or design system — from the largest display headings down to the smallest captions and labels.
Rather than choosing font sizes arbitrarily, a typography scale creates a mathematical relationship between sizes. Common approaches include modular scales (each size is a consistent multiple of the previous one) or custom design token systems.
A Typical Typography Scale
A typical website typography scale might define: Display/Hero (64–80px — used for major homepage headlines), H1 (48–56px), H2 (32–40px), H3 (24–28px), Body Large (18–20px), Body (16px — the readable baseline), Body Small (14px), and Caption/Label (11–12px).
Beyond size, a typography scale also defines font weight, line height, letter spacing, and font family — including potential variable fonts.
In Webflow, typography scales are implemented through global text styles and, on projects with Variables, through design tokens for font sizes. At Appsrow, we establish typography scales as a foundational step in every design system.
Transform your website with expert Webflow development
From brand identity to Webflow development and marketing, we handle it all. Trusted by 50+ global startups and teams.