CSS In Depth Part 3: All About Text

In the first part of the CSS In Depth series, we talked about Margins, Padding & the Box Model. Last week in the second part of the series, we also discussed the differences between Floats & Positions.

This week in part 3 of our CSS In Depth series, we’ll discuss something more visual and design related – typography!

CSS2.1 provides for a lot of ways to use fonts creatively, and with CSS3 (which we’ll talk about next week), we’ll come even closer to full design control over our typography!

So what can we do with our text in CSS that’s accessible, helpful for SEO, cross-browser compatible and good looking?

1. Font-Family

Most people assume that you can only use a few “web-safe” fonts when making websites. While this is a good practice in general, you’ve actually got more choices in fonts than you’d think with font-family. With font-family, you’re able to specify your preferred font first, then replacements in case the visitor’s computer is missing the first font, then a general font-family in case the computer has none of those fonts.

For example, let’s say we want to use the font Helvetica on our website. While almost all Macs come with this font natively, not all Windows machines do. Therefor, we should play it safe by using a secondary font in case a user doesn’t have Helvetica. Arial is pretty close to Helvetica and it’s also a standard font for both Windows and Macs.

Therefor your rule would look like:

[html]
body { font-family: Helvetica, Arial, sans-serif; }
[/html]

If the computer doesn’t have Helvetica, it would try to use Arial, and then if it didn’t have Arial (highly unlikely) it would use some default sans-serif font.

There are three different font families that all fonts fit into, serif, sans-serif and monospace.

Serif fonts, like Georgia or Garamond, have small lines on the ends of the letters.

Sans-serif fonts, like Arial or Verdana, are without these serifs.

Monospace fonts, like Courier, are fonts that have letters with the same exact width.

2. Font-size

Font-size does what it says it does; controls the size of the font. However there are several measurements you can use to do this.

Pixels

Pixels are the most widely used way of determining font size. The most common font sizes in pixels for paragraph reading range from 12 to 14 pixels.

[html]
p { font-size: 12px; }
[/html]

Em

Em units are based on the font-size of the parent container or browser and actually changes in size according to the user’s browser size. I don’t personally use this measurement, although it’s the second most popular way of determining font size.

[html]
p { font-size: 1em; }
[/html]

Percentage

Percentage font sizes are also based off the parent container or browser size and change according to the user’s screen size.

[html]
p { font-size: 62.5%; }
[/html]

3. Font-style

Font-style controls the emphasis of the font and is mostly used for making fonts italic.

[html]
p { font-style: italic; }
[/html]

Values:

4. Font-weight

Font-weight controls the boldness of the font. You can simply set it to bold, or give it a more specific value.

[html]
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
p { font-weight: lighter; }
p { font-weight: 900; }
[/html]

Values:

Please note that not all fonts have the same levels of boldness, so it’s possible that you won’t see any different between bold and bolder or between 200 and 400 when you specify the font-weight.

5. Letter-spacing

Letter-spacing controls the spacing, or tracking, between two letters.

[html]
p { letter-spacing: 1px; }
[/html]

6. Line-height

Line-height, or leading, controls the spacing between two lines of text.

[html]
p { line-height: 22px; }
[/html]

7. Color

Color changes the color of the font and can accept either a hexidecimal value or one of the 16 color values, such as: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. It can also accept RGB values. More info here.

[html]
p { color: black; }
p { color: #000; }
[/html]

8. Text-align

Text-align affects the alignment of the text and what side the rag is on.

[html]
p { text-align: center; }
[/html]

Values:

• Left
• Right
• Center
• Justify

Don’t forget that only block-level elements such as paragraphs and divs can have the text-align property set. So text-align won’t work on a span tag for example, since it’s an inline-level element.

9. Text-decoration

Used mainly to call out links, text-decoration controls the line styles of text.

[html]
p { text-decoration: underline; }
[/html]

Values:

10. Text-transform

Text-transform is very helpful for controlling the capitalization of your text, without you having to change it manually in the content. In fact you should use text-transform: uppercase instead of capitalizing each letter when appropriate.

[html]
p { text-transform: uppercase; }
[/html]

Values:

• Uppercase
• Lowercase
• Capitalize
• None.

11. Word-spacing

Word-spacing affects the amount of space between the words.

[html]
p { word-spacing: 10px; }
[/html]

12. Text-indent

Text-indent indents the first line:

[html]
p { text-indent: 20px; }
[/html]

Fonts in CSS2.1

With fonts in CSS2.1, you have plenty to work with to make some awesome unique typography. What are some of your favorite text rules in CSS2.1?

The In Depth CSS Series

• Part 1: Margins, Padding & the Box Model
• Part 2: Floats & Positioning
• Part 3: All About Text
• Part 4: New CSS3 Styles