How To Style Your Type With CSS

A few weeks ago, I wrote a series of posts on Typography rules and how applying the concept of Contrast, Space, Size and Hierarchy, we can produce appealing, attractive and importantly legible text. These rules are equally applicable for print work and the web. Let’s look at a simple example of a single web page, which consists mainly of text and how we can use CSS to style it. I’m not going to focus on setting up containers or divs to hold the text for this example.

In the image below, you can see a page of plain text about the movie Jaws.

At this stage the text is all the same size, font and colour.

Jaws

Let’s start by putting in some headings. This will cover the concept of using size and hierarchy to differentiate blocks of text and headings. I’ve added <h1> tags to the title "Jaws", <h2> tags to the sub-headings and <h3> tags to the sub sub-headings. I also added a <h4> paragraph tag to the piece of text saying "From Wikipedia, the free encyclopedia" (which incidentally is where I got the text for this example from.)

I initially used a <h4> tag for "From Wikipedia, the free encyclopedia", which is incorrect. It is not good practice to put a <h4> in between a <h1> and <h2> tags. So in this case I can use the paragraph tag and will later apply a class style to it.

text1

With those simple changes we can already clearly see which bits of text are the most important. Now I’m going to attach a Cascading Style Sheet to the HTML page and start styling.

At the top of the HTML page, in the <head> section, I’ve added the following;

<link href="style.css" rel="stylesheet" type="text/css" />

Where “style.css” is the name of my stylesheet located in the same folder as my HTML page.

The first style I’ve set up is for the <body> tag. I’ve gone for a dark blue background, white text and arial font. So the code in my stylesheet looks like this:


body {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  background-color: #003366;
  }

Jaws text

There is now a good sense of contrast between the text colour and the background, but I’d also like to create more contrast between the <h1> tags and the other text. Setting the <body> text to 12 pixels and the <h1> to 36 pixels, light blue and Georgia font with a dotted bottom border, produces the following:


body {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  background-color: #003366;
  font-size: 12px;
  }

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 36px;
  color: #00CCFF;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #00CCFF;
}

image0075

I want to make the <h2> and <h3> tags match the colour of the <h1> but not as large and not underlined.


h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #00CCFF;
  font-size: 24px;
}

image0095

For the h3 headings, I’m setting the colour to white, but changing the font to Arial and reducing the size to 16 pixels.


h3 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 16px; 
  color: #FFFFFF; 
} 

Another typography principle that I want to apply is the idea of space, and I’ll do that using letter spacing in the heading and line spacing in the body text. To add extra space between the letters in the <h1> tag we add the following;


letter-spacing: 5px;

Jaws heading

To add space between the lines in the body text, to help make it easier to read, add the following to the body:


line-height: 20px;

And the following to the <h1> tag.


line-height:40px;

jaws text

To finish the styling to the text, the last thing I want to change is the h4 heading p tag at the top of the page which says “From Wikipedia, the free encyclopedia”. I’m keeping the text size small but setting the text in uppercase.

I incorrectly used the <h4> tag here. A better option would be to use a paragraph style. So I created a class called byline.


.byline {
  text-transform: uppercase;
}

final jaws

And that completes the styling. The final style sheet looks like this;

 
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  background-color: #003366;
  font-size: 12px;
  line-height: 20px;
  }

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 36px;
  color: #00CCFF;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #00CCFF;
  letter-spacing: 5px;
  line-height: 40px;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
}

h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #00CCFF;
  font-size: 24px;
  }

.byline {
  text-transform: uppercase;
}

