This chapter is from the book
This chapter is from the book
This chapter is from the book
Font Properties
The relationship of font sizes is key to indicating the hierarchy of the text in your document. This is achieved through an understanding of the various font properties and an understanding of how font properties can be inherited through the hierarchy of your document. Let's take at the font properties now.
Font-Style Property
Example: h2 {font-style:italic}
Other values: normal, oblique
Font style determines whether a font is italicized or not. It's that simple. If you want a piece of text to be italicized, you write this
p {font-style:italic;}
You can also write oblique instead of italic, but generally, the result is the same. The difference between the two is that, supposedly, italic is simply a distortion applied to the regular font to make it lean to the right, whereas an oblique font is actually designed as a font in its own right and therefore, the theory goes, is more pure. These niceties are pretty much lost on the Web, where a font variation such as Helvetica Oblique can't be specified even though if exists as a font on the user's machine,, and oblique doesn't even alter the regular type in older browsers such as Netscape 4.7.
So, there are only two useful settings for the font-style property: italic to make regular text italicized, and normal to make a section within italicized type regular "upright" text. In this example,
p {font-style:italic;}
span{font-style:normal}
<p>This is italicized type with <span>a piece of non-italic text</span> in the middle.</p>
the code produces the result in Figure 3.11 .
)
Figure 3.11 The normal value for the font-style property causes a specified section of type to appear normal within a bit of italicized text.
Font-Weight Property
Example: a {font-weight:bold}
Possible values: 100, 200, and so on to 900, or bold, bolder, lighter, normal
The W3C recommendations for implementing this property simply state that each successive higher value (whether numerical or "weight" values) must produce boldness equal to or heavier than the previous lower value.
bold and bolder give two weights of boldness. lighter allows you to go one step in the other direction if you want a section within bold type to be, well, lighter.
Figure 3.12 shows a little test I ran on some different browsers.
)
Figure 3.12 Here's how different browsers interpret different font-weight settings.
Can you see more than two weights for any given browser among these results? Nor can I. I even tried different fonts, but to no avail. There really are only two results for all the font-weight values—bold or normal. Boldness variations would be a nice way to show a hierarchy in all kinds of data, especially when you could easily generate the different numerical values mathematically from middleware (for example, ASP or PHP) code to automatically highlight results that cross certain thresholds. In the following section, I show you a relatively simple and useful representational method that the browser makers could give us designers. Certainly there's room for improvement here, as the results show.
Font-Variant Property
Example: blockquote {font-variant:small-caps;}
Values: small-caps, normal
This property accepts just one value (besides normal) and that is small-caps. This causes all lowercase letters to be set in small caps, like this
h3 {font-variant:small-caps;}
I often use small-caps with the first-line pseudo-class, which allows you to specify a style for the first line of an element. Typically you would use it on a paragraph (see Chapter 2). Again, use this styling sparingly because text in all uppercase is harder to read because it lacks the visual cues provided by the ascenders and descenders of lowercase type.
The Font Property Shorthand
Example: p {font: bold italic small-caps 12pt verdana, arial, sans-serif;}
<p>Here's a piece of text loaded up with every possible font property.</p>
The code above produces the result in Figure 3.13 .
)
Figure 3.13 It only takes one line of CSS to create this font styling.
The font property is a nifty shortcut that lets you apply all of the font properties in a single declaration; this helps reduce the amount of CSS you have to write to achieve your desired font styling. You have to sequence the values in the correct order, however, so that the browser can interpret them correctly.
Two simple rules apply:
Rule 1: Values for font-size and font-family must always be declared.
Rule 2: The sequence for the values is as follows:
- font-weight, font-style, font-variant, in any order, then
- font-size, then
- font-family