typeset

Audit font choices, hierarchy, sizing, and readability first, then replace invisible default fonts, establish a modular type scale with a consistent ratio, and define clear weight roles. Set line-height per context and cap line lengths at 45-75 characters.

Build a type scale using 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 on marketing and content pages while keeping body text fixed.

Body text should be at least 16px or 1rem, set in rem units to respect user browser settings. Pair it with a line-height of 1.5-1.7 and a max-width around 65ch for comfortable long-form reading.

Limit a design 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.