- Understanding Typography on the Web
- Setting the Font
- Setting the Font Size
- Making Text Italic
- Setting Bold, Bolder, Boldest
- Creating Small Caps
- Setting Multiple Font Values
This chapter is from the book
This chapter is from the book
This chapter is from the book
Setting Bold, Bolder, Boldest
In straight HTML, text is either bold or not. CSS provides several more options that allow you to set different levels of boldness for text. Many fonts have various weights associated with them; these weights have the effect of making the text look more or less bold. CSS can take advantage of this feature ( Figure 3.9 ).
)
Figure 3.9 The difference between normal and bold text is evident here.
In this example (Code 3.4 and Figure 3.10 ), I've created a class called bolder to make text bolder than the surrounding text.
Example 3.4. The bolder class is used to make boldface text. Italics within a paragraph have been set to non-bold.
<html>
<head>
<style type="text/css"><!--
body {
font-size: 24px;
font-family: 'times new roman',
times, serif;
}
.bolder {
font-weight: bolder;
}
p i {
font-weight: normal;
}
--></style>
</head>
<body>
<b>More from <i>Alice in Wonderland</i></b>
<p><span class="bolder">'I wish I hadn't
cried so much!'...</span></p>
<p><span class="bolder">Just then she heard
<i>something</i> splashing about in the
pool a little way off...</span></p>
<p><span class="bolder">'Would it be of any
use, now,' thought Alice...</span></p>
<p><span class="bolder">'Perhaps it doesn't
understand English,' thought Alice...
</span></p>
<p><span class="bolder">'Not like
cats!'...</span></p>
</body>
</html>
)
Figure 3.10 All the text has been set to bold except italicized words, which are a normal weight.
To define bold text in a CSS rule:
- font-weight: Type the property name font-weight, followed by a colon (:).
-
bolder;
Type the value for the font-weight property, using one of these options (Table 3.7):
Table 3.7. font-weight Values
Value
Compatibility
normal
IE4, N4, S1, O3.5, CSS1
bold
IE3, N4, S1, O3.5, CSS1
lighter
IE3, N6, S1, O3.5, CSS1
bolder
IE3, N6, S1, O3.5, CSS1
100-900 [*]
IE4, N4, S1, O3.5, CSS1
- bold, which sets the font to boldface
- bolder or lighter, which sets the font's weight to be bolder or lighter relative to its parent element's weight
- A value from 100 to 900, in increments of 100, which increases the weight, based on alternative versions of the font that are available
- normal, which overrides other weight specifications