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

Comments

  1. says

    Wow, this is useful! never have I came across a page that compiles all the possible styling of fonts (and typography). I am especially amused that I didn’t know the “oblique” attribute actually exists. I don’t see any visible difference between italics and oblique, but I guess italics are true italics while oblique simply skews the font? Correct me if I’m wrong.

    Great article! Thanks for sharing :)

  2. Jason says

    Very nice article, great visual reference for font style properties.

    Also in the area of styling fonts, the pseudo selectors :first-letter and :first-line can be useful in some cases – drop caps, larger first line, etc.

    Can’t wait to see the CSS3 article

  3. says

    Great post Amber. It’s really specific and the examples are great and easy to follow along with. Like Jason, can’t wait to see the CSS3 article.

  4. says

    Nice article–concise, but still descriptive.

    One thing I would note is that in the font-size section, there are quite a few more options for the units of measurement than just %, em, and px. While your article doesn’t necessarily say that these 3 are the only ones, it might be good for clarity to at least mention the others.

    Thanks again for a very nice article!

  5. David Hucklesby says

    The problem I have with pixels for font-size is my high-def laptop runs at the factory setting of 120 DPI. Default font-size is 20px, and even that looks small compared to a desktop machine at the more usual 96 DPI. So 12px is hard to read – and increasing text-size in the browser often causes the layout to fail.

    I *could* change the DPI setting – but then I lose the benefit of high definition… :-(

  6. says

    was very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.

Trackbacks

  1. 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…

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *