Properly define styles (font-style/font-weight) for webfonts

Question

I'm using Google Web Fonts and I'm not entirely sure how to correctly define font-style/font-weight.

What is the difference in defining normal or 400 as the desired font-weight for regular body copy?

Do I just define font-style: italic; or reference an italic font-face?

Code:

<link href="http://fonts.googleapis.com/css?family=Gudea:400,700,400italic">
<style>
body {
    font: 1.25em/1.5 Gudea, Helvetica, Arial, sans-serif;
}
em {
    font-style: italic;

    /* or:
    font-style: normal;
    font-family: "Gudea Italic";
    */
}
strong {
    font-weight: bold;

    /* or:
    font-weight: 700;
    */
}
</style>

score 1 · Accepted Answer · answered Feb 04 '13 at 12:06

It really depends on which typeface you are using. In Helvetica, for example, 100 will be light, as Mr.Alien said. But most of the fonts don't have light, so 100 will be regular. I really think that, in the end, it doesn't matter what naming you use, because "bold", "regular" or "light" are just mnemonic tags.

In Google WebFonts, weights are measured numerically, take a look at the CSS link you've made: family=Gudea:400,700,400italic. In this case, it is clear that you have two versions of the type: 400 (regular) and 400 italic, and 700 (bold). Every number inferior to 400 will be regular, and every number superior to 700 will be bold. The numbers in-between... you'll have to try them. :)

100-500 equal to regular and 600-700 equal to bold. I've tried it. In my case it doesn't matter if I declare `font-weight: bold:` or `font-weight: 700;`. Can you also say if using `font-style: italic` will result in using the correct cursive font or just a diagonal version of the regular font? — kleinfreund, Feb 04 '13 at 12:21

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Where you can find more about the topic : w3c font-boldness

What it says :

The 'font-weight' property selects the weight of the font. 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.

p { font-weight: normal } /* 400 */

h1 { font-weight: 700 } /* bold */

Properly define styles (font-style/font-weight) for webfonts

2 Answers2