It’s a simple example, but one which shows how to take some plain text and style it with just a few attributes. This is the tip of the iceberg in terms of what you can do. How far are you going with CSS for styling your type? Have you any tips you’d like to share?

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Curious …

    Do we like putting h4 tags after h1 but before h2? Hm.

  • BPartch

    Don’t forget to combine selectors with the same properties.

    h1, h2 {
      font-family: Georgia, "Times New Roman", Times, serif;
      color:#00CCFF;
    }
    h1 {
      font-size: 36px;
      border-bottom-width: 1px;
      border-bottom-style: dotted;
      border-bottom-color: #00CCFF;
      letter-spacing: 5px;
      line-height: 40px;
    }
    h2 {
      font-size: 24px;
    }
  • http://www.crinkle.com.au/ crinkle

    What do we think about having an h4 in between an h1 and h2?

  • http://seriocomic.com seriocomic

    The blue-on-blue somewhat negates the heading emphasis. Hardly an example of increased contrast?

  • Shoan

    Does “From wikipedia….” really qualify to be a heading? I would rather use <p> or <span> for it.

  • http://www.cssispoetry.com BlakeAnthony

    Any reason why your using (px) instead of em?

  • Anonymous

    @crinkle : i agree with you, that’s an odd choice, not only because of its position, but because this bit of content is no subtitle. I would use a simple p tag, with an id of “source”.

  • realtrack1

    Hey very very usefull information. i am still learning css so it will help me a lot.

    thanks

  • http://fvsch.com Florent V.

    I also added a <h4> tag to the piece of text saying “From Wikipedia, the free encyclopedia”

    Wow, you fail at HTML. :/

    Introducing breaks in the outline (jumping from H1 to H4) is not a big issue, but it’s still not good markup. You should have used a simple paragraph (with a class for styling, maybe) for that information.

    Let us note that the current HTML5 working draft has examples with a h1 title followed by a h2 subtitle, both wrapped in a heading element. In that case, the h2 should not be counted in the document outline, the working draft says. But i find the heading element to be a bit awkward.

  • Kaushik.beta

    For heaven’s sake, use Clear Type Tuner! Look at your screenshots. The fonts looks so crude, broken, horrible.

  • John

    For heaven’s sake, use Clear Type Tuner! Look at your screenshots. The fonts looks so crude, broken, horrible.

    …or else use GIFs instead of JPEGs for a cleaner look.

  • http://www.laughingliondesign.net Jennifer Farley

    Hi guys, as many of you correctly pointed out, it is not a good idea to stick a H4 tag inbetween a H1 and H2. Yes I failed HTML! ;-) My apologies. I’ve updated the post and changed it to a paragraph style instead. Thanks for taking the time to comment.

    Seriocomic, the blue on blue is a good contrast, but the increased contrast I was referring to comes from making the headline bigger and the body text smaller.

  • LazyAndroid

    You say you updated the post, but it still says you added a h4 to the wikipedia stuff.

  • http://www.munkydesigns.co.uk MunkyDesigns

    But then if you carry on reading the post, she amends it.

    Some good tips for beginners, it’s amazing how many people don’t take the time to style their headings properly.

    Also, I would echo the previous statement of using better quality thumbnails!

  • http://cydewaze.org cydewaze

    The color combination fails 508 testing, but at least you included alt text with the images. :)

  • John

    OMG, ¿Isn’t there an editor here at sitepoint.com who reviews the articles before being published?

    That would prevent these embarrassing mistakes, which can lead beginners to misunderstandings, even on such a basic level. I can’t imagine what the author would write when talking about more advanced topics.

  • BeeBoy

    Woah!

    Take it easy there folks! I think the kicking should stop now.

    Constructive comments are useful, and pointing out a simple mistake so that it can be corrected is, without doubt, the decent thing to do. And, as you can see, the author has graciously accepted the initial comments and made the suggested amendments.

    I think, from looking at the article, it is blindingly obvious that the use of the H4 tag was an error – hardly world crushing, or a capital crime, huh? Also, the CSS is all present and correct – unless i’ve suddenly developed myopia!

    I find the posts by the author most informative and like reading the comments that follow on from them, as they usually enhance the learning for me. There are some useful comments up here, but some of them are just a little too vitriolic.

    So, keep it positive, give the lady a break, take a deep breath and relax-the-cacks a bit – nothing we say or do here is going to vastly improve the overall wellbeing of the world, but it sure can put a little dent in it.

  • http://www.lowter.com charmedlover

    Chill out, people make mistakes.

    I understand how you are applying the typography principles here using CSS, but the end result is kind of ugly.

  • http://www.patricksamphire.com/ PatrickSamphire

    This seems a little on the basic side for sitepoint. Obviously, beginners have to start somewhere, but I do wonder if sitepoint is really the place for something quite this basic.

  • http://www.historycommons.org/ Black Max

    Patrick, interesting that you would make that comment. I was coming in to complement Jennifer on writing posts for beginning/intermediate readers. Several years ago, Georgina and I put together a series of articles for SP called, I believe, “Practical Web Design.” They were aimed at beginners and intermediate users. I quit writing them because I realized that, at that time, I didn’t have the depth of knowledge to continue the series, but I’ve always thought that SP could greatly expand its user base by appealing to others besides advanced/expert designers and users. Jennifer’s series of articles are right up that alley. Kudos!

  • http://www.magain.com/ Matthew Magain

    Glad you’re enjoying the series Black Max, and thanks for offering an alternative viewpoint.

    To those who have weighed in on Jennifer’s slip-up, it’s much appreciated that you pointed it out, although some of you were more tactful in delivering your feedback than others.

    It’s worth stating this: it is very, very easy to sink the boot in, but it’s very, very hard to stand up and put yourself out there (especially on a daily basis. Yes, that’s right—Jennifer is writing these posts for you every day).

    If you read back through the posts that lead up to this one, I’m sure you’ll agree, that the advice given and the ground Jennifer has covered is all high quality stuff. I know she’ll take this experience on board and her future posts will be all the better for it. Just be sure you don’t sink the boot in so hard that she decides she doesn’t want to come back at all. I’m sure her skin is far too thick to let that happen, but by the same token I’d like to think the community element of SitePoint was a bit more supportive than that. Hopefully you guys prove me right.

  • http://www.patricksamphire.com/ PatrickSamphire

    Black Max, maybe that’s a fair point. I guess I’ve gotten into the expectation that SitePoint will be for more intermediate/advanced users, but it doesn’t have to be. I wonder if articles could be tagged as beginner/intermediate/advanced, in the way the sitepoint books are. That way, no one would waste their time on something that doesn’t fit what they need.

  • http://www.historycommons.org/ Black Max

    Patrick, that’s a fair suggestion. In fact, SP could create some sort of navigation aid that would steer beginners, intermediates, and enthusiastic amateurs to a selected section populated with blogs, articles, and forum posts suited for them. Not to steer them away from anything, just to give them another option. SP already has Design, Tech, and Business sections; it might make for a good fit to add another section reflecting this kind of material.