Beyond Bold: A Deep Dive into the CSS text-emphasis Property

Unlock sophisticated typographic control with the CSS text-emphasis property. This guide explores how to add traditional East Asian emphasis marks and create unique stylistic effects for a more global and creative web.

Beyond Bold: A Deep Dive into the CSS text-emphasis Property

As web developers and designers, we have a trusty toolkit for adding emphasis to text. We reach for font-weight: bold to make text heavier and font-style: italic to give it a slant. These are the workhorses of web typography, universally understood and supported. But what if I told you there's a whole other dimension to text emphasis that most of us are overlooking?

For a huge portion of the world, particularly in East Asia, emphasis isn't about making a character bolder or slanted. It's about adding a small mark, right next to it. This is a fundamental typographic tradition in Chinese, Japanese, and Korean (CJK) writing. For years, replicating this on the web was a clunky, hacky process.

That's where the CSS text-emphasis property comes in. It's a powerful, native CSS solution designed specifically for this purpose, but its capabilities extend far beyond traditional use cases. It allows for a level of stylistic nuance that can elevate any design.

In this comprehensive guide, we'll journey through everything text-emphasis has to offer. We'll cover its syntax, explore its various properties, look at practical and creative use cases, and discuss the crucial aspects of browser support and accessibility.

What Exactly is text-emphasis?

The text-emphasis property is part of the CSS Text Decoration Module Level 3. Its primary function is to apply emphasis marks to text. Unlike font-weight or font-style, which modify the glyphs themselves, text-emphasis adds new marks above, below, or to the side of each character.

Let's visualize the difference. Here's standard emphasis:

• Bold Text (font-weight: bold)
• Italic Text (font-style: italic)

Now, here's text with text-emphasis:

<p style="font-size: 1.5rem; text-emphasis: dot;">Emphasis with dots</p>

See those dots above the letters? That's text-emphasis in action. It's a fundamentally different approach to drawing the user's attention. It's subtle, clean, and rooted in a rich typographic history.

While its origins are in CJK typography, its creative potential is universal. Ready to unlock it? Let's start with the syntax.

The Anatomy of text-emphasis

Like many CSS properties (font, background, border), text-emphasis is a shorthand. It allows you to set two individual properties at once:

1. text-emphasis-style: Defines the shape of the mark (e.g., a dot, a circle, or even a custom character).
2. text-emphasis-color: Defines the color of the mark.

The shorthand syntax looks like this:

.element {
  /* text-emphasis: <style> <color>; */
  text-emphasis: circle red;
}

You can use the longhand properties individually, but the shorthand is often more convenient. We'll break down each longhand property in detail to understand all the available options.

A Deep Dive into text-emphasis-style

This is where the magic happens. The text-emphasis-style property controls the appearance of the emphasis mark itself. It accepts a wide range of predefined keywords and even allows you to specify your own custom character.

The general syntax is:

text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>;

Let's unpack that.

Shape Keywords

CSS provides a set of standard shapes you can use out of the box.

• dot: A small, solid dot. This is a very common style.
• circle: An unfilled circle or ring.
• double-circle: Two concentric unfilled circles.
• triangle: An unfilled, upward-pointing triangle.
• sesame: A vertical oval, resembling a sesame seed. This is common in traditional Japanese text.

Here they are in action:

<p style="text-emphasis-style: dot;">Emphasis with dot.</p>
<p style="text-emphasis-style: circle;">Emphasis with circle.</p>
<p style="text-emphasis-style: double-circle;">Emphasis with double-circle.</p>
<p style="text-emphasis-style: triangle;">Emphasis with triangle.</p>
<p style="text-emphasis-style: sesame;">ごま点で強調 (Emphasis with sesame).</p>

The filled and open Modifiers

You might have noticed that dot is solid while circle is hollow. You can control this behavior with the filled and open keywords. filled is the default for dot and sesame, while open is the default for the others.

You can explicitly combine them to get the style you want.

• filled circle: A solid, filled-in circle.
• open dot: This technically works but often looks identical to open circle in most browser renderings.

Let's see the difference:

.filled-circle-emphasis {
  text-emphasis-style: filled circle;
}

.open-triangle-emphasis {
  /* 'open' is the default for triangle, but we can be explicit */
  text-emphasis-style: open triangle;
}

