5 Simple Ways to Improve Web Typography

Wdd Logo.
March 09, 2009

typographyType is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content — not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element?

Good typography brings order to the page and increases legibility. It allows people to process information faster.

A more scannable, readable site means happy visitors. Happy visitors return often, buy products, leave comments, and share the site with friends. See why it might be worth thinking about?

I could blather on forever about how far typography has come on the web, and how far yet it has to go. I have frequently bounced between web and print design. When you’re going from InDesign to TextMate, the limitations of web type are crystal clear.

But plenty has been said about what web type can’t do. This isn’t going to be another rant. Instead, let’s focus on a 5 easy fixes for the typographic eyesores that abound across the Web.

1. Use A Reset Stylesheet

Stupid, but true: No two browsers use the same presentation defaults. Differences in padding, margins, headings, and indentations are rampant. If you want your page layout to be more consistent across browsers, it pays to start with a CSS Reset stylesheet.

Use a reset stylesheet for better web type.

Two I recommend:

Yahoo’s CSS Reset Stylesheet
Eric Meyer’s CSS Reset Stylesheet

2. Watch Your Measure

Measure refers to the length of a single line of type. A longer line = a longer Measure. Studies have shown that for optimal readability, running text columns such as your main body copy should be somewhere between 45 — 75 characters (30 — 50 ems) including spaces. This is one of the reasons that fluid designs (ones in which the columns expand and contract to fit the browser width) are harder on the eyes.

Additionally, your leading should increase with the length of your Measure. Leading is the amount of white space between lines of text, and is controlled via the CSS line-height property. If you need to use an extra-long Measure, make sure your leading opens up.

Likewise, if you have a small column such as a sidebar with a short Measure, your leading should be tighter. I find the default value most browsers assign is a little too tight. A line-height of around 1.4em works well for most body content.

3. Tend To The Space Between

It’s not just about your text — its about the space that surrounds it. Too little space makes text hard to read, but so does too much. The key is to find a simple balance that guides the eye from one element to the next.

Whitespace Example

One of the common mistakes new designers make is to fill every inch of space. White space refers to the empty or negative” space around your content, and it is crucial. Take a look at a well-designed magazine such as Dwell or Good and you’ll see that even though it costs the publisher money to print each page, they leave abundant amounts of white space around the text. The page will be in balance and your eye will move from space to space effectively.

In addition to adjusting your line-height (as mentioned in #1), try increasing your padding and margins. Unless you’re trying to pull of a crazy visual trick, there should always be a good amount of white space around your text. Don’t let it butt up against other elements, especially images. Let your content chunks (headings, paragraphs, sidebars, etc.) breathe.

Mark Boulton wrote a very informative article about White Space for A List Apart, check it out.

4. Don’t Go Font Crazy

A good rule of thumb for any designer is: use no more than two font faces in your design. Two font faces can look very stylish. A List Apart uses variations of Georgia and Verdana to create an elegant and polished look. But continuing to add font faces to your interface creates unnecessary confusion. Similarly, avoid using too many font sizes, colors, or treatments on a page or in a paragraph or they will compete with each other instead of adding emphasis as intended.

Although font stacks and technologies like sIFR and Typeface.js allow you to specify just about any font you want as the default, resist the temptation to go wild with the body copy. Decorative fonts are best kept to headlines because they affect readability. Think about it — when is the last time you picked up a paperback novel set entirely in Comic Sans?

When creating font stacks, pay attention to the size of your pairings. Some fonts that look similar render at very different sizes. Verdana and Arial are a great example of this. Typetester is a great tool for comparing core web fonts and creating a successful stack. Another useful tool called Font Stack Builder shows you what percentage of users will see each variation.

Regardless of what fonts you decide to use, make sure they are not teeny tiny. I know its hard… tiny text looks cool. But think about the poor, squinting users! Keep body text above 10 or 12 pixels. If you insist on teeny tiny, at least use relative sizing for all those IE 6.0 users who otherwise couldn’t make it larger. Read Wilson Miner’s article on font sizes for a great take on the debate.

5) Don’t Neglect The Details

The client provided the content. Adding it to the site is just a matter of copying and pasting, right? Wrong, wrong, wrong. This is a trap web designers fall into all too often.

Even those of us who diligently add heading tags, format each paragraph and organize bulleted lists with care forget some important typographic details. Many (including me) missed out on formal typography training, so you can’t blame us entirely. But the devil is in the details. Its time we embrace these basics:

Use smart quotes

What’s the difference between smart quotes and dumb quotes? Smart quotes (also known as book or curly) are curved and have both an opening and closing style. Dumb (straight) quotes are usually straight up and down. An apostrophe is typographically just a single quote so the same problem applies. A dumb quote (also called a prime) should only be used between measurements. For example, 64″ uses double and single prime quotes.

Web Typography Smart Quotes

Unfortunately our keyboards default to prime quotes. Microsoft Word and other text editors just correct them for us as we write. Adding smart quotes to HTML pages requires more work from the web developer because you need to use markup to produce opening and closing quote symbols. I see the same problem with em and en-dashes, ellipsis, trademark and copyright symbols. Coders take the easy way out by replacing them with hyphens, multiple periods, a large TM and the infamous ©. Using the right symbols does make a difference visually. Do it right and make editors everywhere smile.

How to make smart quotes:

#8216; = opening single quote
&#8217 = closing single quote
&#8220 = opening double quote
&#8221 = closing double quote

I know — no one wants to spend all day hunting down quotes. Luckily, tools like SmartyPants and Textism can do much of the legwork for you by automatically formatting text that includes smart quotes and the like.

Read The Trouble with EM and EN from A List Apart for more detail on the subject and the UTF8 character encoding for most common special characters.

One caveat — lots of CMS text editors (like the one this site uses) won’t let you implement smart quotes without extra plugins. Sad, but true.

Stop putting two spaces after a period. Please! It’s not necessary and its actually rather annoying.

On your links, use border-bottom: 1px solid instead of text-decoration: underline. Underlines can run through the descender characters (g, j, p, q, y) making them hard to read, especially when using smaller font sizes.

And while it has nothing to do with typography, running a quick spell check never killed anyone. Even if all you did was copy and paste, a spelling error that slips through to a live site reflects badly on everyone involved.

Pay attention to those 5 fixes and your site designs are sure to improve. Remember that these are just a starting point. Good typography is a learned skill just like anything else, and it requires study and practice. Always keep an eye out for sites that are getting it right and make note of what they are doing. Need inspiration? Check out the sites below for examples of great web typography and post examples you find to be inspirational.

Inspirational Type:

Written exclusively for WDD by Mindy Wagner.

What do you think of these simple ways to improve your typography? Do you implement them on your websites? We’d like to hear from you!

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…