Design System Glossary

Type Ramp

A type ramp is the predefined scale of typographic sizes, weights, and line heights that define a Design System's typographic voice. It replaces arbitrary sizing with a coherent hierarchy — usually 6–12 levels from display down to caption.

Most type ramps follow a proportional scale. If the base font size is 16px, each level might increase by a factor of 1.125 (the "minor third" ratio):

Display: 48px
Heading 1: 38px
Heading 2: 32px
Heading 3: 28px
Subheading: 24px
Body: 16px
Small/Caption: 14px

The ramp also defines weight and line height for each level. Body text might be regular weight at 1.6 line height. Headings might be bold at 1.2. A Design System usually exposes the ramp as design tokens — font-size-heading-1, font-weight-heading, line-height-body — that components consume.

Why a ramp? Consistency. If every designer picks their own sizes, you end up with 20 different heading sizes and no visual hierarchy. A ramp says "here are the 8 sizes we use, and designers pick from them." It also scales gracefully. If you need a larger ramp for a different medium (responsive, dark mode), you adjust the tokens at the top, not every component.

The discipline: don't break the ramp. One bespoke 22px size for a special heading will snowball into dozens. If the ramp doesn't have a size you need, discuss it with the Design System team. The ramp exists to be constraining.