typeset

Start by auditing font choices, hierarchy, sizing, and readability, then establish a modular type scale with a consistent ratio like 1.25. Set body text to at least 16px, limit line lengths to 45-75 characters, and define clear weight roles for headings, body, and captions.

A modular scale using a ratio of 1.25, 1.333, or 1.5 covers most needs with about five sizes: caption, secondary, body, subheading, and heading. Use fixed rem-based scales for app UIs and fluid clamp() sizing for marketing page headings.

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.

Limit a project to 2-3 font families and 3-4 weights such as Regular, Medium, Semibold, and Bold. Load only the weights actually used, since each additional weight increases page load time.

Muddy hierarchy usually comes from font sizes that are too close together, like 14px, 15px, and 16px, or weak weight contrast. Combine size, weight, color, and spacing together rather than relying on size alone to distinguish levels.

Use font-display: swap with metric-matched fallback fonts so text renders immediately without shifting when the web font loads. This keeps the layout stable while still delivering the intended typeface.