CSS Fonts

CSS Fonts: Font Stacks, Weights, and Responsive Sizing

CSS font properties control typeface selection, thickness, italics, and scale across your interface. Choosing a clean font stack and accessible rem units keeps typography fast to load, readable on any operating system, and respectful of visitor browser zoom settings.

Building Reliable Font Stacks and Sizes

Always end font-family with a generic fallback like sans-serif, serif, or monospace. System font stacks (system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) render instantaneously using the user's native OS UI font with zero network download.

For font-size, prefer rem (relative to root html size, usually 16px) instead of rigid px so visitors who raise their browser default font size see properly scaled text.

body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

code {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 0.9em;
}

Loading Custom Web Fonts Cleanly

When loading custom fonts via @font-face or external font stylesheets, always include font-display: swap;. This instructs the browser to paint readable fallback text immediately while the custom font downloads instead of hiding text behind an invisible screen flash.

Common Mistakes to Avoid

• Loading six font weights when you only use two: Each unused font weight adds extra HTTP requests and kilobytes; load only 400, 600, and 700 (or one variable font).
• Quoting generic family keywords: Never write font-family: "sans-serif";—quote multi-word font names like "Fira Code", but leave sans-serif unquoted.
• Setting html { font-size: 10px; } blindly: Hardcoding root pixels overrides user browser accessibility font preferences; use percentages (62.5%) if scaling, or stick with default 1rem = 16px.

Frequently Asked Questions

What is the difference between em and rem in CSS?

rem always scales relative to the root html element's font size, whereas em scales relative to the current or parent element's font size—which can compound unpredictably inside nested lists.

Should body text ever be smaller than 16px?

Keep main body copy at 1rem (16px) or larger for comfortable reading across phones and laptops.