From Font Value Text Decoration Thickness

Modern CSS gives developers precise control over text decorations, and the text-decoration-thickness property with its from-font value represents a significant advancement in typography handling. This property allows you to control the thickness of underlines, overlines, and line-through decorations with the same precision designers expect from traditional print design. For professional web development services that pay attention to these typography details, our team specializes in creating polished, accessible interfaces.

Understanding how font metrics influence text decoration helps create more harmonious designs where decoration lines naturally complement the characters they accompany.

Understanding CSS Text Decoration Thickness

The text-decoration-thickness property sets the stroke thickness of decoration lines applied to text, including underlines, overlines, and line-through strikethroughs. This property works in conjunction with text-decoration-line to define which type of decoration to apply, and text-decoration-color to set the color. Before this property was standardized, developers had limited control over decoration thickness, often resorting to workarounds like border-bottom or background gradients that complicated stylesheets and reduced maintainability.

The property accepts several values that give developers flexibility in how thickness is determined:

• auto - Browser chooses appropriate thickness based on rendering context and font characteristics
• from-font - Uses font metrics if available, falling back to auto when no metrics exist
• length - Fixed values like 3px, 0.15em, or 0.12rem for complete control
• percentage - Relative to 1em in current font, calculated proportionally

The default value of auto provides reasonable results without requiring developer intervention, making it suitable for prototyping or projects where exact visual control isn't critical. However, browser implementations of auto vary somewhat, which can lead to inconsistent rendering across different browsers. For production projects where consistency matters, specifying explicit values or using from-font with supporting fonts provides more predictable results.

Understanding the distinction between the original text-decoration-width property (which was renamed) and the current text-decoration-thickness helps explain the evolution of this CSS feature. The property was updated in the 2019 working draft of the CSS Text Decoration Module Level 4 specification to better reflect its purpose and align with the other text-decoration properties. This rename clarified that the property controls thickness rather than width, which matters for accessibility and rendering precision.

Code Example

.link {
 text-decoration-line: underline;
 text-decoration-thickness: from-font;
}

The From-Font Value Explained

The from-font value represents a sophisticated approach to text decoration thickness that respects the typographic design embedded within font files. When you specify text-decoration-thickness: from-font, the browser checks whether the font file includes metrics specifying a preferred thickness for text decorations. If such metrics exist, the browser uses that value; if not, it falls back to the auto behavior, selecting an appropriate thickness itself.

This approach leverages the expertise of professional type designers who carefully craft fonts with specific visual weights and proportions. Type designers consider how underlines and other decorations should interact with letterforms when creating fonts. By using from-font, developers tap into this design thinking without needing to manually determine appropriate thicknesses for each font they use. The result is more harmonious typography where decoration lines naturally complement the characters they accompany.

Font metrics that support the from-font value include information that type designers embed during the font creation process. Not all fonts include these metrics--many basic or system fonts lack explicit decoration thickness information--but well-designed professional fonts increasingly include this data. When working with custom fonts or fonts from foundries that include comprehensive metrics, from-font produces particularly satisfying results that align with the designer's intentions.

The practical benefit of from-font becomes apparent when using multiple fonts or font weights within a design system. Instead of manually specifying different thicknesses for bold, regular, and light font weights, from-font automatically adjusts decoration thickness to match each weight's visual presence. This consistency contributes to the professional polish that distinguishes high-quality web applications from amateur efforts. To learn more about working with font metrics and typography in CSS, explore our guide on font text height for complementary techniques.

All Text Decoration Thickness Values

Auto Value

The auto value lets browsers determine decoration thickness based on rendering context and font characteristics. Browsers consider factors like font size, current font family, and display characteristics when selecting thickness under the auto behavior. This value provides reasonable results without requiring developer intervention, making it suitable for prototyping or projects where exact visual control isn't critical.

Length Values

Explicit length values like pixels (3px), em units (0.15em), or rem units (0.12rem) give developers complete control over decoration thickness. Using relative units like em and rem is often preferable because these values scale proportionally with font size changes, maintaining visual relationships as text size adjusts.

The em unit is particularly useful for text decoration thickness because it creates thickness proportional to the current font size. A decoration of 0.1em will always appear proportionally appropriate regardless of whether the text is 16px or 24px, because the browser calculates the actual pixel thickness based on the current font size.

Percentage Values

Percentage values for text-decoration-thickness are calculated relative to 1em in the current font, making them similar to em values in their scaling behavior. The specification defines that percentages inherit as relative values, which means they scale appropriately with font size changes and maintain visual consistency across different contexts.

Practical Code Examples

Basic Underline with From-Font

The simplest implementation of from-font applies to underlined text elements. When working with Next.js applications, you might apply this style to link components or specific text elements that require visual emphasis. The from-font value automatically adapts the underline thickness to match the font's inherent design characteristics.

.link {
 text-decoration-line: underline;
 text-decoration-thickness: from-font;
}

This approach works particularly well for custom fonts where the type designer has specified ideal underline proportions. The underline will appear more integrated with the letterforms than a browser-generated thickness would achieve.

Combining with Shorthand

Modern CSS allows combining all text decoration properties into an efficient shorthand. This approach reduces code complexity while maintaining clear intent. The shorthand order is: line, style, color, then thickness, which mirrors how developers typically think about text decorations.

.emphasis {
 text-decoration: underline solid blue from-font;
}

.link-hover {
 text-decoration: underline solid currentColor 2px;
 transition: text-decoration-thickness 0.2s ease;
}

.link-hover:hover {
 text-decoration-thickness: 4px;
}

The transition example demonstrates how thickness can animate smoothly, creating subtle interactive feedback that enhances user experience without requiring JavaScript intervention.

Responsive Decoration Thickness

Creating responsive decorations that adapt to different viewport sizes requires thoughtful unit selection. Using relative units ensures decorations remain appropriately scaled across device sizes, maintaining visual harmony from mobile phones to large desktop displays.

.text-content {
 font-size: clamp(1rem, 2vw, 1.5rem);
}

.text-content a {
 text-decoration-line: underline;
 text-decoration-thickness: 0.05em;
 text-underline-offset: 0.1em;
}

The combination of text-decoration-thickness with text-underline-offset gives developers comprehensive control over underline positioning and appearance, enabling designs that accommodate varying font sizes while maintaining readability.

Feature Detection with @supports

For projects requiring support for older browsers, feature detection allows enhanced styling for capable browsers while maintaining baseline functionality elsewhere.

@supports (text-decoration-thickness: from-font) {
 .professional-links {
 text-decoration: underline from-font;
 }
}

Browser Support and Compatibility

The text-decoration-thickness property and its from-font value enjoy broad support across modern browsers. The feature achieved Baseline status in March 2021, indicating widespread availability and reliability across different browser versions and platforms. This maturity makes the property suitable for production use without requiring extensive fallback strategies.

Browser support for the from-font value specifically depends on whether fonts include the necessary metrics. All major browsers support the syntax, but the visual result depends on the font file itself rather than browser implementation. Testing with actual fonts is the only way to confirm that from-font produces intended results with a specific typeface.

Fallback Strategies

For projects requiring broader compatibility, several fallback strategies ensure graceful degradation:

1. Progressive Enhancement: The property doesn't break rendering in older browsers--decorations simply appear with browser-default thickness
2. @supports Detection: Provide enhanced styling for capable browsers while maintaining baseline functionality
3. Explicit Fallbacks: Set explicit thickness values before using from-font as enhancement

The graceful nature of text-decoration-thickness means that even in browsers without support, text remains readable and functional. Users of older browsers simply see decorations with default browser thickness, which maintains usability while modern browsers enjoy enhanced typography.

Performance Impact

The text-decoration-thickness property applies during the browser's text rendering phase, which means it has minimal performance impact compared to properties that require layout recalculations or repaints. When animating text-decoration-thickness, browsers can typically handle the transition smoothly because it affects painting rather than layout. Simple transitions perform well in most contexts without causing layout thrashing or excessive repainting.

For projects focused on Core Web Vitals and overall performance, text-decoration-thickness presents no concerns. The property doesn't affect layout calculations, image loading, or any of the metrics that impact Lighthouse scores.

Best Practices for Modern Web Development

Typography-First Design Approach

When using from-font, selecting quality fonts that include comprehensive metrics maximizes the value of this feature. Professional fonts from established foundries typically include decoration thickness information, while basic system fonts or hastily created web fonts may lack these details. Investing in quality typography pays dividends when using from-font because the feature leverages the design work already done by type creators.

For design systems, establishing clear conventions around text decoration helps maintain visual consistency across different components and pages. Defining whether from-font or explicit values should be used in different contexts prevents inconsistent styling that can make interfaces feel amateurish.

Accessibility Considerations

Text decorations play important roles in accessibility, particularly for distinguishing links from regular text. The text-decoration-thickness property allows developers to ensure that link underlines are thick enough to be clearly visible across different vision abilities and display conditions. Using from-font with appropriate fonts naturally achieves good visibility because it follows the font designer's intentions for legible text presentation.

The text-underline-offset property works alongside text-decoration-thickness to position decorations optimally relative to text baseline. For accessibility, ensuring adequate spacing between text and underline helps readers with certain visual conditions distinguish decorations more easily.

Integration with CSS-in-JS and Modern Frameworks

Next.js and other modern frameworks often use CSS-in-JS solutions or utility classes that integrate smoothly with text-decoration-thickness. Tailwind CSS provides decoration-{value} utilities that expose this functionality in utility-first stylesheets. To explore more about CSS techniques for professional web development, our web development services can help implement these typography best practices in your projects.

// Next.js component example
const Link = ({ children, href }) => (
 <a
 href={href}
 className="decoration-from-font underline-offset-2 hover:decoration-2"
 >
 {children}
 </a>
);

This integration allows developers to apply decoration thickness consistently across a design system while taking advantage of framework-specific patterns for maintainability.

Related CSS Text Decoration Properties

The text-decoration-thickness property works alongside several related properties that together provide comprehensive control over text decoration appearance:

• text-decoration-line - Specifies which type of decoration to apply (underline, overline, line-through)
• text-decoration-color - Controls the color of decorations independently from text color
• text-decoration-style - Adds visual variety through solid, double, dotted, dashed, or wavy styles
• text-underline-offset - Positions decorations precisely relative to text baseline
• text-decoration-skip-ink - Controls whether decorations skip over descenders for better readability

Combining these properties creates rich text decoration effects suitable for various design contexts, from subtle link styling to expressive emphasis treatments.

Sources

1. MDN Web Docs - text-decoration-thickness - Comprehensive official documentation with syntax, values, and browser compatibility
2. CSS-Tricks - text-decoration-thickness - Detailed developer reference with practical examples
3. CSS Text Decoration Module Level 4 Specification - Official W3C specification