Other Key Font Properties

The following properties are often used for tighter control. Most are self-explanatory, so let’s breeze through them, we will combine them all in a sample template at the end of the tutorial.

font-weight

The font-weight property sets how thick or thin characters in text should be displayed. Typically, the declaration will either be normal or bold, although some browsers support numeric values in increments of 100. These are 100 (lightest), 200, 300, 400 (same as normal), 700 (same as bold), 800, and 900 (even bolder!).

font-style

Again, this property is pretty obvious. The default is normal, but typically you would use this property to declare any text that needs to be rendered in italics. Values are normal, italic, and oblique. When you specify an oblique font style, the browser looks for any available font with "oblique" in its name or, failing that, one with "italic" in its name.

font-variant

The font-variant property is used to display text in a small-caps font, which means that all the lowercase letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font size compared to the rest of the text. This is useful for secondary, less important info such as stats, figures, or footer information. Possible values are simply normal or small-caps.

Note that the browser will use a proper small-caps font if one is available; otherwise the effect is done computationally. You can see an example of small caps a little later in Figure below.

text-transform

Not strictly a font property, but it controls the font, so it is included here. This property is a natural antidote to font-variant, where all characters can be rendered uppercase without reducing font size. The text-transform:uppercase declaration is especially useful for headings, where it is semantically incorrect to type using uppercase characters in the markup.

The other key text-transform value is capitalize, which ensures that the first character of any word is rendered as an uppercase character, which again is very useful for headings and lists. Other possible text-transform values are none and lowercase, the latter being very useful if you need to remove all instances of uppercase characters.

Combining Several Font Properties

Applying all the preceding methods to the template will be interesting, if a little chaotic. Taking the core template, and mixing up the CSS, you will see a myriad of declarations across the selectors. Note that shared heading declarations are grouped, whereas individual ones are defined individually:

/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: normal 12px Verdana, Arial, Sans-serif;
line-height:150%;
}
p {
font-variant:small-caps
}
h1, h2 {
letter-spacing:1px;
}
h1 {
font-family: Georgia, Times, serif;
text-transform:uppercase;
}
h2 {
font-family: "Helvetica Neue", Arial, sans-serif;
text-transform:none;
font-style:italic;
}

Throwing all of that at the template results in a real markup mash-up. Compare the basic pane on the left with the resulting pane on the right in Figure below.

As a means of showing how to apply the various font values in one place, that was a good example, but in the real world it is important to make font decisions for a reason. Italicized text is considered less legible by many, so ensure you are using it because you have to.

Basic styling on the left compared with the font styling mash-up on the right.

More Font Shorthand

The previous example resulted in the CSS ballooning to 23 lines, which is avoidable with some font shorthand. While letter-spacing and text-transform cannot be included in the shorthand, all font properties and also line-height can.

Let’s take all the font properties in the next example and present them in one declaration. So long as the order of values is correct, the display will be exactly the same. First, consider the following selector for a paragraph:

p {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
font-family:verdana,arial,sans-serif;
line-height:150%;
}

Six lines are used here just to define the basic font styling for the paragraph. Building upon the basic shorthand you learned when we looked at font-size and font-family, further values can be combined to bring everything into one declaration. In the following code, note that after font: the value order is identified by the name of the property. The order is very important:

p {
font: style variant weight size/line-height family
}

Now, replace each value word with an actual value from the original six lines of CSS:

p {
font: italic small-caps bold 12px/150% verdana,arial,sans-serif
}

The result sees just one line of shorthand CSS doing the work of six longhand rules. Notice that font-size and line-height are combined as font-size/line-height, resulting in 12px/150% in the example. Values can be omitted if need be, so if you wish not to declare the font-variant, simply leave it out. So long as the order of declared properties does not change, all will be fine.

[Back] [Contents] [Next]