typeset

Audit font choices, hierarchy, sizing, and readability first, then apply systematic fixes: replace invisible default fonts, establish a modular type scale with a consistent ratio like 1.25, define clear weight roles, and set proper line-heights and line lengths.

Use a modular scale with a consistent ratio such as 1.25, 1.333, or 1.5, covering about five sizes from caption to heading. Combine size with weight, color, and spacing for strong hierarchy rather than relying on size alone.

Use fixed rem-based scales for app UIs where spatial predictability matters in dense layouts. Use fluid clamp(min, preferred, max) sizing for headings on marketing and content pages, while keeping body text fixed.

Limit yourself to 2-3 font families maximum and 3-4 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. Fix it by using font-display: swap with metric-matched fallback fonts so text renders immediately without jumping when the custom font loads.

Avoid body text below 16px, px units instead of rem, more than 2-3 font families, arbitrary sizes without a scale, decorative fonts for body text, pairing similar typefaces, and disabling browser zoom with user-scalable=no.