SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

CSS In Depth Part 3: All About Text

March 22, 2010 by Amber Weinberg 12 Comments

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.

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.

[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:

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.

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

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.

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

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.

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

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.

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

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.

[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:

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.

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

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.

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

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:

[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?

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

Filed Under: CSS, Tutorial

Comments

  1. Teddy says

    March 22, 2010 at 7:39 am

    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. Divyesh Ardeshana says

    March 22, 2010 at 9:03 am

    It is really nice help to us….keep it up..:)

  3. Jason says

    March 22, 2010 at 3:28 pm

    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

  4. Amber Weinberg says

    March 22, 2010 at 4:27 pm

    Thanks guys!

  5. Peter Nudo says

    March 22, 2010 at 5:46 pm

    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.

  6. Jim Westergren says

    March 23, 2010 at 6:00 am

    Great summary and article saved, thanks a lot.

  7. existdissolve says

    March 23, 2010 at 8:21 am

    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!

  8. David Hucklesby says

    March 23, 2010 at 7:55 pm

    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… :-(

  9. Derrick Workman says

    April 17, 2010 at 12:10 am

    Thanks for this, it was a bit of a review but that never hurts.

  10. arkev says

    June 17, 2010 at 5:02 am

    simple but great tutorial, thank you very much

  11. matkavakuutus says

    August 11, 2010 at 12:32 am

    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.

  12. Petter says

    July 28, 2011 at 10:40 am

    Dept in your article!!!

    Thanx for sharing.

    great!

Leave a Reply

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

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022