The from-font Value for text-decoration-thickness

The from-font value for the CSS text-decoration-thickness property is not new, but its behavior is often misunderstood. Past experiments with this value reveal some subtle inconsistencies that are worth knowing before you adopt it.

What the Spec Says

According to MDN, from-font works like this:

If the font file includes information about a preferred thickness, use that value. If the font file doesn’t include this information, behave as if auto was set, with the browser choosing an appropriate thickness.

In other words, the value only kicks in when the font itself declares a preferred underline thickness. Otherwise, the browser falls back to its own auto behavior.

How auto Behaves

Testing auto across under, over, and strikethrough decorations with the default font shows acceptable rendering for most combinations. One caveat: applying a wavy decoration to strikethrough text produces a result that is difficult to read, though that may be intentional in certain designs.

Limits of Thin Lines

Setting text-decoration-thickness to 0px does not produce an invisible line. Browsers enforce a minimum of 1px, so the decoration still renders.

Showing the from-font value on larger text. The text is black and the line through the text is thin and barely noticeable.

For paragraph-sized text, a 1px line is fine. But on large headings, a strikethrough at that thickness is hard to see, which raises accessibility concerns for emphasis through decoration.

from-font vs. font-weight

When comparing from-font against auto across different font weights, the from-font value appears static. With Roboto, the line thickness does not change as the text gets bolder, while auto can adjust. Interestingly, Firefox renders both values identically, which suggests the browser may be treating auto as from-font internally.

from-font Across Font Families

With different font families, from-font shows little variation for body text, since most fonts end up with a 1px line. The difference only becomes noticeable at larger sizes, such as default <h1> elements, and even then, it is subtle. Once again, the strikethrough line on bigger text is rendered too thin—something font designers may want to consider when defining decoration metrics in their fonts.

Is It Ready for Production?

Browser support for text-decoration-thickness itself is solid across modern browsers. However, from-font is a different story. Given that even the default auto value renders inconsistently across browsers, it is hardly surprising that from-font inherits some of that unpredictability.

One possible improvement would be defining from-font in relative units like percentages so it scales with font size, although font designers may argue the current behavior is intentional. Until the default behavior settles, treat from-font as a progressive enhancement rather than a core styling tool. It works well for subtle link underlines, but for critical visual hierarchy, explicit thickness values remain the safer choice.