Make Your Small Type a Little Bit Bigger

There are plenty of good reasons for making your text type small as long as you don’t compromise the readability and resolution. That said, I’d like to suggest that you make your small type just a little bit bigger.

Small, readable type is not bad

Designers are known for their love affair with tiny type, and there’s no doubt about it, when viewing a design as a whole, small text type can look better on screen than big type.

It appears to look better because a block of type at small sizes becomes texture instead of individual words. We don’t have to read textures, we just visually soak them in. This is important because words are pictures, and if you can control the texture of the type while maintaining readability, you can use type to aid communication on many different levels. This is known as “typographic color” and is a very important part of any design project.

There are many things you can do to make small type more readable. Adjust the contrast, increase the leading (line-height), give it a bit more word spacing, etc..

Small type (a bit bigger) is better

There are 3 important reasons to make your text type just a little-bit bigger, readability, resolution, and hierarchy.

Readability

You might be able to read tiny type, but there are people who can’t. I recently corrected my nearsightedness with lasik surgery and find that I prefer having the type just a bit bigger. I’m getting all too tired of using CMD+ to make the fonts bigger in Firefox. Spare your readers that extra effort — I can’t recall a time I’ve intentionally made the type smaller.

Resolution

The smaller you make your type, the fewer pixels you are using to make up the details of each character. The smaller you make your type, the less it looks like the type designer intended it to look. There are pixel fonts that help out here a bit, but in any case, the bitmap versions of these fonts are trying to imitate the true nature of the character, and they just can’t do it with out more pixels.

The difference between 12 and 10 pixel type is not just 2 pixels, the difference in resolution is 34 total pixels which equates to a 38% difference. That’s right, 10px type has potentially 38% less resolution than 12px type. Sure you can still make out the words, but you’ve eliminated all the subtleties of hundreds of years of typographic design elements that were put there to make things easier to read.

Typographic Hierarchy

This is probably the most overlooked reason for making your type bigger. If you’ve carefully designed your content’s typography and you’ve made it as small as you can while retaining readability and resolution, you should still make it bigger.

When designing for the web, especially for dynamic content, make sure you leave room for the addition of type that may need to be a little bit smaller.

Annotations, captions, credits, and footnotes all require typographic distinction. You may not want a caption to be exactly the same size as your body copy, and differentiating with color and typeface at small sizes may not produce the desired effect.

If readability, and resolution aren’t enough to convince you, don’t deny yourself the flexibility of being able to go just a bit smaller and still retain the integrity of your design.

posted by John Dilworth on Wednesday, Dec 13, 2006
tagged with design, typography