Design Superstars

10 Tips for Great Web Typography

November 29, 2012 Typography 4 Comments

559 Flares

559 Flares


×

One of the most important design aspects on any website is typography. From selecting typefaces to sizes, colors and effects, great typography is what makes a good site fantastic. And getting started is not that tough. Understanding the basics of type – and how to keep your typography clean – is the key to readability, flow and design harmony. Here are 10 quick tips that any designer can use on the way to creating outstanding web typography.

1. Understand Typography Basics

There is an almost unlimited vocabulary that comes with typography.

You don’t need to understand all the jargon to understand how to get started with type. But you do need to understand the basics. The first step is being able to identify a serif versus sans serif font. Serifs are tiny embellishments on the ends of letters (think Times New Roman or Rockwell), while sans serifs have unembellished strokes (think Arial or Helvetica). The parts of each letter are equally important.

All designers should be able to identify a stem, x-height, ascender and descender. The stem is the main vertical stroke of a letter, x-height is how tall a lowercase letter (x) is from the baseline, ascenders are strokes that extend above the x-height and descenders fall below the x-height.

2. Limit Number of Typefaces

Too many fonts can ruin your site.

Two or three type families are typically enough for most projects. Commonly in web design, the main body copy on a site is a sans serif typeface. They are generally easy to read at a variety of sizes and work with many other fonts. Serif typefaces are less commonly used for type at smaller sizes but can be a great option for display type. But don’t feel limited. It is ok to mix and match serifs and sans serifs.

3. Consider Alignment

Think about how type rests on the page – does it align to the left or right, it is centered or does it stretch the width of the frame?

Stick to simple alignment schemes for large blocks of text – left-aligned is the easiest on the eye to read because it creates natural starting and stopping points. Centered text can create a sense of balance but can be difficult on readers if it spans for more than a few lines. Right-aligned text is the most difficult to read in mass and should be reserved for display.

4. Watch for Hyphens and Bad Breaks

Hyphens are generally unused in web applications, unlike print. Try to avoid them. Hyphens can cause readers to stumble or misunderstand words. Don’t use hyphens at all in display type unless the hyphen has a specific purpose. Try to avoid them in body copy as well. The same goes for words that go together – think Santa Claus or New York. Try to keep them from jumping from one line to the next, especially in display copy.

5. Kern – It Does Make a Difference

Typography is not an exact science and sometimes the letters need a little extra help. Take care of kerning, especially in display type, so that odd letter combinations look seamless. Think about the letter pair AV, for example. If the space between letters is not tightened or brought together, the gap can be distracting.

6. Think About Size and Contrast

Size is very important when you are working with type.

Good typography creates a sense of hierarchy and scale, helping readers move across and through the site in a certain order by design. Select font sizes that vary considerably. If your headline (or display type) is set at 55 points, the subheads should not be set at 50 because it would be hard to tell them apart. Use several different sizes and stick to them rather than using different point sizes for every new item in the project.

Keep the same concept in mind when thinking about bolding and other effects. These changes should accomplish something – drawing the eye – and should have a distinctly different weight than surrounding text. Readers will immediately be drawn to text that is bolder, colored in a different way or significantly larger or smaller.

How big should the text be? That all depends on use. For blocks of text a good range for readability is 60 to 75 characters per line for website design. That number drops considerably (think more like 35 to 50 characters per line) for tablets and mobile applications.

7. Line Spacing is Important

Just as important as the size of the text is the amount of space between lines of text.

Sadly, there is no perfect formula. What line spacing should do is make it easy for users and readers to move through the text. Ascenders and descenders should not touch in large copy blocks. Spacing from one line to the next is often more pleasing when consistently spaced as well.

For body copy, many site developers and designer choose line spacing that is somewhere between 2 to 5 points more than point size of the type, giving each line room to breathe but not feel to widely spaced. Increasing the space between lines can make text easier to read if it feels cramped or causes the eyes to get tired. Further, consider adding double spacing between paragraphs to give text even more room.

8. Consider White Space

Text and other elements need space.

 Be aware of how text elements wrap around images or other design elements. Text that runs into or touches these items can look out of place and be difficult to read. Give it some room by adding padding to these elements – start with 7 points and increase or decrease based on text size.

9. Limit Text Effects

Bold, italics, drop shadows, animation. Don’t use them all at once. Special effects – those other than bolding or italics – are best left for display type. Effects can often make small type difficult to read. Too many text effects can be distracting and take away from the user experience. Use multiple effects sparingly and when in doubt, don’t use them at all.

10. Readability is King

The most important typography consideration is readability.

Good typography is often unnoticed, because a user or reader breezes through your site with ease. Poor typography tends to elicit a response, whether it is a click away from the site or just confusion. The most readable sites are simple. Create a set of style sheets to help you establish a set of typography rules for your project and stick to them.

Typography can be tough to master and there are a host of tools to help you start the process. Just as important is the “gut check” – how does the type feel with the design? Does it work with the product or message being displayed?


About the Author -

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. You can connect with her @carriecousins.

  • http://www.facebook.com/profile.php?id=100002873752674 Shahbaz Naeem

    Great article . . .

  • MikeP

    A basic article ruined by having social media buttons plastered over it. Not cool at all……

    • designsuperstars

      Yeah, there’s a problem with the floating bar, It seems that if you have the window minimized and then you make it full screen, the bar will hover above the article. This is what happened to you also?

  • http://twitter.com/vuksanov Dimitar Vuksanov

    Your kerning example has bad kerning.

559 Flares Facebook 21 Twitter 73 Google+ 7 StumbleUpon 443 559 Flares ×