I was doing my Advent of UI Components, and I stumbled upon the
from-font value for the
text-decoration-thickness CSS property. I was curious about it, so I did a little research and I think what I found (and learned) is both interesting and worth sharing.
Here’s how MDN defines the
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
autowas set, with the browser choosing an appropriate thickness.
from-font value is used only if the font file has the definition for the thickness of the line. Otherwise, browsers use the
auto value, which tells the browser to choose the thickness. I wanted to find out how that works, so I made a few demos comparing it to the other values.
In the first demo, I wanted to see how the
auto value for thickness works with under, over, and strikethrough lines for the default font family.
I didn’t find anything particularly interesting here, except that some combinations don’t work very well for strikethrough text (if you ask me). For example, using a wavy decoration with strikethrough isn’t readable, but that might be the desired output in some scenarios, I guess.
In the second demo, I wanted to see how the text works with thin lines.
The lines work with paragraphs or smaller text, but the thin strikethrough line doesn’t work very well with large text as the strikethrough line is hard to detect.
I also learned that you cannot set the line thickness below
1px. In the demo, the line thickness is set to
0px, but the browser renders a
1px line anyway.
text-decoration-thickness: from-font and font-weight
Next, I wanted to see if the
text-decoration-thickness: from-font declaration changes with the font weight. On the left, the value is set to
from-font; on the right, the value is set to
from-font value doesn’t seem to follow changes to the text’s font weight, at least not with when Roboto is the font family. There is no difference between how big or bold the text is set. The line thickness is the same if the value is set to
It is worth noting that Firefox renders the line thickness the same for both values, so my guess is that Firefox actually uses the
from-font value for the
text-decoration-thickness: from-font and
In this final demo, I wanted to see how the
from-font value works with different font families. It doesn’t impact the paragraphs or the smaller font sizes because it renders the smallest value,
1px. The difference is visible for the bigger font sizes, like default
<h1> elements, but only if you look very closely. Also, the strikethrough line is once again too thin on bigger text. This is something that font designers and developers might consider when designing and defining fonts.
You can most certainly use the
text-decoration-thickness property today since most modern browsers support this property.
So, should you use it?
from-font value might seem like a good idea, I don’t think it should be used just yet. There are too many inconsistencies with the default
text-decoration-thickness value across the browsers (which Šime Vidas has covered in great depth), so it is no surprise that the
from-font value is still not working that well. Maybe the
from-font value should be defined in percentages or some other relative unit so that it changes with the font size. Maybe font designers feel that it shouldn’t work that way. Either way, it seems like more discussion is warranted to nail down the property value’s default behavior and how it renders.
I am using the
from-font value on my personal site for the link underlines in the articles, and I think it works great. The line is subtle, but it still communicates the interaction.
I look forward to seeing more options for the
text-decoration-thickness in the future.