# Taming Typography: Building a Modern CSS Reset Leveraging modern CSS features to create a robust, fluid, and metrics-aware typographic foundation. - **Source:** [CSS-Tricks (feeds.feedburner.com)](https://css-tricks.com) - **Published:** 2026-11-05 - **Topic:** [technology](https://brifing.si/c/technology) - **Original article:** - **On Brifing:** https://brifing.si/s/d62537d8-a5fd-457f-a5e9-4771cb5edce8 ## Modernizing CSS Typography Modern CSS now offers precise control over typography that previously required external resets or JavaScript. Features like text-wrap: pretty and container query units allow developers to manage text scaling and layout wrapping natively. This article introduces a comprehensive stylesheet, tidy-typography.css, designed to handle rendering, fluid sizing, and vertical rhythm effectively. ## Rendering and Fallback Sanity Basic rendering hints like antialiased font smoothing and disabling font synthesis prevent browsers from creating artificial bold or italic styles. Using text-size-adjust disables mobile font inflation, ensuring layouts remain stable during rotation. Furthermore, font-size-adjust: from-font utilizes font metrics to minimize visual jumps while web fonts load in the background. ## Fluid Type with Containers Viewport-based units often fail to account for element width, causing headings to scale incorrectly in narrow 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 viewport, eliminating the need for numerous component-specific media queries. ## Trimming Vertical Leading Line-height traditionally includes half-leading space above and below text, making tight alignment difficult. The text-box-trim property removes this excess space, while text-box-edge measures from the cap-height to the alphabetic baseline. This provides a metrics-aware alternative to using manual negative margins for aligning elements with other design components. ## Balanced and Orphan-free Text Default wrapping often leaves stranded words at the end of paragraphs. Using text-wrap: balance for headings distributes text evenly across lines, while text-wrap: pretty prevents orphans in paragraphs. For editable content, text-wrap: stable ensures that text does not reshuffle as users type, replacing the need for complex JavaScript orphan fixers. ## Tuned Hyphenation Rules Hyphens: auto relies on language dictionaries, requiring a correct lang attribute on the HTML tag. To avoid tiny word fragments or ladders, developers should use hyphenate-limit-chars and hyphenate-limit-lines. These settings ensure that hyphenation remains readable and professional, while manual hyphenation is reserved for code blocks and headings to prevent errors. ## Hanging Punctuation and Underlines Hanging punctuation allows quotation marks to sit outside the text block, ensuring edges appear flush. For links, text-decoration-thickness: from-font respects the designer's intent, while text-decoration-skip-ink: auto prevents underlines from cutting through descenders. These subtle adjustments significantly improve the visual quality and readability of long-form text blocks on the web. ## Variable Font Fine-tuning Variable fonts allow for optical sizing, which adjusts stroke thickness based on rendered size. The GRAD axis can be used to dial back perceived weight in dark mode without changing glyph geometry. These settings ensure that typography remains legible and consistent across different background colors and various display sizes. ## Numeric and Emoji Variants Different contexts require different numeric styles. Tables benefit from tabular-nums and lining-nums for alignment, while prose looks better with oldstyle-nums. Additionally, font-variant-emoji allows developers to explicitly choose between full-color or monochrome emoji, preventing inconsistent platform fallbacks and ensuring the chosen style matches the overall design language of the interface. ## Locale-Aware Quotes and Subscripts Quote styles vary significantly by region, such as French guillemets versus English nested quotes. Using the quotes property with :lang() selectors allows for locale-specific rendering. Furthermore, font-variant-position enables the use of purpose-built sub and superscript glyphs, which are superior to the browser's default method of shrinking and shifting text. ## Specificity with :where and :is The :where() pseudo-class is essential for resets because it maintains zero specificity, allowing developers to override styles easily. Conversely, :is() helps group selectors like h1 through h6 to reduce repetition while retaining the specificity of the most complex argument. These tools make the stylesheet modular and easy to maintain. ## Adopting the Modern Reset The tidy-typography.css reset combines these techniques into a single, cohesive stylesheet. Because browsers ignore unsupported declarations, this reset can be adopted gradually without breaking existing layouts. By leveraging these modern CSS capabilities, developers can achieve professional-grade typography that is both fluid and highly responsive to diverse content and screen sizes. ## Sources covering this story - https://css-tricks.com/taming-typography-modern-css-reset/ — --- _Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._