Web Typography 101

Correcting Common Beginner Mistakes

Typography is a powerful artistic tool to impact your audience. It can completely change the look and feel of a layout and set a specific mood. In this lesson, we will learn how to avoid some very common beginner mistakes and learn some great tools and techniques to boost our skill level.

Basic Rules of Type on the Web

Typography is a powerful artistic tool to impact your audience. It can completely change the look and feel of a layout and set a specific mood. Unfortunately, since this is not a typography class, we can't devote a huge amount of time to this subject. But, hopefully in this lesson, we will cover some of the most common mistakes beginners make as well as some great techniques you can use to boost your design skills to the max.

There is a really great article on Web Design tuts that discusses some beautiful and affective ways to use type on the Web. I suggest that you ingrain these rules into your head as they can take your design from amateur to professional very easily. Here it is: Choosing the Right Font: A Practical Guide to Typography on the Web

Quick note: You will be tested on the materials from this article.

Typography Dos and Don'ts

Now for a list that I have personally put together for the most common typography mistakes I see from students. Please read over these and become very familiar with these rules, as I will mark your future projects down in points if you are to make any of these mistakes. 

Also, you will be quized over these rules as well in this week's lesson.

Do NOT use the stair step arrangement for text.

One thing that beginning designers want to do is create a text arrangement in which a sentence is broken up into multiple lines and each line is indented further and further to the right, creating a stairstep pattern. I personally hate this arrangement, because it creates empty, unused space to the bottom left and upper right of that arrangement. I'm not really sure why people like using this layout, but I've never seen it used in any professional context for any reputable company. This layout screams "amateur!".

Do NOT use the following fonts: Comic Sans, Papyrus, Zapfino, Myriad Pro, or anything curly.

These fonts are all on my "garbage" list.

Most everyone has heard of Comic Sans, and it has gained a notorious reputation even among nondesigners. To get a more in-depth understanding of why Comic Sans is so despised in the design community, watch this video.

Papyrus is a close second, and is used even in many professional contexts. I have even been guilty of using this font in middle school and high school for reports. I'm not really sure what the appeal is for these fonts, other then to create an intentionally hand-made look. Making something handmade is fine, but using these particular fonts, which are so widely known, is sort of like wearing white socks with black shoes. It's not bad from a strictly utilitarian point of view, but you will make certain anal-retentive designer-types wince.

Zaffino became a font that I've despised for the past three years or so. It is a very thin, almost illegible font, that people seem to love to use. Even when used just as a header, there something about this font that I just hate. Even more so, some people even try to use this font for paragraph text, which becomes almost illegible.

Myriad Pro isn't nearly as bad as these first three, but since it is typically used as the default font for illustrator, I tend to avoid it. To me, it is like the cheap man's Helvetica. It has many of the same aesthetic qualities, but not the same level of craftsmanship or elegance. Please don't use anything curly.

Understand the difference between Serif, Sans Serif, Script, and Decorative.

First off, these are the four basic categories that most any typeface can be placed under. Each of them has its own unique qualities and characteristics and can be used appropriately or inappropriately depending on the context or style.

Serif

Serif fonts typically have slabs or feet or whatever you prefer to call them. Some very popular examples of serif fonts are Times New Roman, Courier, Georgia, or Baskerville. Serif fonts are typically used in print, and especially novels, because the seraphs help guide the reader's eye from one word to the next. Serifed tends to have more of a sense of tradition, establishment, and respectability.

Sans Serif

"Sans" means "without", and therefore this category type does not have serifs. Sans Serif is typically used in digital contexts (on computer screens, as opposed to print) since those situations are resolution dependent. This means that we have a limited number of pixels to work with, and therefore need to be very efficient with them when creating our letters. These are especially much easier to read at much smaller point sizes. With serifs, you have many more pixels to cram into a letter, thus making them much more cluttered and harder to read. Sans Serif typically has a more modern, clean, sophisticated feel to it. Some very popular examples are Helvetica, Arial, Verdana, and Myriad Pro.

Script

Script basically refers to anything that looks handwritten. Designers will typically use script fonts when wanting to get a sense of authenticity or craftsmanship. Script fonts can vary widely in terms of their style, ellogance, texture, brush type, and thickness. some subcategories are calligraphy, graffiti, or handwriting. Some popular (or notourious) examples are Comic Sans, Zapfino, Papyrus, or Marker Felt. 

Decorative

Decorative fonts are typically used for headers, especially in posters or album covers. They tend to go a much more illustrative route and tend to break a lot of rules. You generally want to avoid using decorative fonts for paragraph type, since legibility can be a major issue.

Do NOT use decorative fonts for paragraphs of text.

As mentioned in the previous section, the decorative fonts tend to be a lot more illustrative, and when reduced to the size typical for paragraphs, can become illegible.

Use all lowercase, all uppercase, and mixed case intentionally and consistently.

