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.
from-font
value
About the Here’s how MDN defines the from-font
value:
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.
So, the 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.
text-decoration-thickness: auto
Demo 1: 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.
text-decoration-thickness: 0px
Demo 2: 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.
![Showing the from-font value on larger text. The text is black and the line through the text is thin and barely noticeable.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/01/Screen-Shot-2022-01-21-at-1.04.31-PM.png?resize=501%2C57&ssl=1)
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
Demo 3: 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 auto.
The 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 from-font
.
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 auto
value.
text-decoration-thickness: from-font
and font-family
Demo 4: 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.
Browser support
You can most certainly use the text-decoration-thickness
property today since most modern browsers support this property.
So, should you use it?
Although the 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.