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:

body { font-family: Helvetica, Arial, sans-serif; }

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.

This is a serif font.

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

This is a sans-serif font.

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

This is a monospace font.

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.

p { font-size: 12px; }

This paragraph is 12 pixels – Did you know that the quick brown fox jumped over the lazy dog?

This paragraph is 13 pixels – Did you know that the quick brown fox jumped over the lazy dog?

This paragraph is 14 pixels – Did you know that the quick brown fox jumped over the lazy dog?

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.

p { font-size: 1em; }

Percentage

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

p { font-size: 62.5%; }

3. Font-style

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

p { font-style: italic; }

Values:

normal – This is a normal font-style.
italic – This font-style is italic.
oblique – This font-style is oblique.

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.

p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
p { font-weight: lighter; }
p { font-weight: 900; }

Values:

normal – This is a normal font-weight
bold – This font-weight is bold
bolder – This font-weight is bolder
lighter – This font weight is lighter
100 through 900 – This font-weight is 100
100 through 900 – This font-weight is 900

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.

p { letter-spacing: 1px; }
This paragraph has normal letter-spacing
This paragraph has 1px of letter-spacing

6. Line-height

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

p { line-height: 22px; }
This paragraph has 14px of line-height. This paragraph has 14px of line-height. This paragraph has 14px of line-height. This paragraph has 14px of line-height. This paragraph has 14px of line-height. This paragraph has 14px of line-height. This paragraph has 14px of line-height.
This paragraph has 28px of line-height. This paragraph has 28px of line-height. This paragraph has 28px of line-height. This paragraph has 28px of line-height. This paragraph has 28px of line-height. This paragraph has 28px of line-height. This paragraph has 28px of line-height.

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.

p { color: black; }
p { color: #000; }
This paragraph is red.
This paragraph is yellow.

8. Text-align

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

p { text-align: center; }

Values:

  • Left
  • Right
  • Center
  • Justify

This paragraph has text aligned to the left. This paragraph has text aligned to the left. This paragraph has text aligned to the left. This paragraph has text aligned to the left. This paragraph has text aligned to the left.

This paragraph has text aligned to the right. This paragraph has text aligned to the right. This paragraph has text aligned to the right. This paragraph has text aligned to the right. This paragraph has text aligned to the right.

This paragraph has text aligned in the center. This paragraph has text aligned in the center. This paragraph has text aligned in the center. This paragraph has text aligned in the center. This paragraph has text aligned in the center.

This paragraph has justified text. This paragraph has justified text. This paragraph has justified text. This paragraph has justified text. This paragraph has justified text.

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.

p { text-decoration: underline; }

Values:

Underline – This paragraph is underlined.
Overline – This paragraph is overlined.
Line-through – This paragraph is lined-through.
None – This paragraph is normal (or none).

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.

p { text-transform: uppercase; }

Values:

  • Uppercase
  • Lowercase
  • Capitalize
  • None.
This paragraph is all uppercase even if you write lowercase letters in the text
This paragraph is all lowercase even if you actually write uppercase letters in the text
This paragraph has the first letter of each word in caps
This paragraph is normal

11. Word-spacing

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

p { word-spacing: 10px; }
This paragraph has 10px word spacing. This paragraph has 10px word spacing. This paragraph has 10px word spacing. This paragraph has 10px word spacing. This paragraph has 10px word spacing.

12. Text-indent

Text-indent indents the first line:

p { text-indent: 20px; }

This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent. This paragraph has 20 pixels of text-indent.

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





About the author:

Amber is a freelancer with over 10 years of experience and specializes in clean, semantic and valid 1.0 Strict XHTML, CSS and Wordpress development. She also writes a web development blog on her portfolio at www.amberweinberg.com.

Comments:

Scroll back to the top