Adding style with CSS: beautiful text

25 April 2009, in CSS, HTML | 4 comments »

This may seem like a no-brainer, but adding style to your HTML is not just about adding pretty backgrounds and borders. The foundation of a good looking site has to be, with a couple other things, the way text is set. So let’s see how, with just a few lines of very simple CSS, we can quickly make our type a bit more beautiful and easier to read.

The markup

Before adding style to our text, we have to make sure we mark it up correctly.

For the main title of the page we should use the h1 tag (this has been a long running discussion within web developers, some prefer to use this tag for the page’s logo while others for the title of the page).

The subheadings should be tagged as h2, h3, etc., until h6, according to its importance and hierarchy within the content.

Paragraphs of text should be marked up as p; lists as either ol or ul, depending on whether the information is ordered or unordered; and long quotations should be marked up nicely as blockquote (with a block level element inside it, like a p, div, ul or ol).

You can see the source code on the example page for more detail.

General styles

First we’ll start by defining some general styles for the page and the elements. I’m not going to apply a complete CSS reset, because it would be overdoing it for this simple example:

body { 
	margin:0; 
	padding:0;
	font:62.5% "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#000;
	text-align:center;
	}
	
div,
h1, h2, h3, h4, h5, h6,
p,
ul, ol, li,
blockquote {
	margin:0;
	padding:0;
	}

So, we:

  1. Reset the margins and paddings of the body and the other elements to zero
  2. Set the overall size of the font to 62.5%—this is a little trick that will make our lives easier. When we set the font size of the page to 62.5%, we can convert the em measures we use to pixels just by multiplying them by 10 (for example, 1.2em equals 12px)
  3. Set the colour of the text to black
  4. Centre align the text of the page: this is only needed for some older browsers to position our container div to the centre

Now we’ll quickly style the container div:

div.text {
	width:50em;
	padding:2em 0;
	margin:auto;
	text-align:left;
	}

We made it long enough so that the lines of text are comfortable to read, but not too wide; added some padding to the top and bottom; aligned the container to the centre of the page (margin:auto) and made the text inside the container left aligned (remember we had previously set the text of the body element to be aligned to the centre).

Headings

On the web, it’s a generally accepted rule (but not set in stone) that it’s easier to read text when the headings are set in a serif font while the rest of the text is set in a non-serif font.

We’ll follow that rule here and set the headings to Georgia (a common font to most operating systems). We’ll also have a smaller line-height for the headings than for the rest of the text:

h1, h2, h3, h4, h5, h6 {
	font-family:Georgia, "Times New Roman", Times, serif;
	line-height:1.2;
	}

Now let’s define the font size of each of the headings we are using on the page (it’s good practice to style all the possible headings, even if you don’t use them on your page, it may come in hand later, but let’s keep this tutorial short):

h1 {
	font-size:3.4em;
	margin-bottom:.8em;
	}
		
h2 {
	font-size:2.4em;
	padding-bottom:.2em;
	border-bottom:1px solid #333;
	margin-top:1em;
	margin-bottom:.7em;
	}
		
h3 {
	font-size:1.8em;
	margin-bottom:.7em;
	}

We also added some margin to the bottom of the headings, so that there is some white space between them and the text that follows.

To add some eye-candy and pace to our page, I added a thin border (and padding) to the bottom of the h2 headings.

Paragraphs

p {
	font-size:1.3em;
	line-height:1.5;
	margin-bottom:1.3em;
	}

The paragraphs need a smaller font size than the headings, and also need some white space around them, hence the bottom margin and a bigger line height: this makes the text easier to read. Make sure you don’t use a line-height so big that keeps the text from being a concise block and the lines too spread apart.

Lists

Like for the headings and paragraphs, the lists (whether ordered or unordered) should also have proper white space around them. So we’ll make sure there is always a bottom margin and a small left indentation (left margin), and we’ll also make the font the same size of the paragraphs:

ul, ol {
	font-size:1.3em;
	margin:0 0 1.3em 2em;
	}
		
	li {
		margin-bottom:.4em;
		}

For each li, I’m also adding a small margin-bottom, so that there is a nice space between each of them and they’re not all cramped on top of each other.
For this example, I’m keeping the default list styles (decimal, for ordered; and disc, for unordered): they look fine in most of the cases.

Quotes

A common element used in texts is the blockquote. This is the right element to be used when making a long quotation.

Since we’re using someone else’s words, it’s a nice touch to use an italic font in this case. Because Helvetica’s italic isn’t as nice, we’ll use Georgia for blockquotes. We’ll also add some margin and padding, and apply a nice light grey border to the left of the quotes, so that they are easy to spot while browsing the page.

blockquote {
	padding-left:1em;
	border-left:3px solid #999;
	margin:2.5em 2em;
	}
			
	blockquote p {
		font:italic 1.2em/1.6 Georgia, "Times New Roman", Times, serif;
		}

You can find more information on how to style the blockquote element in the Resources & Further Reading links.

Conclusion

It’s easy to style your HTML text with CSS and to make it a bit more pleasant to read. You just have to make sure to follow some simple rules:

  • Use the correct markup: headings, paragraphs, lists, etc.
  • Use margins and padding to add enough white space around each element
  • Don’t forget to add appropriate line heights, for ease of read

There’s a lot more you can do with your text with CSS: the possibilities are endless. I hope that after reading this quick tutorial you have a better idea of how to do it. The References and Further Reading links are a great place to start if you want to improve your type with CSS!

You can download the example files here:

View example Download source files

References

Further reading & Tools

There are 4 comments:

  1. wasim says:

    Useful…. :)

  2. Keith Davis says:

    I was looking for a little info on styling blockquotes and came across this article… very good.

    Quick question, is there any problem using italic text in a blockquote?

    I know that IE doesn’t like italic text in divs and you have to use a hack.

  3. Keith Davis says:

    Hi Inayaili
    Thanks for your reply.
    My CSS skills are a bit rustynow. At one time I was a regular reader of A list Apart and 456 Berea Street (notice them in your list of sites) but lately I’ve just been using WordPress themes.
    Still nice to find a site like this to help me get back in with CSS and add a bit of styling to the themes.

Leave a comment: