Web Design Checklist: Typography is Essential

Note: This is part 3 of our Web Design Checklist Series

Typography is one of the most essential elements of great web design. It’s one of the most powerful ways to elevate the quality of the appearance and functionality of your website. The best designers put great thought into their typography because they know that it can be the difference-maker. The best designers also know that typography isn’t as simple as choosing a font—they know it’s more than that. For those that don’t understand the design process, typography can seem unimportant, but you are not taking the design of your website seriously if you don’t have at least a basic understanding of typography. Almost every website has this one element on the page: text. A website, if you really think about it, is nothing but a communication channel. Aside from videos or pictures that may be on the page, text is the primary method of communication that you have. And that communication is critically important, though it may seem trivial upon the first glance.

It’s more than choosing a nice font

If typography was as simple as choosing a slick or pretty font, the design process would be a whole lot easier. If you want to simplify typography, you can boil it down to these two things: functionality and aesthetics. Functionality: Making sure the text is readable, that it catches the attention of your visitors, and that it can be read across all browsers and mobile devices. Aesthetics: Making sure the text is presentable, incorporating it into the look and character of your website. Understanding that good typography is essentially great functionality + aesthetics will really make the process easier for you. Focus on readability There are a few salient points to remember when we think about typography. Designing for the web is hugely important. Typography for the web is different than it is for print design. Print is much easier on the eyes (it’s much healthier to stare at a piece of paper than at a computer screen), and people are more likely to skim when they’re on the web. The typography that you use has to be optimized with the web user in mind. The majority of your website visitors will skim and scan your text. Your typography needs to meet these modern standards. The best way to do that is to have a hierarchal structure to your typography. A hierarchy may look like this: Main headlines>subheadlines> actual text that goes on the page. Hierarchy subtly communicates to the visitor what is the most important and what they should pay attention to. The hierarchy can be identified by several factors, such as..

• Size
• Color
• Spacing
• The actual typeface
• Positioning

For example, the size of the headline should be greater and more pronounced than the body text that goes on the website. The coloring could be different as well. Since you are designing for readers who like to skim and scan, your headlines need to stand out. There needs to be space between the headline and the body text. In some cases, the actual typeface of the headline will differ from the rest of the text on the page. With all of the different elements (size, color, spacing, typefaces, position, etc.), contrast should be used effectively to highlight the parts where you want the customer to see. Typographic hierarchy, when used correctly, accomplishes this. Can the text be read across all platforms (different browsers, mobile devices,  etc.)? This is pretty self-explanatory, as it requires you to test your typography with different mobile devices and browsers. Don’t overlook this, because browser size and the dimensions of different devices can vary dramatically. Test this vigorously. You want to ensure that your text can be seen as intended. How typography fits into the look of your site The look and style of your typography will mold the character of your site. The text is one of the first things that the visitor will notice. Since this is the case, you need to choose a typeface that will communicate the style you want to portray. If you want your site to have a certain look, then your typography needs to match that look. The typeface cannot be at odds with the look you are trying to portray. If you want your site to look young and vibrant, you would use an interesting typeface, with exciting colors. You need to try out different typefaces, with different colors, to find the “sweet spot” for your site’s appearance. Nailing down the typography is crucial if you want to elevate the look and functionality of your website. Typography isn’t merely the font you select– it is a powerful building block for your design process. Don’t make the mistake of overlooking it.