<p class="filled-circle-emphasis">This text has a filled circle emphasis.</p>
<p class="open-triangle-emphasis">This text has an open triangle emphasis.</p>

The Ultimate Customization: Using a <string>

This is arguably the most powerful feature of text-emphasis-style. If the predefined shapes aren't enough, you can provide your own! You can use any single character as a string value.

This opens up a world of creative possibilities:

.star-emphasis {
  text-emphasis-style: '★';
}

.emoji-emphasis {
  text-emphasis-style: '🔥';
}

.arrow-emphasis {
  text-emphasis-style: '→';
}

.plus-emphasis {
  text-emphasis-style: '+';
}

A few things to keep in mind when using a custom string:

1. Single Character: The spec says it should be a single character. While some browsers might render more, behavior can be unpredictable. Stick to one.
2. Font Support: The rendering of your custom character depends on the user's available fonts. Choose common symbols or emojis for better cross-platform consistency.
3. Readability: A complex emoji can clutter the text and harm readability. Simple, abstract symbols often work best.

Customizing with text-emphasis-color

By default, the emphasis marks inherit the text's color. The text-emphasis-color property gives you direct control to override this.

.custom-color-emphasis {
  /* Shorthand */
  text-emphasis: filled circle deeppink;

  /* Or using the longhand property */
  /* text-emphasis-style: filled circle; */
  /* text-emphasis-color: deeppink; */
}

This is useful for creating a stylistic separation between the text and its emphasis. You can use any valid CSS <color> value, including hex codes, RGB(a), HSL(a), or named colors.

<p style="color: #333; text-emphasis: dot #007bff;">Blue emphasis on dark gray text.</p>

One common pattern is to use the currentColor keyword, which explicitly sets the emphasis color to be the same as the element's color property. This is the default behavior, but being explicit can sometimes improve code clarity.

Controlling Placement with text-emphasis-position

This property is critical for using text-emphasis correctly, especially in different writing modes. It determines where the marks appear relative to the text.

The syntax allows for one or two keywords:

text-emphasis-position: [ over | under ] && [ right | left ];

The behavior of these keywords depends entirely on the writing-mode of the text.

In Horizontal Writing Mode

For standard English and most web text (writing-mode: horizontal-tb), the relevant keywords are over and under.

• over: Places the marks above the text. This is the default.
• under: Places the marks below the text.

.emphasis-over {
  text-emphasis: circle;
  text-emphasis-position: over; /* Default behavior */
}

.emphasis-under {
  text-emphasis: circle;
  text-emphasis-position: under;
}

Placing marks under can sometimes be confused with an underline. Using a distinct text-emphasis-style and color can help differentiate it.

In Vertical Writing Mode

This is where text-emphasis truly shines in its intended role. For vertical text, common in Japanese, Chinese, and Korean (writing-mode: vertical-rl or vertical-lr), the relevant keywords are right and left.

• right: Places the marks to the right of the text. This is the default for vertical modes.
• left: Places the marks to the left of the text.

Let's see a complete example:

.vertical-text-emphasis {
  writing-mode: vertical-rl;
  text-emphasis: sesame;
  /* 'right' is the default here, but we can be explicit */
  text-emphasis-position: right;
  
  /* For demonstration, let's add some styling */
  font-size: 1.5rem;
  line-height: 2.5;
  height: 250px; /* Give it some space */
}

<p class="vertical-text-emphasis">これは縦書きのテキストです。</p>
<!-- Translation: This is vertically written text. -->

This would render the Japanese text vertically, with sesame dots appearing to the right of each character—the correct, traditional way to display emphasis. Achieving this without text-emphasis would require frustratingly complex workarounds.

Practical Use Cases & Creative Ideas

Now that we've covered the mechanics, let's explore where and how you can apply this property.

1. Traditional CJK Emphasis This is the primary use case. If you're working on a site with CJK content, using text-emphasis is the semantically and stylistically correct way to emphasize text.

.jp-proverb {
  font-style: normal; /* Override default italic from <em> */
  text-emphasis: filled sesame #B33A3A;
}

<p>日本のことわざに「<em class="jp-proverb">七転び八起き</em>」というのがあります。</p>
<!-- Translation: There's a Japanese proverb, "Fall down seven times, get up eight." -->

2. Subtle Interactive Feedback Instead of a standard underline or color change, use text-emphasis to provide feedback on hover.

