Taming Typography: Building a Modern CSS Reset
Leverage modern CSS features to achieve precise, fluid, and locale-aware web typography.
1Modernizing Typography Resets
Modern CSS now offers granular control over typography that previously required external hacks. Features like text-wrap, container query units, and text-box allow developers to manage spacing and alignment natively. This reset provides a foundation for fluid sizing, vertical rhythm, and hyphenation, ensuring consistent rendering across diverse browser environments and modern display standards.
2Rendering and Fallback Logic
The reset utilizes font-synthesis: none to prevent browsers from artificially creating bold or italic styles when a font family lacks them. It also employs text-size-adjust to disable mobile font inflation during rotation. By using font-size-adjust: from-font, the layout maintains visual stability while swapping between local system fonts and web-based fonts.
3Fluid Type with Containers
Traditional viewport-based units often fail to scale text correctly within constrained elements like sidebars. By setting container-type: inline-size, developers can use cqi units. This allows headings to scale relative to their parent container rather than the entire viewport, ensuring typography remains proportional regardless of the specific component or column width.
4Trimming Vertical Half-Leading
Line-height properties traditionally include extra space above the cap-height and below the baseline, known as half-leading. The text-box-trim property removes this space, allowing for tighter alignment between elements. This metrics-aware approach replaces the need for manual negative-margin adjustments, providing a cleaner and more predictable vertical rhythm for text blocks.
5Balancing and Wrapping Text
Default text wrapping often leaves stranded words at the end of lines. Using text-wrap: balance for headings improves visual symmetry, while text-wrap: pretty for paragraphs prevents single-word orphans. For editable content, text-wrap: stable ensures that new input does not cause the entire paragraph to reshuffle, maintaining a consistent user experience during interaction.
6Tuned Hyphenation Strategies
Automatic hyphenation requires correct language attributes to function via dictionaries. To avoid laddering or tiny fragments, the reset limits hyphenation frequency and consecutive lines. It also protects the final word of a paragraph and uses proper hyphen glyphs. Code and headings are explicitly set to manual hyphenation to prevent meaning-altering breaks.
7Hanging Punctuation and Underlines
Hanging punctuation allows marks like quotation marks to sit outside the text block, creating a flush visual edge. Additionally, text-decoration-thickness: from-font ensures underlines match the designer's intended weight. The use of text-decoration-skip-ink: auto ensures that underlines are automatically interrupted by descenders, preventing visual clutter and improving overall legibility for linked text.
8Variable Font Fine-Tuning
Variable fonts allow for dynamic optical sizing, adjusting stroke thickness based on rendered size. The reset uses font-variation-settings to enable this automatically. Furthermore, it implements grade compensation for dark mode, reducing perceived weight on dark backgrounds without altering glyph shape, ensuring consistent readability across different color schemes and varying display sizes.
9Numeric and Emoji Handling
Tables require tabular-nums to ensure digits stack cleanly in columns, while flowing text benefits from proportional-nums for natural spacing. The reset also provides explicit control over emoji rendering, allowing developers to choose between full-color or monochrome text-based variants. This prevents inconsistent platform-specific fallbacks and ensures the intended visual style is maintained.
10Locale-Aware Quote Management
Different regions have distinct quoting conventions, such as guillemets in French or nested single quotes in British English. By using the quotes property with :lang() selectors, the reset handles these variations natively. This approach allows the same HTML markup to render correctly across multiple locales without hardcoding specific characters into the content.
11Specificity and Overrides
The reset utilizes :where() to maintain zero specificity, allowing developers to easily override default styles with plain classes. It also uses :is() to group selectors efficiently, reducing repetition in the stylesheet. This structure ensures that the reset remains an opinionated foundation that can be adopted gradually without causing conflicts with existing project styles.
12Adopting the Modern Reset
The tidy-typography.css reset combines these techniques into a single, cohesive stylesheet. Because browsers ignore unsupported declarations, the code degrades gracefully in older environments. Adopting these modern standards reduces reliance on JavaScript-based fixes and legacy CSS hacks, leading to more performant, maintainable, and visually precise typography across all modern web applications.
Original article: CSS-Tricks — Taming Typography: Building a Modern CSS Reset