Typography Scale Builder

Define and document a consistent type scale for your design system.

1Name your system and font families

2Adjust the default type scale or start fresh

3Add/remove roles as needed

4Copy for use in CSS or design docs

System Name

Primary FontMono Font

Type Scales

TYPOGRAPHY SCALE
=================

SCALE
-----
Display      4rem / 64px            weight:700    lh:1.1    → Hero headlines
H1           2.5rem / 40px          weight:700    lh:1.15   → Page titles
H2           2rem / 32px            weight:600    lh:1.2    → Section headings
H3           1.5rem / 24px          weight:600    lh:1.3    → Subsection headings
Body         1rem / 16px            weight:400    lh:1.6    → Paragraphs, general text
Small        0.875rem / 14px        weight:400    lh:1.5    → Captions, helper text
Label        0.75rem / 12px         weight:500    lh:1.4    → Form labels, badges

CSS VARIABLES
-------------

Exports for this tool