CSS text-decoration-thickness Customize Text Decorations

Introduction

The text-decoration-thickness property in CSS allows you to set the thickness of decorations like underlines, overlines, or line-throughs on text. It’s a handy tool for web developers to customize text appearance to fit their design needs.

Specification

The text-decoration-thickness property is part of the CSS Text Decoration Module Level 4. This module gives web developers control over text decorations, ensuring consistency across different browsers and platforms.

Syntax

Here’s how to use the text-decoration-thickness property:

/* Keyword values */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* Length values */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* Percentage values */
text-decoration-thickness: 10%;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;

Explanation of Syntax

• Keywords: auto lets the browser choose the thickness, while from-font uses the font’s preferred thickness, if available.
• Lengths: Set a fixed thickness using units like px, em, rem, etc.
• Percentages: Set the thickness as a percentage of the font size.
• Global values: Inherit, reset, or unset the property value based on context.

Formal Definition

• Initial Value: auto
• Applies To: All elements, including ::first-letter and ::first-line.
• Inherited: No
• Percentages: Based on the font size.
• Computed Value: As specified.
• Animation Type: By computed value type.

Formal Syntax

text-decoration-thickness = auto | from-font | <length-percentage>
<length-percentage> = <length> | <percentage>

Examples

Using auto

HTML:

<p class="auto">This text has an automatic underline thickness.</p>

CSS:

.auto {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: auto;
}

Output: The underline thickness is determined by the browser.

Using from-font

HTML:

<p class="from-font">This text has a font-defined underline thickness.</p>

CSS:

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

Output: The underline thickness is defined by the font file, if specified.

Using a Specific Length

HTML:

<p class="length">This text has a 3px underline thickness.</p>

CSS:

.length {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}

Output: The underline thickness is 3 pixels.

Using a Percentage

HTML:

<p class="percentage">This text has a 10% underline thickness.</p>

CSS:

.percentage {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: 10%;
}

Output: The underline thickness is 10% of the font size.

Using the Shorthand Property

HTML:

<p class="shorthand">This text uses the shorthand property for underline.</p>

CSS:

.shorthand {
  text-decoration: underline solid red 5px;
}

Output: The underline is solid, red, and 5 pixels thick.

Browser Compatibility

The text-decoration-thickness property is supported by most modern browsers:

• Google Chrome: Version 89 and above
• Microsoft Edge: Version 89 and above
• Mozilla Firefox: Version 70 and above
• Opera: Version 75 and above
• Safari: Version 12.1 and above

Related Properties

Other CSS properties related to text decoration include:

• text-decoration: A shorthand property for multiple text decoration settings.
• text-decoration-line: Specifies the type of line(s) to be drawn.
• text-decoration-color: Sets the color of the text decoration line.
• text-decoration-style: Defines the style of the text decoration line.
• text-underline-offset: Sets the offset distance of the underline from the text.

These properties help you fully customize the appearance of text decorations to match your design needs.

Practical Use Cases

Enhancing Readability

Customizing the thickness of underlines can make text more readable, especially for users with visual impairments.

HTML:

<h1 class="thick-underline">Important Heading</h1>
<p>This paragraph contains some important information.</p>

CSS:

.thick-underline {
  text-decoration-line: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 3px;
}

Branding Consistency

Ensuring that text decorations match the overall design and branding guidelines can create a cohesive and professional look.

HTML:

<p class="brand-underline">Brand-consistent underline</p>

CSS:

.brand-underline {
  text-decoration-line: underline;
  text-decoration-color: #FF5733;
  text-decoration-thickness: 2px;
}

Highlighting Important Information

Using thicker underlines can draw attention to important information such as links, key phrases, or call-to-action buttons.

HTML:

<a href="#" class="important-link">Click here to learn more</a>

CSS:

.important-link {
  text-decoration-line: underline;
  text-decoration-color: #3498db;
  text-decoration-thickness: 4px;
}

Creative Design Elements

Designers can use custom thickness values to create unique and visually appealing text decorations that stand out.

HTML:

<p class="creative-underline">Creative and unique underline</p>

CSS:

.creative-underline {
  text-decoration-line: underline;
  text-decoration-color: #e74c3c;
  text-decoration-thickness: 5px;
}

Accessibility Considerations

Customizing the thickness of text decorations can also improve accessibility. Thicker underlines can make links and important text more visible to users with visual impairments.

HTML:

<a href="#" class="accessible-link">Accessible link</a>

CSS:

.accessible-link {
  text-decoration-line: underline;
  text-decoration-color: #2ecc71;
  text-decoration-thickness: 3px;
}

Comparison with Other Text Decoration Properties

The text-decoration-thickness property complements other text decoration properties to provide comprehensive control over the appearance of text decorations. Here’s a comparison with related properties:

text-decoration-line

• Purpose: Specifies the type of decoration line(s) to be drawn.
• Values: underline, overline, line-through, and none.
• Usage: Used to define where the decoration line appears (under, over, or through the text).

Example:

text-decoration-line: underline;

text-decoration-color

• Purpose: Sets the color of the text decoration line.
• Values: Any valid CSS color value.
• Usage: Used to match the decoration color with your design theme.

Example:

text-decoration-color: blue;

text-decoration-style

• Purpose: Defines the style of the text decoration line.
• Values: solid, double, dotted, dashed, and wavy.
• Usage: Used to customize the appearance of the decoration line.

Example:

text-decoration-style: dotted;

text-underline-offset

• Purpose: Sets the offset distance of the underline from the text.
• Values: Length units (px, em, rem, etc.) or auto.
• Usage: Used to create more space between the text and the underline for better readability.

Example:

text-underline-offset: 2px;

text-decoration (Shorthand Property)

• Purpose: A shorthand property that sets multiple text decoration properties at once.
• Values: Combines values for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.
• Usage: Simplifies the process of setting multiple text decoration properties.

Example:

text-decoration: underline solid red 3px;

Practical Use Cases

Enhancing Readability

Customizing the thickness of text decorations can significantly improve the readability of your content. For example, using a thicker underline for headings or important text can make it stand out, making it easier for users to scan and understand your content quickly.

Branding Consistency

Maintaining a consistent visual identity is crucial for branding. The text-decoration-thickness property allows you to ensure that text decorations match your brand guidelines, creating a cohesive look across your website.

Highlighting Important Information

Using thicker or custom-thickness text decorations can draw attention to important information such as links, key phrases, or call-to-action buttons. This helps users quickly identify and interact with the most relevant parts of your content.

Creative Design Elements

Designers can use the text-decoration-thickness property to create unique and visually appealing text decorations that stand out. This can be especially useful in artistic or design-focused websites where visual impact is important.

Accessibility Considerations

Customizing the thickness of text decorations can also improve accessibility. Thicker underlines can make links and important text more visible to users with visual impairments, ensuring that your content is accessible to a wider audience.

Combined Example

<a href="#" class="important-link">Learn more here</a>
<p class="creative-underline">Creative and unique underline</p>
<a href="#" class="accessible-link">Accessible link</a>

.important-link, .creative-underline, .accessible-link {
  text-decoration-line: underline;
}

.important-link {
  text-decoration-color: #3498db;
  text-decoration-thickness: 4px;
}

.creative-underline {
  text-decoration-color: #e74c3c;
  text-decoration-thickness: 5px;
}

.accessible-link {
  text-decoration-color: #2ecc71;
  text-decoration-thickness: 3px;
}

Using text-decoration-thickness helps create engaging, visually appealing, and user-friendly web content. It’s flexible and ensures your website stands out with a great user experience.