Typography reset
A side-by-side comparison showing browser default typography vs. a modern CSS reset with box-sizing, font-family, line-height, and margins.
Heading
A paragraph with default browser line-height and margins.
- List item one
- List item two
Heading
A paragraph with consistent line-height and no margin.
- List item one
- List item two
Quick implementation
:root {
--font-family: var(--font-sans, system-ui, sans-serif);
--line-height: 1.6;
--spacing: 0.75rem;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-family);
font-size: 1rem;
line-height: var(--line-height);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 var(--spacing);
}
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 700; }
p {
margin: 0 0 var(--spacing);
max-width: 65ch;
}
ul, ol {
padding-left: 1.25rem;
margin: 0 0 var(--spacing);
}
button, input, textarea, select {
font: inherit;
line-height: 1.4;
}
img, video, svg {
display: block;
max-width: 100%;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a modern design system from scratch.
Goal: Create a minimal typography reset that fixes inconsistent browser defaults without over-resetting.
Technical constraints:
- Use CSS custom properties for font-family, line-height, and spacing (spacing: 0.75rem).
- Set box-sizing: border-box on *, *::before, *::after as the foundation.
- Set body margin: 0, font-family from custom property, font-size: 1rem, line-height: 1.6.
- Set headings (h1–h4) with line-height: 1.1, letter-spacing: -0.02em, margin-bottom from spacing token.
- Set p to margin 0 0 spacing, max-width: 65ch for readable measure.
- Use oklch() for any demo colors, not hex or rgba().
Framework variant (pick one):
A) Vanilla CSS — a standalone reset.css file for any project.
B) React component library — wrap in a <BaseStyles> component using styled-components or CSS modules.
Edge cases to handle:
- List styles: do NOT remove list-style from ul/ol in the reset (breaks accessibility for screen readers).
- Form elements: use font: inherit to match body typography, not browser system fonts.
- Images: set display: block to remove inline baseline gap.
- -webkit-font-smoothing: antialiased improves macOS rendering but test for contrast issues.
- Ensure the reset works with both light and dark mode via CSS custom properties.
Return CSS only with inline comments explaining each section.Why this matters in 2026
Browser default stylesheets vary significantly across Chrome, Safari, and Firefox — headings have inconsistent line-heights, paragraphs have different margins, and form controls inherit nothing. A modern typography reset corrects these inconsistencies while embracing CSS custom properties for theming. Unlike the old normalize.css approach that fought browser defaults, this reset leverages modern CSS features like letter-spacing on headings and max-width: 65ch for readable measure, creating a consistent starting point that works across all projects.
The logic
The reset builds on three core principles. box-sizing: border-box makes layout math predictable — padding and borders are included in declared widths. Custom properties (--font-family, --line-height, --spacing) create a flexible token system for theming without rewriting the entire reset. The letter-spacing: -0.02em on headings is a subtle optical adjustment that prevents large type from appearing too loose, while max-width: 65ch on paragraphs enforces a comfortable reading measure without container classes.
font: inherit rule on form elements is often overlooked — it forces inputs to use your document font instead of the browser's system-ui, which differs between operating systems.
Accessibility & performance
This reset respects accessibility best practices: list styles are preserved (removing them breaks VoiceOver list announcements), form elements inherit focus styles naturally, and the max-width: 65ch on paragraphs aligns with WCAG 1.4.8 guidance on line length. The -webkit-font-smoothing: antialiased property improves legibility on macOS but can reduce contrast on low-DPI screens — test with users who have visual impairments. All properties apply during initial style computation with zero layout cost.