Variable fonts make it straightforward to create a massive set of font types from a single font file. Sadly, the default rendering of the <b> and <robust> parts in browsers in the present day just isn’t very suitable with the big selection of font-weight values enabled by variable fonts.
Surprising: in Firefox the HTML aspect `b` has a consumer agent fashion of `font-weight: bolder` and Chrome/Safari/Edge all use `font-weight: daring`.
Seen with `<div fashion=”font-weight: 700″><b>` and a variable font that goes to 1000. Firefox <b> was 900, others had been 700 🧐
— Zach Leatherman (@zachleat) March 23, 2021
Browsers disagree on the default font-weight of <b>
The aim of the <b> and <robust> parts is to attract consideration to a particular phrase or span of textual content on the web page. Browsers make these parts stand out by growing their font-weight. This works effectively beneath regular circumstances. For instance, MDN Internet Docs makes use of <b> in a couple of locations within the “Discovered an issue?” card on the backside of every web page.
Issues change into extra difficult when the textual content on the web page has a customized font-weight. The default weight of textual content is 400, however the font-weight property accepts any quantity between 1 and 1000 (inclusive). Let’s check out how Chrome and Firefox render textual content wrapped in <b> by default relying on the font-weight of the encircling textual content.
Chrome and Firefox disagree on the default rendering of <b> parts. Chrome makes use of a relentless font-weight of 700 (Safari behaves the identical), whereas Firefox chooses between three values (400, 700, and 900) relying on the font-weight of the encircling textual content.
The place is that this distinction coming from?
As you may need guessed, Chrome and Firefox use totally different font-weight values for the <b> and <robust> parts of their consumer agent stylesheets.
/* Chrome and Safari’s consumer agent stylesheet */
robust, b {
font-weight: daring;
}
/* Firefox’s consumer agent stylesheet */
robust, b {
font-weight: bolder;
}
The daring and bolder values are specified within the CSS Fonts module; daring is equal to 700, whereas bolder is a relative weight that’s calculated as follows:
If the outer textual content has a font-weight of…the bolder key phrase computes to…1 to 349400350 to 549700550 to 899900900 to 1000No change (similar worth as outer textual content)
Chrome and Firefox disagree on the default rendering of <b>, however which browser follows the requirements extra carefully? The font-weight property itself is outlined within the CSS Fonts module, however the recommended font-weight values for various HTML parts are positioned within the Rendering part of the HTML Customary.
/* The HTML Customary suggests the next consumer agent fashion */
robust, b {
font-weight: bolder;
}
The HTML Customary began suggesting bolder as an alternative of daring all the way in which again in 2012. As of in the present day, solely Firefox follows this advice. Chrome and Safari haven’t made the change to bolder. Due to this inconsistency, the favored Normalize base stylesheet has a CSS rule that enforces bolder throughout browsers.
Which of the 2 defaults is healthier?
There are two totally different defaults in browsers, and Firefox’s default matches the usual. So, ought to Chrome align with Firefox, or is Chrome’s default the higher one? Let’s take one other have a look at the default rendering of the <b> aspect.
Every of the 2 defaults has a weak spot: Chrome’s daring default breaks down at increased font-weight values (round 700), whereas Firefox’s bolder default has an issue with decrease font-weight values (round 300).
Within the worst-case state of affairs for Firefox, textual content wrapped in <b> turns into just about indiscernible. The next screenshot exhibits textual content at a font-weight of 349 in Firefox. Are you able to spot the only phrase that’s wrapped in <b>? Firefox renders this aspect at a default font-weight of 400, which is a rise of solely 51 factors.
The takeaway
For those who use skinny fonts or variable fonts at font-weight values beneath 350, remember that the <b> and <robust> parts could not all the time be discernible in Firefox by default. On this case, it’s most likely a good suggestion to manually outline a customized font-weight for <b> and <robust> as an alternative of counting on the browser’s sub-optimal default, which insufficiently will increase the font-weight of those parts.
/* Defining the common and daring font-weight on the similar time */
physique {
font-weight: 340;
}
b,
robust {
font-weight: 620;
}
The bolder worth is outdated and doesn’t work effectively with variable fonts. Ideally, textual content wrapped in <b> must be straightforward to identify regardless of the font-weight of the encircling textual content. Browsers may obtain that by all the time growing the font-weight by the identical or the same quantity.
On that notice, there’s a dialogue within the CSS Working Group about permitting percentages in font-weight in the identical method as in font-size. Lea Verou writes:
A much more widespread use case is once we desire a bolder or lighter stroke than the encircling textual content, in a manner that’s agnostic to the load of the encircling textual content.
/* Rising font-size by 100% */
h1 {
font-size: 200%;
}
/* PROPOSAL – Rising font-weight by 50% */
robust, b {
font-weight: 150%;
}
Taking variable fonts under consideration, a worth like 150% would most likely be a greater default than the present daring/bolder defaults in browsers in the present day.
The put up Firefox’s `bolder` Default is a Downside for Variable Fonts appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!