Typographic Properties

The majority of content on a typical website consists of text, so it is no surprise that CSS offers many properties for typographic customization. The art of typography is a subject all its own, but here are some of the most common type-related CSS properties.

Font-Family

font-family provides a list of fonts to use. The reason for providing multiple fonts is that the browser checks a user's system to see if the font is available. If it is not, it moves on to the next font specified. By providing a generic font type, like "sans-serif", it insures that a user's browser can use its default in the style if no other requested fonts are installed.

Font names that contain space characters should be wrapped in quotation marks.

Font-Size

Fonts can be sized using most CSS size units. (See the reference guide.) If percentages are used, the font will be sized as a percentage of the parent element's font size.

rem units are a great choice.

In the above example, try changing the size in rem units to see what happens to the type. Can you think of other sizing units to try? What happens when you sue them?

Font-Weight

font-weight determines whether the type displays as bold, normal, light, etcetera. The value can be set with keywords like "bold" or "normal", or with numeric values in increments of 100, with 400 as the equivalent of "normal".

Font-Style

font-style determines whether the type is normal or italic.

Color

There are a number of formats in which colors can be expressed in CSS. For a deeper explanation, see the chapter on color formats.

Line-Height

line-height requires no units for the value. By default, the value is relative to the size of the type, so if the value is 2, the line-height is twice the font-size.

In the above example, try changing the number to adjust the line-height.

Text-Transform

text-transform allows you to change the case of the text through CSS. It is usually better to do this in CSS rather than in the HTML because it is usually a style choice rather than a part of the meaning of the text.

Common values are: capitalize, uppercase, lowercase, and none. None simply gets rid of any values applied elsewhere.

In the above example, try out the different values for text-transform. What happens when you try capitalize, lowercase, or none?

Text-Decoration

text-decoration allows you to add or remove decorative elements applied to text, such as underlines or strike-throughs.

Common values are: underline, overline, line-through, and none. None simply gets rid of any values applied elsewhere.

In the above example, try out the different values for text-decoration. What happens when you try overline, line-through, or none?

Letter-Spacing

letter-spacing controls the tracking or amount of space between each pair of letters. em is often a good choice of unit for this property because it is relative to the type to which it is applied.

In the above example, try out the different values and different measurement units for letter-spacing to see what happens.

Video Lesson

The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.