Text I

Perhaps this was the chapter you’d been waiting for. I can understand that, but hopefully you agree now that changing properties of the text is a minor change, relatively speaking. It shouldn’t be the first thing you consider in a design, nor the second, nor the third. There’s no use finding the perfect font size … if you haven’t even blocked out the skeleton of your web page.

Additionally, as you read this chapter (and the next), you’ll notice that these CSS properties mostly match the basic properties any Typography course will teach you. As such, this chapter will be very quick and mostly just give you the right syntax to use for everything.

It will not teach you “good typography” or the in-depth application of these properties. That’s a whole different creative area you should study some other time! (Or figure out through trial and error, as many web designers have done.)

Text Color

Use the color property, which expects a color value.

Font Size

Use the font-size property, which excepts a number value (including unit!)

Alignment

Use the text-align property. It accepts four values: left, right, center and justify.

“Justify” means that the text fills the whole space (from left to right edge), even if that means it has to vary the gaps between words to do so. (More on this later.)

Variations

The same font can appear in many variations, usually applied for contrast and emphasis.

If you’ve learned about HTML, then you’ve already seen this in action.

• The <strong> element automatically makes text inside bold. All the header tags (h1 … h6) do so as well.
• The <em> element automatically makes text inside italic.

This section teaches the hidden CSS properties that make these defaults happen. (And once you know that, you can also turn them off!)

• font-weight
• font-style
• font-stretch
• font-variant

To change the “thickness” or “boldness” of a font, use font-weight. It allows values 100 (thin) to 900 (bold), or named values (lighter, normal, bolder, bold).

To make the text slanted, use font-style. It allows values normal, italic and oblique.

To use a condensed or expanded version of the font, use font-stretch. It allows values condensed, ultra-condensed, expanded, ultra-expanded. Or any percentage.

Finally, the font-variant property is only used to create “small caps” (with the value small-caps). This means that the text is displayed as capital letters, but shrunk to the size of lowercase letters.

Spacing

Line-height

One crucial property tightly related to font size is the line-height. To keep text readable, you need enough space between (vertical) lines, otherwise the letters will overlap. As such, the line-height should be set relative to the font size (not in absolute units), to some number greater than 100%.

In the example below, play around with the value to see what happens. (And what’s readable and what’s not.)

Letter & Word Spacing

Similarly, you can adjust the distance between individual letters (letter-spacing) and individual words (word-spacing).

The default values are usually fine. This is mostly useful if you have some special font that doesn’t work by default, or if the text is supposed to “stand out” in some way (with increased spacing).

Indent

The text-indent property indents the first line of a text ( = moves it to the right). It requires a number.

This is standard practice in books, especially novels. When all you have is text, this indent creates a nice way to signal the start of a new paragraph and keep the wall of text easy to read.

On websites, though, this is uncommon. Because screens have a lower resolution, and websites have more images or non-text elements floating around, people usually prefer text to be separated by whitespace.

Whatever you do, don’t use both an indent and whitespace! That’s one of the deadly sins of typography ;)