typeset

Audit font choices, hierarchy, sizing, and readability first, then replace invisible default fonts like Inter or Roboto with a pairing that fits the brand. Establish a modular type scale with a consistent ratio such as 1.25 and define clear weight roles.

Use a modular scale with a consistent ratio between levels, covering about five sizes from caption to heading. Combine size with weight, color, and spacing rather than relying on size alone, and keep at least strong contrast between body and heading text.

Use fixed rem-based scales for app UIs, optionally adjusted at one or two breakpoints, since dense layouts need spatial predictability. Reserve fluid clamp() sizing for headings and display text on marketing or content pages while keeping body text fixed.

Keep line lengths between 45 and 75 characters using max-width in ch units, such as max-width: 65ch. Body text should be at least 16px or 1rem, with line-height around 1.5 to 1.7 for body and 1.1 to 1.2 for headings.

Use font-display: swap together with metric-matched fallback fonts so text renders immediately without shifting when the web font arrives. Also load only the weights you actually use, since each additional weight increases page load time.

Avoid decorative or display fonts for body text and never disable browser zoom or use px instead of rem for font sizes. The goal is clarity and readability, not making text fancier, so skip changes that sacrifice accessibility for style.