CSS Font-Weight Options

CSS font-weight options

As Rich said, depends on the font, but it's a really good question because it does impact how the font renders, especially @font-face fonts. If you get the number wrong, or just use 'bold' instead of the correct number, it can render the font as jaggy.

This is a good article on that: http://css-tricks.com/watch-your-font-weight/

Sorry not to be able to answer your question - I did search and can't find any sites listing available font-weights per font. Would be a handy resource! For now you could just try the various font selling sites like Fontspring, Google Web Fonts etc, or search for the font you're using and go to one of the sites where it's sold; hopefully that site will give its available font-weight sizes.

Why is the default font weight 400?

Not "400 what", just 400. As per the CSS specification, first formalized in https://www.w3.org/TR/CSS1/#font-weight. there are nine levels of font weight, represented as unitless numbers, starting at 100 and ending at 900, in 100 increments.

In addition to this, the spec defines two mappings between numerical value and string value:

• the numerical value 400 and the string value normal are the same thing, and
• the numerical value 700 and string value bold are the same thing

(Note that while CSS4 will change this to allow for the numbers 1-1000 in increments of 1, it will still only officially recognise the string values normal and bold, still mapping to 400 and 700 respectively. See https://drafts.csswg.org/css-fonts-4/#font-weight-prop for more information)

The only formal rules around these weights is that if you're using a font family in CSS context, a font weight of 400/normal should get you whatever is that font family's Regular typeface, and a font weight of 700/bold should get you whatever is the font family's Bold typeface. Anything else is left entirely undefined, and all you know is that 100, 200, and 300 are probably lighter than 400, 500 and 600 are probably in between regular and bold, and 800 and 900 are probably heavier than 700.

All of those are qualified as "probably" because @font-face gets to completely invalidate everything about this. If you use @font-face, you overrule CSS's rules for what those numerical values mean entirely. For example: this rule will effect an ultra-thin font when you set font-weight to 900, because that's what we're telling the browser it must do:

@font-face {
  font-family: MyFont;
  font-weight: 900;
  src: url("./fonts/ultra-thin.woff2") format("WOFF2");
}

Also important to know is that these are the only two official number/string mappings. Officially there are no other mappings, and the table of numerical values in https://drafts.csswg.org/css-fonts-3/#font-weight-prop is there purely to illustrate which real CSS values map to which rough names people tend to use for them.

The most important part is that this only applies to CSS. It has nothing to do with actual font-stored values, or things you see in word processing software, etc.

CSS font-weight numbers: how do they work?

The details of how numeric values are mapped to font weights are covered in the spec which states:

The values '100' to '900' form an ordered sequence, where each number
indicates a weight that is at least as dark as its predecessor. The
keyword 'normal' is synonymous with '400', and 'bold' is synonymous
with '700'. Keywords other than 'normal' and 'bold' have been shown to
be often confused with font names and a numerical scale was therefore
chosen for the 9-value list.

'599' is not a valid value for the font-weight property

How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file

The practical way is setting font-family to a value that is the specific name of the semibold version, such as

font-family: "Myriad pro Semibold"

if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)

In this approach, font-weight is not needed (and probably better not set).

Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.

Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.

Is there a difference between font-weight bold and 700 when using webfonts?

There's no difference between them. Maybe using it like font-weight:bold makes your code more readable than using font-weight:700.

You can also use another values about font-weight.

1. 100 - Thin
2. 200 - Extra Light (Ultra Light)
3. 300 - Light
4. 400 - Normal
5. 500 - Medium
6. 600 - Semi Bold
7. 700 - Bold
8. 800 - Extra Bold (Ultra Bold)
9. 900 - Black (Heavy)

'font-weight:normal' is synonymous with 'font-weight:400', and 'font-weight:bold' is synonymous with 'font-weight:700'.

Font-weight values not working

If you want to use a different type of font weight, it is important that your font supports this weight type.

If the font doesn't have a 500 or 600 type, it is not possible to use this font weight. The browser will automatically pick the closest value to the font that is available. In this case 600 will change in the 700 which is supported

What's the meaning of the font-weight integer values in CSS?

Regarding the question in the title: The integer values of font-weight denote different possible font weights of typefaces, and they may need to be re-interpreted if the font format does not have a scale of 9 font weights. For the TrueType format, the value is the one assigned to the typeface in the OS/2 table, item usWeightClass.

Typefaces typically have names with attributes like “regular”, “light”, “heavy”, “bold”, etc. The use of such words varies, though CSS3 Fonts describes a “rough correspondence” between numbers and names.

The numbers constitute an ordinal scale only; e.g., the only thing we can say about typefaces with weights 100 and 200 is that the latter is not lighter tan the former. The correspondence between a number and the “blackness” or stroke width of characters is font-dependent.

The value normal equals 400 by definition, and the value bold equals 700 by definition. These are just keywords available in CSS as alternatives to the two numbers.

The values bolder and lighter are relative to the font weight of the parent; they map numeric values to larger or smaller values, respectively. So they do not constitute new weights.

The value inherit means that the value of a property is to be set equal to the value of the property of the parent element.

So the only real weights are the nine values from 100 to 900. For most fonts commonly used on web pages, only a few of these weights are available (most often just 400 and 700, or maybe just 400).

Regarding “Why are there such possible integer values?”, a scale of 9 weights was considered sufficient – fonts just don’t have more weights than that.

Regarding “Why don't we have the listed property string values”, the numbers are neutral and can be used independently of the naming scheme used for a font.

Regarding “why exactly these and not from 1-9”, the scale 100, 200,... allows the introduction of intermediary weights – just in case some font designer some day wants to spend time in designing more than nine typefaces. The somewhat strange numbering scheme would allow the introduction of a more fine-grained scale later.

---

Related Topics