0 votes
in Coach Views by (16.6k points)

1 Answer

0 votes
by (16.6k points)
he font-weight values, from 100 to 900, reflect typographic practices of designing different-weight typefaces of a font. Very few fonts have all those weights, but the scale has been selected to cover, more or less, the different weights used. The CSS3 Fonts draft describes a correspondence between the numbers and traditional typographic terms such as Thin, Extra Light, etc., but terminology really varies.

In typography, each weight is a separate typeface designed by typographer. This is one reason why most fonts have just two, or maybe just one, weight: it takes time to design a typeface, and time is money. Another reason especially applicable to fonts as used on the web is that display devices have been rather coarse, making fine typography often a rather pointless attempt. In particular, small font heights don’t work well on low-resolution devices.

The CSS specifications define an algorithm for mapping declared font weights to available weights. For example, when only weights 400 and 700 are available (the usual situation), then weights 100, 200, and 300 are mapped to 400.

However, in some cases browsers algorithmically bold glyphs. This is more of a problem than a solution, and due to browser differences, it may cause odd things if you ask for a nonexistent weight. Most browsers seem to use algorithmic bolding if a weight of 600 or more is requested for and the font only has normal (400) typeface. For example, setting font-weight: bold when text is in Arial Unicode MS (which has no bold typeface) creates an artificially bolded version of Arial Unicode MS.

There are additional problems with commonly available fonts. Sometimes you need to use a typeface name as if it were a font name, e.g. font-family: Arial Black instead of the logical setting font-family: Arial; font-weight: 900. Sometimes this does not work, since on some browsers only the logical way works.

As a rule, don’t try to use other weights than normal and bold unless you use downloadable fonts (web fonts) via @font-face, which gives you control over the font weight issue. Most fonts that can be used as downloadable contain just the two basic weights, or just one, but there are interesting free fonts with several weights.

Related questions

0 votes
1 answer 195 views
0 votes
0 answers 174 views
0 votes
1 answer 1.0k views
0 votes
1 answer 250 views
0 votes
1 answer 464 views
0 votes
1 answer 210 views
asked Jul 3, 2019 in Coach Views by Anil Singh (16.6k points)
0 votes
1 answer 494 views
0 votes
0 answers 140 views
0 votes
0 answers 148 views
0 votes
1 answer 497 views
0 votes
1 answer 2.5k views

613 questions

493 answers


2.0k users

Welcome to BPM Tips Q&A, Community wiki/forum where you can ask questions and receive answers from other IBM BPM experts and members of the community. Users with 2000 points will automatically be promoted to expert level.
Created by Dosvak LLC
Our Youtube Channel