Menu
Say I have a web font with different font-weights as different files for each weight. When I change different weight in CSS, I suppose it looks for a respective font file that is associated with that font-weight. All works as intended.
Now, if I have another font, which has no different font-weights in it, then I again set different font-weight in my stylesheet, and see font-weight change in browser.
So, I wonder, how is in charge of calculating how font should look with a missing font-weight? Is it something what browsers try to guess using some algorithms? If so, do I still need other font-weight files? Or, how reliable are these algorithms through different browsers?
245
As mentioned by @BoltClock in a comment, this is described in CSS Fonts Module Level 3 CR, section 3.2 Font weight: the font-weight property and in 5.2 Matching font styles, but it does not define all the details, and browser behavior may vary.
The basic principle is that a typeface with the given font weight is used. For most fonts, only normal (regular, 400) and bold (700) typeface are available, perhaps only normal. In that case, all typefaces smaller than normal as well as 500 are mapped to normal, and 600, 800, and 900 are mapped to bold.
If bold typeface is not available but bolding is requested for (by font-weight set to 600 or larger), the browser may use algorithmic (synthetic) bolding on the normal typeface. In theory, this depends on the font-synthesis property, but it has not been implemented yet, so it depends on the browser.
Test page (assumes the availability of Lucida Sans Unicode, a common font in Windows, with just normal typeface):
<!DOCTYPE html>
<title>Test</title>
<style>
* { font-family: Lucida Sans Unicode }
</style>
<p>Hello world
<p style="font-weight: 600">Hello world
<p style="font-weight: 700">Hello world
<p style="font-weight: 800">Hello world
Firefox and IE show the paragraphs except the first one in synthetic bold (faux bold), whereas Chrome shows only the last two that way, i.e. does not map 600 to bold but to normal.
Generally, synthetic bold is frowned upon by typographers, for good reasons. It may however produce acceptable results for such sans-serif fonts that have little or no variation in stroke width, such as Lucida Sans Unicode or Arial Unicode MS.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
