Test page for text-decoration line thickness and positioning on the web

Typeface designers can specify ideal values in their font files for the thickness and positioning of underlines and strike-through lines to match the relative weight and proportions of each typeface. In CSS there are various properties for setting the thickness and position of these text-decoration lines, including options that explicitly tell the browser to use the values set in the font file.

Unfortunately the support for using these values as defined in the font is extremely inconsistent between web browsers (as well as design apps), and none of the major browsers seem to offer any option that handles the thickness and positioning of both the underline and strike-through line as specified by the typeface designer. As such, many typeface designers don’t bother to set or test these values in their fonts carefully, making browser developers reluctant to spend time to implement proper support. The cycle of indifference seems to perpetuate itself.

To test the support of these settings across different web browsers, the table below shows the result of various CSS values on text-decoration lines using a customized version of the Source Serif typeface to aid in visualization. The sample illustrations are not images, but live HTML text with various CSS settings applied.

Regular
font-weight: 400;

yStrikeoutSize=150
yStrikeoutPosition=500
UnderlineThickness=150
UnderlinePosition=-350

 Black
font-weight: 900;

yStrikeoutSize=250
yStrikeoutPosition=550
UnderlineThickness=250
UnderlinePosition=-300
text-decoration: none;

This shows the customized test fonts without any CSS text-decoration applied. The blocky strokes on the left of each sample are custom-made glyphs built into each font to show what the thickness and position of the underline and strike-through lines *should* be when following the font’s internal data. (The thickness and positions are set to exaggerated / unusual values to help visualize deviations in the following samples.)

 =Rig =Rig
text-decoration-line: underline line-through;
text-decoration-color: red;
text-decoration-skip-ink: none;
(default/auto thickness and position)

These CSS settings – also used on all the remaining samples below – simply make the text-decoration lines visible and easy to distinguish from the underlying font’s glyphs. The red lines show your browser’s logic for thickness and position. In this case, because the thickness and position of lines is not explicitly set, the browser’s default / auto values are used.

The most obvious place to start with auto values is the data defined in the font by the typeface designer. Indeed, the W3C says web browsers “should use such font-based information when choosing auto line thicknesses wherever appropriate”, and “should use such font-based information in its choice of auto [underline] offset wherever appropriate”.

However, while some browsers use *some* of that data, no browsers rely on it entirely, and others disregard it altogether in favor of their own auto logic.

 =Rig =Rig
text-decoration-thickness: from-font;
text-underline-position: from-font;

These settings explicitly tell the browser to use the values defined in the font data. Unfortunately there are currently no browsers that use all values for the thickness and positioning of both underlines and strike-through lines.😞

There also isn’t a CSS property to set the position of the strike-through line (yet), so you are stuck with using hacks or relying on inconsistent logic between different web browsers to position the line (which may or may not match the values defined in the font by the typeface designer).

 =Rig =Rig
text-decoration-thickness: from-font;
text-underline-position: from-font;
… but with a variable font

The values of underlines and strike-through lines can change with the rest of a typeface in a variable font. How apps and browsers support it is another story. Try it with the slider:

 =Rig
text-decoration-thickness: 2px;
(default/auto position)

When setting your own custom thickness for text-decoration lines in CSS, different browsers may or may not position them using data in the font by default.

 =Rig =Rig
text-decoration-thickness: 2px;
text-underline-position: from-font;

If following the OpenType specification’s logic for underline values, CSS underlines with custom thickness paired with from-font values for positioning *should* align with the top edge of the font’s built-in line values, and this is indeed the current behavior in some browsers. The W3C spec isn’t totally clear about how custom thickness should combine with from-font positioning though, so one alternate options would be to calculate the middle of a font’s native line position and center the custom line thickness there. Unfortunately, some browsers seem to ignore the from-font values altogether in favor of their own positioning logic.

 =Rig =Rig