.interactive-link {
  text-decoration: none;
  color: #007bff;
  transition: color 0.2s ease-in-out;
}

.interactive-link:hover {
  color: #0056b3;
  text-emphasis: filled circle #0056b3;
  text-emphasis-position: under;
}

This creates a unique and elegant effect that feels more integrated than a simple underline.

3. Creative Headings and Pull-Quotes Use custom string emphasis to add a unique design flair to your typography, even in English.

.stylish-heading {
  text-emphasis: '+' #ff4500;
  text-emphasis-position: under;
}

<h2 class="stylish-heading">Our Core Principles</h2>

This can create a distinctive brand look without resorting to images for text.

4. Educational Content When teaching languages, text-emphasis can be used to mark specific characters, tones, or readings without cluttering the text with parentheses or extra markup.

<p>In Mandarin, the character <span style="text-emphasis: 'ˇ'; text-emphasis-position: over;">好</span> (hǎo) has a falling-rising tone.</p>

Browser Support and Fallbacks

No guide is complete without talking about browser support. The good news is that support for text-emphasis is quite strong across modern browsers.

According to Can I use..., it's supported in:

• Chrome (since version 25)
• Firefox (since version 46)
• Safari (since version 7)
• Edge (since version 79)

The notable exception is Internet Explorer, which has no support.

What happens in an unsupported browser? Nothing. The text-emphasis property is simply ignored, and the text renders normally. This is a perfect example of progressive enhancement. Users with modern browsers get the enhanced visual style, while users on older browsers still get the core content without any layout breakage.

If the emphasis is absolutely critical to understanding the content, you can provide a fallback using the @supports feature query:

.critical-emphasis {
  /* Start with a fallback for older browsers */
  font-weight: bold;
  color: red;
}

@supports (text-emphasis-style: '•') {
  /* If text-emphasis is supported, use the better version */
  .critical-emphasis {
    font-weight: normal; /* Reset the bold */
    color: inherit; /* Reset the color */
    text-emphasis: filled dot red;
  }
}

This ensures that all users get some form of emphasis, while those with capable browsers get the intended, more sophisticated styling.

The Crucial Role of Accessibility

With great power comes great responsibility. While text-emphasis is a fantastic styling tool, it's crucial to understand its accessibility implications.

text-emphasis is purely presentational.

Screen readers and other assistive technologies do not announce text-emphasis. It provides no semantic meaning, unlike the <strong> and <em> HTML tags. <strong> indicates strong importance, while <em> indicates stress emphasis. A screen reader will change its intonation for these tags.

Best Practice: Pair Presentation with Semantics

If the emphasis you're adding is meaningful, you must wrap the text in a semantic HTML tag. Then, apply your text-emphasis styling to that tag.

/* GOOD: Semantic and accessible */
em.custom-emphasis {
  /* Reset the browser's default italic style for <em> */
  font-style: normal;
  
  /* Apply our desired presentational emphasis */
  text-emphasis: filled circle;
  text-emphasis-color: rebeccapurple;
}

<!-- Screen readers will announce this as emphasized text -->
<p>This is <em class="custom-emphasis">extremely important</em>.</p>

In this example, a screen reader user understands the importance of the text from the <em> tag, and a visual user sees the custom circle emphasis.

Color Contrast

When using text-emphasis-color, the contrast between the emphasis marks and the background is just as important as the text contrast. Because the marks are small, they can be even harder to see. Always use a color contrast checker to ensure your marks are legible for users with low vision.

Don't Overdo It

Like bold or italic text, too much text-emphasis can make a page noisy and difficult to read. Use it sparingly and purposefully to draw attention to the most important elements.

Final Thoughts: A New Tool in Your Typographic Arsenal

The text-emphasis property is a testament to the web's evolution as a truly global platform. It bridges a long-standing gap in digital typography, providing a first-class way to honor East Asian typographic traditions.

But its utility doesn't stop there. By embracing its creative potential with custom strings and interactive states, we can craft more unique, expressive, and nuanced user interfaces. It encourages us to think beyond the binary of bold and italic and to consider emphasis as a subtle, deliberate design choice.

So next time you're working on a project, take a moment to consider if text-emphasis could be the perfect tool for the job. Whether for its intended cultural purpose or for a spark of creative flair, it's a property that every modern front-end developer should know and appreciate. Happy styling!