A faux weight is what you get when your browser tries to synthetically recreate a font weight that a website is using without loading the correct font files. If you’ve been on the web for more than a few days and haven’t noticed this happening, you might want to stop reading here, because this is a pet peeve of mine and I’m about to infect you with it.
The screenshot below shows the lovely Source Serif 4, set in regular, italics, bold, and bolded italics. It’s taken in Safari, with font files properly loaded for all of the font weights.
Nice, isn’t it? Source Serif is a beaut. Pay special attention to how the italic letter shapes aren’t just the roman (normal) letters uniformly slanted to the right, but unique letter shapes drawn specifically for italicized text. It’s basically a completely different typeface. In fact, back in the early days of typography, italic type was a distinct style of type from the roman typefaces, so if you were typesetting a book and wanted to emphasize something, you would find an italic typeface that somewhat resembled the roman typeface you were using for the running text. I could go on, but I won’t.
Next, let’s take a look at at the same HTML again, but this time, with only the regular (400) weight of Source Serif 4 loaded on the page.
Ugh. Nails on chalkboard. Since we haven’t included font files for italics, bold, and bolded italics, Safari is trying to synthesize those weights by fattening up and skewing the regular font weight we’ve actually loaded. These are faux weights. Depending on the typeface, the results might pass as bolded or italicized at a glance, but it’s a lot uglier and less readable than if we use the proper weights. Since it can be easy to miss, you often encounter faux weights on production sites in the wild – even high-profile ones.
Fortunately, CSS Fonts Module Level 4 has introduced a way for us to control the behavior of faux weights and make missing font weights easier to spot. The property in question is called font-synthesis, and with it, we can whitelist specific types of faux weights (“synthetic font faces“, if you prefer), or disable them altogether. I recommend the latter.
Here’s the CSS that will make it happen:
body {
font-synthesis: none;
}If we return to Source Serif 4 again, the image below shows what it looks like without the right font files loaded and with font synthesis disabled. All of a sudden, it’s very obvious that the font files for the bold and italic text are missing, since Safari is just rendering the bold and italic text with the one regular font file we’ve actually included.
Browser support for font-synthesis is pretty good, and ideally, you’d only need to include it before a site is launched in order to ensure that no faux weights sneak past your QA.
At this point, you might object with the following:
Isn’t emphasized text being set in a faux weight better than it having no visual difference in weight at all?
To which I’d say: Maybe, but those are not our only options. Given the number of fully-featured and high quality open source fonts available today, there’s rarely a reason to use one that doesn’t support at least italics, bold, and bolded italics, unless you know with absolute certainty that you won’t need them. That’s never the case if you’re building a site for someone else.
So choose your fonts with care, double-check weights with font-synthesis, and let us make common cause of banishing faux weights from the web.