Search code examples
cssfontswebfontsgoogle-webfonts

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


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>

Solution

  • 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. :)