HTML and CSS Reference
You will find that very few fonts support the complete range of weights; in this case, the browser uses the nearest
weight to the one you specified.
Because both of the Google Web Fonts used for Cool Shoes & Socks are available only in “Normal 400,” much like
how a browser can render an oblique font style using the normal font, a browser can also render bolder and lighter
fonts if an alternative weight of font is not present.
1. In styles.css, add a declaration to the .button rule set to make its text bold:
2. Save styles.css.
The More Information button <a class=”button purchase” href=”#” title=”Purchase
product”> and Sign Up button <input class=”button” id=”submit-newsletter”
type=”submit” value=”Sign Up” /> inherit a default font-weight of normal . By chan-
ging the font-weight to bolder , you tell the browser to make the font of those buttons heavier than
normal . The “Average” font has no weight variants, so the browser takes the normal font and renders it as
bold (or 700).
3. Add a declaration to the label rule set to change the weight of the input labels in the Newsletter box:
4. Save styles.css.
Although this declaration for the label rule set is different from that of the .button rule set, the same effect is
achieved because the “Average” font doesn't have a 900 variant. The browser again takes its own action and renders
the font bold.
Obviously, it's better to be consistent with font-weight . Although the “Average” font doesn't have any styles
other than “Normal 400,” fallback fonts (the ones specified in the font stack) may have, in which case font-
weight: bolder; and font-weight: 900; may be rendered differently. If you like, change the previously
added declarations to font-weight: bold; or font-weight: 700; to keep them consistent.
Initial value: medium | Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 5.5+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
The font-size property controls the layout of the text on a web page. You can change font-size in many
ways, each with advantages and disadvantages. As already established, Cool Shoes & Socks uses the em unit for not
just font sizes but also other properties such as padding and margin .
Let's come back to using the em unit for font-size in a moment, but first see what other methods you can use to
change the font size.
Similar to font-weight , font-size can be changed using a series of keywords: xx-small , x-small ,
small , medium , large , x-large , and xx-large . Likewise, you can use the keywords larger and smal-
ler to increase or decrease the font size relative to an element's inherited font-size .