Typography Reset

Quick implementation

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p, li { max-width: 60ch; }

p { text-wrap: pretty; }

code, pre, kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
}

img, video, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a CSS expert. Write a modern typography reset that sets sensible defaults for a design system.

Requirements:
1. Set box-sizing: border-box on all elements.
2. Set body font-family to a system font stack, font-size: 1rem, line-height: 1.6, -webkit-font-smoothing: antialiased.
3. Set headings (h1–h4) to line-height: 1.1, letter-spacing: -0.02em, text-wrap: balance.
4. Set p and li to max-width: 60ch for comfortable reading measure.
5. Set p to text-wrap: pretty to prevent orphaned words.
6. Set code/pre/kbd to a monospace stack at 0.875em.
7. Set img/video/svg to display: block, max-width: 100%.
8. Set form elements to font: inherit so they match body text.

Do NOT use oklch() — this reset should work in any project.
Output only the CSS.

Why this matters in 2026

Browser default stylesheets are inconsistent and full of legacy decisions — headings with tight line-heights, form controls inheriting nothing, images as inline elements. A focused typography reset corrects the dozen or so defaults that cause the most friction without over-resetting and forcing you to rebuild everything from scratch. Modern additions like text-wrap: balance and text-wrap: pretty are now widely supported and dramatically improve heading and paragraph aesthetics with a single line each.

The logic

The reset targets only the elements where browser defaults actively cause problems. box-sizing: border-box makes layout math predictable; max-width: 60ch on paragraphs enforces a comfortable reading measure without needing a container class; font: inherit on form elements eliminates the most common "why does my input look different" bug. The heading letter-spacing: -0.02em is a subtle but meaningful improvement on large display text.

Accessibility & performance

Setting -webkit-font-smoothing: antialiased improves legibility on macOS and iOS but can slightly reduce contrast on low-DPI screens — test with users who have visual impairments if this is a concern. The 60ch measure limit aligns with WCAG 1.4.8 guidance on line length for readability. All properties in this reset are inherited or apply only at paint time, so there is zero layout performance cost.