One technique that can be used to create a sense of hierarchy of importance and text is how we use uppercase and lowercase. Kanye West is infamous for using all caps in his blog entries. Many older folks tend to do the same thing as well. The reaction people have when reading is that they imagine that the writer is screaming at them. As a result, if you want to get peoples attention or make something seem very important, using all caps is a very effective way to do that.

When it comes to logo design, many companies are switching to an all lowercase arrangements, since this tends to be much more approachable and modern. It's most likely because when people are texting or IMing (instant messaging) to each other, they tend to leave capitalization out since it is one extra level of mechanics which can slow down the typing process. Since that is the context for using all lowercase, we tend to associate that with person-to-person dialogs or less formal situations.

When using all caps, especially in logo design, it can give the sense of authority, dominance, and strength. Therefore, if you are a construction company or manufacturer of heavy machinery, this may be more appropriate for you.

Using all caps can also be good since it does not create an un-evenness above and below the x-height by creating ascenders and descenders. What this basically means is that all the letters are going to be the same height no matter what. When you're dealing with lowercase, you have letters like l, h, and t with ascenders, which stick up above the rest of the letters. You also have descenders such as in the letters g, y, q, which drop below all the other letters. This can create issues, if you are stacking lines of text vertically.

Do NOT use small caps.

Small caps is when you type something in all capital letters in the first letter of the word is larger than the others. I haven't figured out the exact reasons why this bothers me, but I do know that I rarely see it in professional contexts and that I personally do not like it.

Do NOT underline your text.

Underlining text creates visual clutter, and can also distract from legibility. Again, I rarely see this in professional contexts.

Do NOT highlight your text.

Although this has been found to increase call to actions in many persuasive sales letters online, visually, you can come across as very tacky and tasteless. If you should use highlight, be sure that you have a little bit of space of highlighting around the letters instead of cutting off the highlight immediately at the top and bottom of the letters.

Do NOT turn your text diagonally.

This can be done in very rare cases to create more of a fun or dynamic feel. However, most beginning designers will use this technique very improperly and can hurt their designs more than help them. Similar to the stairstep arrangement of text, creating diagonal text causes there to be empty, unused space in the opposite corners around the text. Typically, the only time you want to use diagonal text is to create a sense of movement, or unease.

Do NOT use faux bolds or italics.

Faux bold is when Photoshop or some other program takes the standard thickness of fonts and applies its own algorithm to it to make it look thicker. This typically causes the text to look more rounded, balloon-like, and unprofessional. When a typographer creates a typeface, he or she will usually include multiple styles or sets for the various contexts such as italics, light, and bold. These various styles are handcrafted and designed very carefully and specifically to create the best results for each style. You should not make something bold or italic unless you know that you have those styles included in your font set. Otherwise, the computer will use faux bolds and italics as a replacement.

Do NOT have text stretch across the entire layout.

When people are reading from one side of the page to the other they have to immediately bring their eyes back to the left edge to continue on the very next line. The further across the page they have to look, the more difficult it's going to be to keep their place. You will notice, if you have ever read the Bible, the text is very small, and all the pages are broken up into two columns. By having two columns, the reader has a shorter distance to bring his eyes back and forth, and therefore are able to read from one line to the next much more easily. Many magazines and newspapers do the same thing. The only case where this can actually be pulled off successfully is with header text, since you usually do not want to have a header run more than two lines.

Do NOT mix very similar fonts.

Although you shouldn't use more than three fonts and layouts, those three fonts should be very distinct from each other so as not to mix them together. If you take three very similar fonts such as Times New Roman, Georgia, and Baskerville, and mix them all together, it creates the appearance of inconsistency and unprofessionalism, because it is very difficult to tell whether they are distinct fonts or if the type is just inconsistent. 

Do NOT use more than 3 typefaces in a site or layout.

By having too many typefaces, you are not focusing your brand sharply enough. Don't give the viewer too many different styles or influences to look at, or else your layout will look like it has no direction. Remember, less is more.

ALWAYS make sure text is legible.

Legibility should be the number one goal for your text. This doesn't just mean making sure that it's easy to read, but also so that all the typographical elements and techniques help emphasize the message behind the words. For example, if you write a sentence like "whisper your message gently", you don't want to use, bold, and arrange it diagonally. This hurts legibility, since the viewers mind is getting two different messages at the same time – one literally and the other visually.

Avoid large amounts of text at all costs, unless, of course it is a blog entry or news article.

How often have you gone to a website that had thousands of words and read through every single sentence? This rarely happens with web users, since when browsing the web we are typically in a scanner mode, meaning that we are searching for something specific and want to get there as quickly and efficiently as possible. Only if someone is reading a news article, blog, or doing research, will they want to have large bodies of text. Otherwise, keep everything to the point and don't write any more than you yourself would read when visiting a website.

Make use of bolds and different sizes.

This plays into the role of hierarchy of importance. When writing a section of text, make use of things like bold, colors, and sizes to help break that section of been to more bite-size pieces. So many beginners make the mistake of having an entire section of text the exact same size, color, and thickness. This creates one big visual chunk that all runs together.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu