typography-scale

A modular typography scale uses mathematical ratios like 1.25 or 1.333 to define harmonious font sizes for headings, body text, and captions. This ensures consistent text sizing across digital interfaces by mapping specific pixel dimensions to each UI element.

Responsive typography requires scaling down heading sizes on mobile while maintaining a 16px minimum body text size for readability. It also involves adjusting line lengths to an optimal 45-75 character range to ensure text remains legible across smaller screens.

Use a tight 1.2 line height with -0.02em letter spacing for large headings, a normal 1.5 line height with 0 spacing for body text, and a relaxed 1.75 line height with 0.05em spacing for uppercase labels, captions, and long-form reading.

A design system should limit regular use to 4-5 typography sizes to maintain visual harmony. This typically includes a base body size of 16px, with subheadings, headings, and display sizes calculated using a consistent mathematical ratio like the perfect fourth.

Yes, a typography scale defines weight mappings using Regular, Medium, Semibold, and Bold styles. It also establishes font pairing rules, assigning primary fonts for body text, secondary fonts for headings, and mono fonts for technical content or code.

Typography appears inconsistent when sizes and weights lack a mathematical scale and documented usage rules. Applying a standardized ratio for size, line height, and letter spacing across all UI labels and headings ensures readable, harmonious text throughout the product.