Importance of Typography in Web Design - Purple Cow Agency

Communicating With Typography In Your Next Website Design

Designing or re-designing a website, even with the help of a talented team of experts, can be a daunting task. There are so many things to consider and so many choices to make, between what to write and how to organize it and what colors to use and what graphics to place where, that typography can end up at the bottom of your to-do list. But what a mistake this can be! Typography can not only add great visual interest to a website, it can reinforce branding and can also contribute to clarity of information and navigation. Typography is that rare design element that can be both beautiful and interesting visually and functional and practical to contribute to clarity of content and navigation. If you’re looking at a new website or a major re-design of an existing one or are just considering ways to freshen up what’s already working, remember these tips to get the most out of what typography can offer.

Use a consistent typographic language

There are so many fonts available that are beautiful and interesting and creative, it can be tempting to use different ones on each page or for each new update to your site, but by doing that not only can you simply end up with a design that’s messy or confusing, you can lose out on the ability of typography to not just be beautiful, but to communicate specific functions beyond the actual words on the screen. By using the same fonts for certain elements of your navigation and for certain types of information consistently, your visitors will have an easier time finding the information they want and learning your navigation. Your users will, rather quickly, learn that a certain font at a certain size means a header, or that a certain font in a certain color is always a link, or that new items are always italicized, or whatever typographic language you use. This is especially true if you’re changing the navigation or your site in any significant way as part of a re-design. You’re bound to have some frustration with existing users having to learn a new layout and navigation, so let your new typography help them out and save all of you some headaches!

Decide on a specific font for your branding, and don’t go overboard

Visual branding is a key part to a unified look and message for a company, and typography should absolutely be included in that. You want a to choose a specific font that people will immediately associate with your brand, but avoid the temptation to pick something that is over the top and extremely complicated at the expense of readability. There are a lot of incredibly beautiful, extremely unique fonts out there, and there are a lot of amazingly talented designers who could custom design you something that was intricately detailed and gorgeous, but you have to remember that this is something that, ideally, the company is going to use in a myriad of different ways and at different sizes and potentially in different colors and in different contexts. This doesn’t mean you have to use a flat, plain, san-serif font if that doesn’t makes sense as part of the brand identity you’re working with, but don’t get caught up in the idea that whatever you choose has to be the most unique or artistic. Apple, Google, and Nike, among others, have proven that consistent use of a simple font can be incredibly effective.

Use typographic elements to communicate additional information

Typography can help you to create a visual hierarchy and lead people through navigation on your website, as well as emphasize important information, so use that to your advantage. Headings and subheadings become easier to interpret when the font size decreases as you go from heading to subheading to body text. Using a slightly different font or color on pull quotes or information boxes within an article can help them stand out and be clear as content apart from the body of the article. Important information will stand out in bold or italics or a larger front size, or a stronger style of the same font family that’s otherwise being used, or some combination thereof. Remember that people interpret font size and emphasis (whether italic or bold) as having meaning, so it’s important to avoid using these elements willy-nilly to add visual interest anywhere you think looks a little drab. Emphasis is going to draw the eye, so make sure you’re drawing the eye of your visitors to certain elements with a specific purpose. Also, remember to avoid underlining for emphasis on a website at all costs. If it isn’t a link, it shouldn’t be underlined.

Readability first

No matter how cool a font is, or how much you may like the way it reflects your brand and the personality and identity that you’re trying to express, readability matters. It doesn’t matter how pretty or interesting something looks if I can’t read the actual text that the typography is trying to communicate. As much as I’ve been pushing the power of typography here, and I really do believe in it and think it’s an underused element of website design far too often, you still have to fundamentally trust the content you have to share, even stripped of all its bells and whistles, and let it stand on its own to a certain extent. You can get away with more elaborate fonts for one off things where the font is going to be front and center and large, but if it’s just one element of a design it’s going to become too much and if it’s not at a large enough size it will be too difficult to read. As with so many things, everything in moderation.

Hopefully these tips give you some good food for thought as you consider your next website design or re-design. You certainly don’t have to do it alone, and contact us if it’s a project you’d like to turn over to trustworthy hands, but you can’t have too much good information. Have any examples of truly striking typography, or of elaborate typography gone horribly, tragically wrong? Share with us in the comments!

Let's talk aboutyour project.
contact us

Seen enough?
Let's collaborate!

    Full Name*
    Email Address*