Focus On Typography, Part 3: Size

Tweet

In the third part of our series, focusing on Typography, the fundamental ingredient we’re talking about today, is size.

TypographyThe size and contrast of your type are probably the two most important factors when making your pages legible. As I mentioned in the previous article on hierarchy, none of these fundamentals 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, colours 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

In the final part of this series, we’ll take a look at how space is an important ingredient in your design. What do you think of the trend of very large fonts on web sites? Is it something you’ve used yourself?

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.

  • Debbie

    Thanks for the great series and information on typography.

    And you might want to check your link to Typetester. When I clicked on the link, it took me to the wrong site. I did a google search and found the site at typetester.org:)

  • http://metaldenver.com Jack Rugile

    Your link to typetester is wrong. It is .org, not .com

  • http://www.magain.com/ mattymcg

    Thanks Jack, Debbie and everyone else that wrote in — link has been fixed.

  • Stevie D

    I thought this was a focus on typography. Sorry, but it seems more of a “No S**t Sherlock” article. Don’t make your text too small. Make headings larger. Is there anybody who doesn’t know this?

    A focus on typography and size should tell people about using % and em rather than px; how to avoid the bug in IE6 where setting font-size to small or large makes the type illegibly small or unbelievably large; don’t set the size of body text in px; there’s no need to specify a size at all for body text.

    You’ve linked to examples of typography, but why? What should we be looking at on each of those sites? What is it that they do particularly well?

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

      Hi Stevie
      Thanks for your comments. What I was aiming for here was more of a design theory post rather than specifics of CSS.

      I’ve been teaching design for about 6 years and can tell you categorically, that YES, there are people who do not know about making setting type at different sizes. I’ve seen websites with body text larger than the headings. Sitepoint has readers at many levels of web design and development, not everyone is a born designer and posts like this are written to help people who may be new to design.

      I agree with you, the explanation with the examples was a bit sparse, and I’ll certainly take it on board.

  • http://www.magain.com/ mattymcg

    A focus on typography and size should tell people about using % and em rather than px;

    I disagree. This stuff may be obvious to you, but there are lots of beginning web designers who leap straight into writing CSS styles without planning type size first. This may not be you, but don’t assume that every reader here is as knowledgeable a designer as yourself.

    You’ve linked to examples of typography, but why? What should we be looking at on each of those sites? What is it that they do particularly well?

    A critique of sites that implement a particular aspect of design well, and why that approach is successful, is definitely good feedback. I’m sure Jennifer will take this on board and fold suggestions like this into future posts. Thanks for taking the time to comment.