Webpages are full of words. If you want visitors to read them, you have to make those words readable. CSS provides a handful of properties for altering how words appear. You've already seen how you can change their color using the color property. Let's examine several more.
The font face is set using the font-family property. CSS provides some generic family names that you may use. When the family is serif, which is the default, the browser uses a font face that has little feet called serifs on the letters' endpoints. These feet began as an imitation of the flourishes that appeared naturally as calligraphers made strokes with their pens. Do you see the serifs on this list of authors?
When the family is serif, the browser looks for a serif font installed on the viewer's computer, giving preference to Times New Roman or one of its clones.
The serif family is a popular choice for paragraph text, as serifs are purported to help the reader's eyes follow the flowing text. However, typesetters of the 1900s began experimenting with sleeker letter forms that lacked flourishes. Early sans serif fonts included Futura, which was published in 1927, and Helvetica, which was published in 1957. You can render your text in a sans serif font using the value sans-serif:
Browsers favor Helvetica or Arial.
You can choose the exact font face that you want the browser to use. However, the font may not be installed on the viewer's computer. To prepare for such an event, you are encouraged to provide fallback fonts using a comma-separated list. The last font in this list is usually generic family. Try editing this list of fonts and see which ones you have installed:
Several other generic families are available:
monospacecursivefantasysystem-uiIf you want to use a specific font that might not be installed on the viewer's computer, you can tell the browser to download the font on the fly and apply it to your page. Several services exist to ensure that these downloads are fast and perhaps made unnecessary by caching the font files on the viewer's computer. Google Fonts is one such service.
Visit Google Fonts and search for the font named Tomorrow. Select the style labeled Regular 400. View your selected families, and you will be presented with two ways of associating the font with your page: an HTML link tag or a CSS @import command. Here the @import command is used:
Note how the font-family property identifies the downloaded font by name just as you might identify an installed font.
Web developers debate over whether link or @import is better, and the winner is not clear. Linked resources are downloaded in parallel, but @import resources in sequence. On the other hand, the font face is a matter of presentation, and @import keeps the presentation logic together.
The size of a font is determined by the font-size property. The value of this property, like many in CSS, must be what the CSS standard calls a length, which is a number followed by a unit of linear measurement. A raw number is not a legal length. You must always include a unit—unless the value is 0.
You may be used to specifying font sizes in pixel units, which can be done in CSS using the px unit:
However, the px unit should generally be avoided for fonts. A viewer may have scaled the font size in their browser preferences. When you use px, the font will appear at the absolute size you set, ignoring the viewer's preferences. Try changing the font size in your browser's preferences. The text above should remain at 20 pixels.
A better unit is em. With this unit, the number is a proportion of the parent element's font size. An element with a font size of 1em will have exactly the same font size as its parent. 1.5em means the font size will be 150% of the parent's. If you only use em lengths, all the font sizes will ultimately recurse up to the root element, the size of which is set according to the viewer's preferences. Try changing your browser's font size to see the relative behavior of em lengths:
Several other units exist, including rem, which sizes relative to the root element, side-stepping any intervening ancestors.
The thickness of a font is called its weight. Legal values include 100, 200, and so on, up through 900, as well as the names normal and bold. The weight normal corresponds to weight 400, and bold corresponds to 700. Try experimenting with these different weight values:
Not all fonts support all weights. This example imports all weights available for the Roboto font.
To change the weight, or any font property, of just a small portion of a larger text, you need to wrap the portion up in a targetable HTML element. The element span is often used for this. Here keywords are shown in bold:
Note how the spans were targeted using a class.
To render text in italics, you use the font-style property:
However, you may also consider using the em or i tags in HTML. Historically, these were presentation elements whose mnemonics stood for emphasis and italics. Attempts have been made to retrofit semantic meaning onto these old presentation elements, so they are still around.
To changing the casing of the letters, CSS offers font-variant, which you use to render text in small capitals, and text-transform, which you can use to force the content to a different case:
Other legal values for text-transform include uppercase and capitalize. The latter of these capitalizes only the first letter of each word.