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.

Want more digital strategy advice and insights?

Sign up for our newsletter.
Something went wrong. Please check your entries and try again.

Joseph Riviello

Joseph L. Riviello is the CEO and Founder of Zen Agency. Joe's agency builds websites and web applications that attract, engage, and convert. Joe has over 30 years of experience in entrepreneurship and he is an expert digital marketing strategist who specializes in conversion-centric e-commerce experiences and cutting-edge solutions that maximize growth and profit. Check out Joe featured on: Business.com, Redbooth.com, Kabbage.com, MaterialDesignBlog.com

Leave a Comment

You must be logged in to post a comment.

See more digital strategy posts



Why Your Brand Must Reduce Churn 

Why Your Brand Must Reduce Churn 

September 7, 2020
For most advertisers, the 80/20 rule is practically etched in stone: 80% of your revenue will be produced by 20%...
Reality Vs. Perception: Why You Must Use Data to Steer Your Marketing 

Reality Vs. Perception: Why You Must Use Data to Steer Your Marketing 

September 4, 2020
Before the term “digital marketing” even existed, things were pretty simple. In traditional methods of marketing, it was quite easy...
Zen Agency Receives Gold Certification in Sharpspring Partner Certification Program

Zen Agency Receives Gold Certification in Sharpspring Partner Certification Program

July 23, 2020
WYOMING, PA, July 14th, 2020 Zen Agency, a full-service web development & digital marketing agency, obtained Gold-Level Certification in Sharpspring’s...
5 Secrets of Successful Content Marketing Companies

5 Secrets of Successful Content Marketing Companies

January 10, 2020
As the landscape of business changes on a daily basis, the importance of your brand's online presence only grows. With...
WooCommerce SEO Secrets to Rank High in Google

WooCommerce SEO Secrets to Rank High in Google

May 14, 2019
WooCommerce is a great eCommerce solution for many reasons. But if you're coming to this blog, you're well aware of...