typeset

Start by auditing font choices, hierarchy, sizing, and consistency, then establish a modular type scale with a consistent ratio like 1.25 or 1.333. Define clear weight roles, use semantic tokens like --text-body, and apply the same styles to same-role elements throughout.

A modular scale with a ratio of 1.25, 1.333, or 1.5 covers most needs with about five sizes: caption, secondary, body, subheading, and heading. Combine size with weight, color, and spacing for strong hierarchy rather than relying on size alone.

Use rem units for font sizes so text respects user browser settings and remains zoomable. Avoid px for fonts and never disable browser zoom with user-scalable=no, as both harm accessibility.

Use clamp(min, preferred, max) for headings and display text on marketing or content pages where fluid scaling fits. For app UIs with dense container-based layouts, use a fixed rem-based scale adjusted at one or two breakpoints instead.

Limit yourself to two or three font families and three to four weights such as Regular, Medium, Semibold, and Bold. Load only the weights you actually use, since each additional weight increases page load time.

Layout shift happens when fallback fonts have different metrics than the web font. Use font-display: swap with metric-matched fallback fonts to minimize the visual jump during loading.