{"id":351017,"date":"2021-09-07T07:41:57","date_gmt":"2021-09-07T14:41:57","guid":{"rendered":"https:\/\/css-tricks.com\/?p=351017"},"modified":"2021-09-07T08:09:34","modified_gmt":"2021-09-07T15:09:34","slug":"firefoxs-bolder-default-is-a-problem-for-variable-fonts","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/firefoxs-bolder-default-is-a-problem-for-variable-fonts\/","title":{"rendered":"Firefox\u2019s `bolder` Default is a Problem for Variable Fonts"},"content":{"rendered":"\n

Variable fonts make it easy to create a large set of font styles<\/a> from a single font file. Unfortunately, the default rendering of the <b><\/code> and <strong><\/code> elements in browsers today is not very compatible with the wide range of font-weight<\/code> values enabled by variable fonts.<\/p>\n\n\n\n\n\n\n\n

\nhttps:\/\/twitter.com\/zachleat\/status\/1374443096281280517\n<\/div><\/figure>\n\n\n

Browsers disagree on the default font-weight<\/code> of <b><\/code><\/h3>\n\n\n

The purpose of the <b><\/code><\/a> and <strong><\/code><\/a> elements is to draw attention to a specific word or span of text on the page. Browsers make these elements stand out by increasing their font-weight<\/code>. This works well under normal conditions. For example, MDN Web Docs uses <b><\/code> in a few places in the \u201cFound a problem?\u201d card at the bottom of each page.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Things become more complicated when the text on the page has a custom font-weight<\/code>. The default weight of text is 400<\/code>, but the font-weight<\/code> property accepts any number between 1<\/code> and 1000<\/code> (inclusive). Let\u2019s take a look at how Chrome and Firefox render text wrapped in <b><\/code> by default depending on the font-weight<\/code> of the surrounding text.<\/p>\n\n\n\n

\"\"
View on CodePen<\/a><\/figcaption><\/figure>\n\n\n\n

Chrome and Firefox disagree on the default rendering of <b><\/code> elements. Chrome uses a constant font-weight<\/code> of 700<\/code> (Safari behaves the same), while Firefox chooses between three values (400<\/code>, 700<\/code>, and 900<\/code>) depending on the font-weight<\/code> of the surrounding text.<\/p>\n\n\n

Where is this difference coming from?<\/h3>\n\n\n

As you might have guessed, Chrome and Firefox use different font-weight<\/code> values for the <b><\/code> and <strong><\/code> elements in their user agent stylesheets.<\/p>\n\n\n\n

\/* Chrome and Safari\u2019s user agent stylesheet *\/\nstrong, b {\n  font-weight: bold;\n}\n\n\/* Firefox\u2019s user agent stylesheet *\/\nstrong, b {\n  font-weight: bolder;\n}<\/code><\/pre>\n\n\n\n
The bold<\/code> and bolder<\/code> values are specified in the CSS Fonts module<\/a>; bold<\/code> is equivalent to 700<\/code>, while bolder<\/code> is a relative weight<\/a> that is calculated as follows:<\/p>\n\n\n\n
If the outer text has a font-weight<\/code> of\u2026<\/th>the bolder<\/code> keyword computes to\u2026<\/th><\/tr><\/thead>
1<\/code> to 349<\/code><\/td>400<\/code><\/td><\/tr>
350<\/code> to 549<\/code><\/td>700<\/code><\/td><\/tr>
550<\/code> to 899<\/code><\/td>900<\/code><\/td><\/tr>
900<\/code> to 1000<\/code><\/td>No change (same value as outer text)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Chrome and Firefox disagree on the default rendering of <b><\/code>, but which browser follows the standards more closely? The font-weight<\/code> property itself is defined in the CSS Fonts module, but the suggested font-weight<\/code> values for different HTML elements are located in the Rendering section<\/a> of the HTML Standard.<\/p>\n\n\n\n
\/* The HTML Standard suggests the following user agent style *\/\nstrong, b {\n  font-weight: bolder;\n}<\/code><\/pre>\n\n\n\n
The HTML Standard started suggesting bolder<\/code> instead of bold<\/code> all the way back in 2012<\/a>. As of today, only Firefox follows this recommendation. Chrome and Safari have not made the switch to bolder<\/code>. Because of this inconsistency, the popular Normalize base stylesheet has a CSS rule that enforces bolder<\/code> across browsers<\/a>.<\/p>\n\n\n
Which of the two defaults is better?<\/h3>\n\n\n
There are two different defaults in browsers, and Firefox\u2019s default matches the standard. So, should Chrome align with Firefox, or is Chrome\u2019s default the better one? Let\u2019s take another look at the default rendering of the <b><\/code> element.<\/p>\n\n\n\n
\"\"
View on CodePen<\/a><\/figcaption><\/figure>\n\n\n\n
Each of the two defaults has a weak spot: Chrome\u2019s bold<\/code> default breaks down at higher font-weight<\/code> values (around 700<\/code>), while Firefox\u2019s bolder<\/code> default has a problem with lower font-weight<\/code> values (around 300<\/code>).<\/p>\n\n\n\n
In the worst-case scenario for Firefox, text wrapped in <b><\/code> becomes virtually indiscernible. The following screenshot shows text at a font-weight<\/code> of 349<\/code> in Firefox. Can you spot the single word that is wrapped in <b><\/code><\/strong>? Firefox renders this element at a default font-weight<\/code> of 400<\/code>, which is an increase of only 51 points.<\/p>\n\n\n\n
\"Three
(View on CodePen<\/a>)<\/figcaption><\/figure>\n\n\n
The takeaway<\/h3>\n\n\n
If you use thin fonts or variable fonts at font-weight<\/code> values below 350<\/code>, be aware that the <b><\/code> and <strong><\/code> elements may not always be discernible in Firefox by default. In this case, it is probably a good idea to manually define a custom font-weight<\/code> for <b><\/code> and <strong><\/code> instead of relying on the browser\u2019s sub-optimal default, which insufficiently increases the font-weight<\/code> of these elements.<\/p>\n\n\n\n
\/* Defining the regular and bold font-weight at the same time *\/\n\nbody {\n  font-weight: 340;\n}\n\nb,\nstrong {\n  font-weight: 620;\n}<\/code><\/pre>\n\n\n\n
The bolder<\/code> value is outdated<\/a> and doesn\u2019t work well with variable fonts. Ideally, text wrapped in <b><\/code> should be easy to spot regardless<\/em> of the font-weight<\/code> of the surrounding text. Browsers could achieve that by always increasing the font-weight<\/code> by the same or a similar amount.<\/p>\n\n\n\n
On that note, there is a discussion in the CSS Working Group about allowing percentages in font-weight<\/code> in the same manner as in font-size<\/code>. Lea Verou writes<\/a>:<\/p>\n\n\n\n
A far more common use case is when we want a bolder or lighter stroke than the surrounding text, in a way that\u2019s agnostic to the weight of the surrounding text.<\/p><\/blockquote>\n\n\n\n
\/* Increasing font-size by 100% *\/\nh1 {\n  font-size: 200%;\n}\n\n\/* PROPOSAL - Increasing font-weight by 50% *\/\nstrong, b {\n  font-weight: 150%;\n}<\/code><\/pre>\n\n\n\n
Taking variable fonts into account, a value like 150%<\/code> would probably be a better default than the existing bold<\/code>\/bolder<\/code> defaults in browsers today.<\/p>\n","protected":false},"excerpt":{"rendered":"
Variable fonts make it easy to create a large set of font styles from a single font file. Unfortunately, the default rendering of the <b> and <strong> elements in browsers today is not very compatible with the wide range of font-weight values enabled by variable fonts.<\/p>\n","protected":false},"author":245432,"featured_media":351019,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Firefox\u2019s `bolder` Default is a Problem for Variable Fonts","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1471,17634,587,1606,1371],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/default-rendering-b.png?fit=1495%2C950&ssl=1","jetpack-related-posts":[{"id":330342,"url":"https:\/\/css-tricks.com\/using-css-custom-properties-to-adjust-variable-font-weights-in-dark-mode\/","url_meta":{"origin":351017,"position":0},"title":"Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode","date":"December 10, 2020","format":false,"excerpt":"Black isn\u2019t always slimming. When recently testing a dark mode option for one of my sites, I experienced first-hand the issue that Robin Rendle addresses in this article. All of my page text \u2014 headings and body copy \u2014 appeared to bulk up when I switched to dark mode. And\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/dark-mode-font-weight.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265593,"url":"https:\/\/css-tricks.com\/one-file-many-options-using-variable-fonts-web\/","url_meta":{"origin":351017,"position":1},"title":"One File, Many Options: Using Variable Fonts on the Web","date":"January 29, 2018","format":false,"excerpt":"In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it's unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/using-variable-fonts-4.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295752,"url":"https:\/\/css-tricks.com\/variable-fonts-link-dump\/","url_meta":{"origin":351017,"position":2},"title":"Variable Fonts Link Dump!","date":"September 20, 2019","format":false,"excerpt":"There's been a ton of great stuff flying around about variable fonts lately (our tag has loads of stuff as well). I thought I'd round up all the new stuff I hadn't seen before. Google fonts has a beta of hosted variable fonts and the announcement demo is on CodePen.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/variable-font-thumb.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317559,"url":"https:\/\/css-tricks.com\/getting-the-most-out-of-variable-fonts-on-google-fonts\/","url_meta":{"origin":351017,"position":3},"title":"Getting the Most Out of Variable Fonts on Google Fonts","date":"July 30, 2020","format":false,"excerpt":"I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts! Wanna try it out super fast? Here\u2019s the embed code to use the full Recursive variable font family\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/recursive-specimen.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267436,"url":"https:\/\/css-tricks.com\/three-techniques-performant-custom-font-usage\/","url_meta":{"origin":351017,"position":4},"title":"Three Techniques for Performant Custom Font Usage","date":"March 5, 2018","format":false,"excerpt":"There\u2019s a lot of good news in the world of web fonts! The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so. Preload and font-display are landing in Safari and Firefox. Variable fonts are shipping everywhere. Using custom fonts in a performant way\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/system-fonts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266058,"url":"https:\/\/css-tricks.com\/use-variable-fonts-real-world\/","url_meta":{"origin":351017,"position":5},"title":"How to use variable fonts in the real world","date":"January 29, 2018","format":false,"excerpt":"Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that\u2019s the technology that allows us to bundle multiple widths and weights into a single font file). Here\u2019s the really exciting part though: Two months ago browser\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351017"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/245432"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=351017"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351017\/revisions"}],"predecessor-version":[{"id":351024,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351017\/revisions\/351024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/351019"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=351017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=351017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=351017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}