I used to be doing my Introduction of UI Parts, and I stumbled upon the from-font worth for the text-decoration-thickness CSS property. I used to be interested by it, so I did some research and I believe what I discovered (and discovered) is each attention-grabbing and value sharing.

In regards to the from-font worth

Right here’s how MDN defines the from-font worth:

If the font file consists of details about a most well-liked thickness, use that worth. If the font file doesn’t embrace this data, behave as if auto was set, with the browser selecting an applicable thickness.

So, the from-font worth is used provided that the font file has the definition for the thickness of the road. In any other case, browsers use the auto worth, which tells the browser to decide on the thickness. I needed to learn the way that works, so I made just a few demos evaluating it to the opposite values.

Demo 1: text-decoration-thickness: auto

Within the first demo, I needed to see how the auto worth for thickness works with below, over, and strikethrough strains for the default font household.

I didn’t discover something notably attention-grabbing right here, besides that some combos don’t work very nicely for strikethrough textual content (in case you ask me). For instance, utilizing a wavy ornament with strikethrough isn’t readable, however that could be the specified output in some situations, I assume.

Demo 2: text-decoration-thickness: 0px

Within the second demo, I needed to see how the textual content works with skinny strains.

The strains work with paragraphs or smaller textual content, however the skinny strikethrough line doesn’t work very nicely with giant textual content because the strikethrough line is tough to detect.

I additionally discovered that you simply can not set the road thickness beneath 1px. Within the demo, the road thickness is ready to 0px, however the browser renders a 1px line anyway.

Demo 3: text-decoration-thickness: from-font and font-weight

Subsequent, I needed to see if the text-decoration-thickness: from-font declaration adjustments with the font weight. On the left, the worth is ready to from-font; on the precise, the worth is ready to auto.

The from-font worth doesn’t appear to comply with adjustments to the textual content’s font weight, at the least not with when Roboto is the font household. There isn’t any distinction between how large or daring the textual content is ready. The road thickness is identical if the worth is ready to from-font.

It’s price noting that Firefox renders the road thickness the identical for each values, so my guess is that Firefox truly makes use of the from-font worth for the auto worth.

Demo 4: text-decoration-thickness: from-font and font-family

On this remaining demo, I needed to see how the from-font worth works with totally different font households. It doesn’t influence the paragraphs or the smaller font sizes as a result of it renders the smallest worth, 1px. The distinction is seen for the larger font sizes, like default <h1> parts, however provided that you look very intently. Additionally, the strikethrough line is as soon as once more too skinny on larger textual content. That is one thing that font designers and builders would possibly contemplate when designing and defining fonts.

Browser assist

You’ll be able to most actually use the text-decoration-thickness property at this time since most fashionable browsers assist this property.

So, do you have to use it?

Though the from-font worth would possibly appear like a good suggestion, I don’t assume it must be used simply but. There are too many inconsistencies with the default text-decoration-thickness worth throughout the browsers (which [Šime Vidas has] coated](https://css-tricks.com/css-underlines-are-too-thin-and-too-low-in-chrome) in nice depth), so it’s no shock that the from-font worth remains to be not working that nicely. Perhaps the from-font worth must be outlined in percentages or another relative unit in order that it adjustments with the font dimension. Perhaps font designers really feel that it shouldn’t work that means. Both means, it looks as if extra dialogue is warranted to nail down the property worth’s default conduct and the way it renders.

I’m utilizing the from-font worth on my private website for the hyperlink underlines within the articles, and I believe it really works nice. The road is delicate, nevertheless it nonetheless communicates the interplay.

I look ahead to seeing extra choices for the text-decoration-thickness sooner or later.