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;
}

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;
}

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: