typeset

Audit font choices, hierarchy, sizing, and readability first, then replace invisible defaults like Inter or Roboto with brand-appropriate fonts. Establish a modular type scale with a consistent ratio and define clear weight roles for headings, body, and captions.

Use a modular scale with a consistent ratio such as 1.25 or 1.333 across about five sizes from caption to heading. Combine size with weight, color, and spacing rather than relying on size alone, and keep sizes far enough apart to be distinguishable.

Use a fixed rem-based type scale 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.

Body text should be at least 16px or 1rem, set in rem units to respect user browser settings. Line length should stay between 45 and 75 characters using max-width in ch units, with line-height around 1.5 to 1.7 for body copy.

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