I used to be doing my Creation of UI Parts, and I stumbled upon the from-font worth for the text-decoration-thickness CSS property. I used to be inquisitive about it, so I did some research and I believe what I discovered (and discovered) is each fascinating and price 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 popular thickness, use that worth. If the font file doesn’t embody 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 how that works, so I made a couple of 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 beneath, over, and strikethrough traces for the default font household.
I didn’t discover something significantly fascinating right here, besides that some combos don’t work very properly for strikethrough textual content (in case you ask me). For instance, utilizing a wavy ornament with strikethrough isn’t readable, however that may 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 traces.
The traces work with paragraphs or smaller textual content, however the skinny strikethrough line doesn’t work very properly with massive textual content because the strikethrough line is tough to detect.
I additionally discovered that you simply can’t 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 appropriate, 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 a 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 value 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 closing demo, I needed to see how the from-font worth works with totally different font households. It doesn’t impression 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 carefully. 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 take into account when designing and defining fonts.
Browser help
You possibly can most actually use the text-decoration-thickness property in the present day since most fashionable browsers help this property.
So, must you 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 properly. Perhaps the from-font worth must be outlined in percentages or another relative unit in order that it adjustments with the font measurement. Perhaps font designers really feel that it shouldn’t work that method. Both method, 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 web site for the hyperlink underlines within the articles, and I believe it really works nice. The road is refined, nevertheless it nonetheless communicates the interplay.
I look ahead to seeing extra choices for the text-decoration-thickness sooner or later.
The CSS from-font Worth Defined in 4 Demos initially revealed on CSS-Tips. It is best to get the e-newsletter and develop into a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!