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]
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.
[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
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.
[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]
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?
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 :)
It is really nice help to us….keep it up..:)
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
Thanks guys!
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.
Great summary and article saved, thanks a lot.
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!
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… :-(
Thanks for this, it was a bit of a review but that never hurts.
simple but great tutorial, thank you very much
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.
Dept in your article!!!
Thanx for sharing.
great!