I'm always looking to shave bites. Instead of saying normal I'm going to say 100 from now on. Extremely small detail. But a detail that has eluded me for 10 years.

Stevie_D
—
2013-03-08T13:11:21Z —
#2

EricWatson said:

I'm always looking to shave bites. Instead of saying normal I'm going to say 100 from now on. Extremely small detail. But a detail that has eluded me for 10 years.

Except that, technically speaking, font-weight:100; is not the same as font-weight:normal;. (Although in practical terms, it might as well be!)

Font-weight has a scale from 100 to 900 (no idea why they didn't just use 1 to 9, as it only allows multiples of 100). A weight of 400 corresponds to 'normal' and a weight of 700 corresponds to 'bold'. Other numbers on the scale can be for varying degrees of light, book, semibold, extrabold etc.

Where a font doesn't have those extra weights built in then browsers should use the nearest matching weight. I do have a handful of fonts that come in a variety of weights, but the computer doesn't recognise them as being variants of the same font, but different fonts, so the browser doesn't know that 'Gotham Book / 100' is actually 'Gotham Light', for example. I haven't yet seen an example of this working properly in practice, to give anything other than 'regular' and 'bold', except that some browsers will try to fake a semibold for weight:500, but just like when the OS tries to fake an italic or bold face for a font that doesn't have one, these look awful.

So yes, by all means use font-weight:100;, but there is a one-in-a-billion chance that someone, somewhere, might see it in the wrong variant of the font. If you're worried about that one-in-a-billion chance, using font-weight:400; won't cost you an extra bytes.

PicnicTutorials
—
2013-03-08T13:19:46Z —
#3

Stevie_D said:

Except that, technically speaking, font-weight:100; is not the same as font-weight:normal;. (Although in practical terms, it might as well be!)

Font-weight has a scale from 100 to 900 (no idea why they didn't just use 1 to 9, as it only allows multiples of 100). A weight of 400 corresponds to 'normal' and a weight of 700 corresponds to 'bold'. Other numbers on the scale can be for varying degrees of light, book, semibold, extrabold etc.

Where a font doesn't have those extra weights built in then browsers should use the nearest matching weight. I do have a handful of fonts that come in a variety of weights, but the computer doesn't recognise them as being variants of the same font, but different fonts, so the browser doesn't know that 'Gotham Book / 100' is actually 'Gotham Light', for example. I haven't yet seen an example of this working properly in practice, to give anything other than 'regular' and 'bold', except that some browsers will try to fake a semibold for weight:500, but just like when the OS tries to fake an italic or bold face for a font that doesn't have one, these look awful.

So yes, by all means use font-weight:100;, but there is a one-in-a-billion chance that someone, somewhere, might see it in the wrong variant of the font. If you're worried about that one-in-a-billion chance, using font-weight:400; won't cost you an extra bytes.

True -true. I tested it. In FX at least the only size difference point is at 700 it goes to bold. So most likely in all browsers you could give a range from 100 - 600 for normal. But yes to be extra safe 400 is the most technically correct. Of course I could see some browser getting that wrong to in some inherited mess. They can't make it lighter than 400. So 100 could actually be the safest in a billion chance that one got it wrong. My backwards thinking maybe.

dresden_phoenix
—
2013-03-08T22:35:38Z —
#4

Actually Eric,

The problem is you will be doing something that is technically wrong for the sake of shaving off a few characters from your code. the numbers in font-weight property actually refer to specific font weights of a font family, an attribute in a FONT FILE, so you are betting the accuracy of your design on an error of omission. Not only is this wrong in principle , but it could lead to headaches in future updates. If you ever decide to take full advantage of web fonts, you will have to back an fix all instances of the "shortcut" code. The other problem is that some users MAY have that font family installed ... however rare the case.. and these users will see some ultra light version of the font ( the one equivalent with the number used) and not erroneously, but because it what you code actually specified.

PicnicTutorials
—
2013-03-08T23:44:10Z —
#5

400 it is then. Problem solved

ralphm
—
2013-03-09T02:32:38Z —
#6

If you want to save on bytes, just use the font: shorthand. No need to specify font weight at all.

PicnicTutorials
—
2013-03-09T04:38:19Z —
#7

ralph_m said:

If you want to save on bytes, just use the font: shorthand. No need to specify font weight at all.

Well the only time you have to say font weight normal is when your overwriting bold. So font shorthand would really not apply here.