Snoack Studios

»  The Blog

Top 10 Typography Mistakes To Avoid

design | web design by Shannon Noack on March 21, 2011 | 2 Comments

typography Typography is one of the most important design elements on your website, and it plays a big role in your site’s functionality and usability as well. There are a few guidelines that you’ll want to abide by in order to keep your site user-friendly and easy to read, and we have lots of recommendations and tricks to help you spice it up and make it fun to look at as well. Remember, good design goes hand in hand with great typography.

Read on to see our list of typography mistakes you can make with your website, and how to avoid them for a more beautiful site.

1. Not utilizing headlines

Arguably this is the biggest mistake I see on websites today. Headlines can incorporate different styles and sizes that allow you to format your text and make it easier to read. One large block of text, even if separated into multiple paragraphs, is tough for your eyes to look at and read for very long. If you include headers, they break up the space and allow your eyes to read more comfortably. Most content management systems make this nice and easy for you to utilize with headings 1-6.

2. Too many fonts

Different fonts should be used sparingly. It’s okay to pair a serif with a sans serif font, and to use a few choices within one website, but don’t mix and match within the same type of copy. For example, headlines can be a serif font and used with sans serif body copy, that works well. However, don’t make one paragraph serif and the next sans serif, unless you want it to stand out for some reason. Similar types of text should be global across your whole site and controlled by the stylesheet so global changes are quick and easy to make.

3. Bad color choices

Text needs to be easy to read in order to deliver a powerful message to your users and color is a big factor in readability. If your color choice is too similar to the background it will be tough to read so make sure if your background is light, your text is dark or vice versa. Also, certain colors vibrate with one another causing your eyes to hurt, like red text on a green background so avoid color choices if it’s tough for your eyes to look at for very long.

4. Poor organization

Organized text will be read more than unorganized text so it’s an important thing to think about. Utilizing text styles will help with this and encourage people to read your text by making it easier to look at. These include using bold and italics for important items, making bulleted lists as needed, and making sure your text is laid out in an overall organized manner that makes it easier for your users to read.

5. Too much text

Even if you have the greatest text on your website for your audience, they won’t read it if it looks too long. People tend to scan things online, but if you make it short enough and to the point, they will read it and pay better attention to what you’re saying. Look through your current site and see if you need to trim down any of your site’s text. If you don’t want to read through it to do a quick check, chances are others aren’t reading it either.

6. Poor spacing between lines

Always err or on the side of too much space between lines when making this decision. Tight spacing between lines makes text very difficult to read. This is another text style that should be global and controlled by your stylesheet for the whole website so changes to the whole site are easy to make and consistent.

7. TOO MANY UPPERCASE LETTERS!

As a general rule of thumb, uppercase text gives a lot of emphasis to the text it’s applied to. Acceptable uses are: used as a style on headlines or a short phrase in a paragraph of text to make it stand out. Never bold an entire paragraph or multiple things within a paragraph because it will just make reading more difficult on your users.

8. Too much of a good thing

Falling right in step with number 7, using too much of one thing usually doesn’t work well. Too much bold or italic text, and too many headlines are all bad options. Use bold, italics and headline styles enough to make your copy easy to read and look at, but don’t cross the line the other way by giving emphasis to too many things. Your eye just doesn’t know where to look when you do that and people won’t read your text.

9. Centering text

People seem to love centering text although it’s generally not a strong option for body copy, headlines or anything on your site. Centering should be used for emphasis or layout purposes, but should never be used as a global style. Body copy is much easier to read when it’s left aligned, because your eye is used to seeing that. Even right aligned text is easier for your eyes to read and is considered a better design choice.

10. Two spaces after sentences

This is a pretty common mistake because most of us were taught to do this back in grade school. However, it’s not common practice anymore and makes your copy look outdated. Some content management systems don’t even allow double spaces anymore and take them out automatically. Use one space to make your text look more modern and fresh.

Have you made any of these mistakes above? Luckily they are all relatively easy to fix. Now that you know what to watch out for, your text can be stronger and easier for your users to read, creating a more powerful site overall.

What’s the worst typography mistake you’ve seen on a website recently?

2 Comments »

  1. Glenn Harmon
    March 21, 2011 @ 10:52 am

    Good list. I agree with everything on here, although I do find #10 to be the most interesting because it goes against the MLA and APA writing styles that a lot of people were required to do for their papers in high school and college. Thoughts?

  2. Shannon
    March 21, 2011 @ 11:36 am

    Thanks Glenn, glad you enjoyed it! You bring up a good point, and that’s exactly what point #10 is all about. They taught us one thing in school, but the internet is not an MLA paper, it’s a different format altogether. Just like MLA and APA are different from one another, the internet’s format is different as well. Although I do believe both MLA and APA ask for one space as well: http://grammar.quickanddirtytips.com/spaces-period-end-of-sentence.aspx. Two spaces after a period actually stems from typewriters and their monospaced fonts. That article does a great job of explaining it. Hope that helps!

RSS feed for comments on this post. TrackBack URI

Leave a comment