Focus on Typography: Size

TypographyThe size and contrast of your type are probably the two most important factors when making your pages legible. None of the fundamentals of typography—contrast, hierarchy, size, and space—work in isolation, but if the contrast is bad or if the size of your type is too small, you will lose readers.

There was a phase, in the last couple of years, where the body text size became unbelievably small and difficult to read. Thankfully, this trend appears to be over, and there is much more interest in choosing suitable fonts, colors and sizes, and generally making choices about typography, rather than just going for a default.

image0024

The image above shows a lower-case letter x, ranging in size from 6pts to 72pts. This scale has been around since the sixteenth century and is something you will be familiar with if you use any type of software which allows you to choose type sizes.

You can use this scale as a guide when choosing your font sizes. For example, you might decide that all of your body text will be set at 12, your main headings set at 18, sub-headings at 16 and sidebar headings at 14 pixels. I know this is not rocket science, but this simple scale can help you make a definite decision about the size of your type for various parts of the web page. This will improve legibility and attractiveness of the layout, and you might find that you start to get a little bit excited about type as a design element!

image0043

So once you’ve laid it out and can see how different sized type looks, you can set it in your CSS style sheet. I’m not going to discuss CSS here, but Ian Lloyd has an excellent and detailed primer on getting started with HTML and CSS.

As a rule of thumb, don’t set your body copy to be any less than 10. And think about your audience. If you’re creating a web site for an older audience, you may need to set the size to 14, which may appear massive to you, but if your eyesight is diminishing, big is good.

Of course, you could go much bolder by setting a very large heading, and that has been a recent trend. The important point is that you make a choice about the sizes you’re using. Here’s five sites that I’ve picked out to showcase how various size type can create a completely different vibe on your site.

A List Apart. It was inevitable that this site would appear in an article related to type. This site is renowned for its beautiful typography.

image0063

I wear your shirt

image0082

Kraaft.com have deliberately chosen small fonts on their site.
image0102

Defined Clarity

image0121

Simone Maranzana

image0141

Finally, an online tool that you may find useful for previewing the size (and other properties) of your type is Typetester.

image0161

What do you think of the trend of very large fonts on web sites? Is it something you’ve used yourself?

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.

  • http://twitter.com/nathj07 Nathan Davies

    A great point well made I feel. The examples are good too, with the exception of DefinedClarity. I found the typography to be lacking on contrast and the size was too small for me – a personal point I know. Also a site built entirely in Flash is not really where it’s at these days.

    The other sites were great reference points and I particularly like the TypeTester tool – thanks for that.