Whether you are refreshing your firm’s creative or tackling a complete brand overhaul, being thoughtful when choosing fonts and typography is easy to overlook. And while it may seem that the only thing to consider when picking a font is legibility, there is so much more to choosing typography for your digital assets.
Art Director Hannah Green and Front-End Designer & Developer Alexa Tuskey explore the importance of fonts when building out an identity system and how typography can completely effect the look, feel and function of a brand.
What is a webfont and how are they used? What makes them different from traditional print fonts?
Green: A webfont is just a version of a font that renders across different browsers, many of which are based off traditional print fonts but have been revised to function digitally.
Tuskey: They take up less file space to render more quickly and come in different file types so they function across browsers. They’re also modified to read more easily on a screen, instead of, for instance, print.
Green: They also differ in application from traditional print fonts because there isn’t a lot of flexibility from character to character. In print you can easily control details like kerning and widow text instances while in digital, in particular responsive design, you cannot. This isn’t really option in digital, because it’s difficult to control where copy lands across devices when designing responsively.
What are some typographic best practices?
Green: First and foremost, make sure your typefaces will behave correctly and are supported across different browsers. Also, ask yourself how it will perform in terms of accessibility. Will it pass particular legibility standards? And, of course, you need to make sure it’s conveying the tone and brand of the client the font is being applied to.
Tuskey: It’s definitely a best practice to limit the amount of fonts you use on a site or in your brand guidelines generally. Not only is it bad for technical performance, but it’s visually confusing and can distract from your message. Stick to two – maybe three – fonts in your arsenal.
Where do you go to look for fonts?
Green: When I think about where to look for fonts, the sky is the limit. I find inspiration in old print projects I’ve done, famous typographers’ work, etc. I’ll also use Google Fonts pretty often and when I’m exploring interesting websites, I’ll apply developer tools to find out what fonts are being used on the pages.
Tuskey: Getting inspired is one thing, but actually choosing fonts can be tricky depending on your budget. You can find some really beautiful, hand-rendered fonts that have been converted for web use – but they can be on the pricier side compared to open-source pages that share their fonts openly. Typekit is one helpful resource for quality, low cost fonts.
How do you choose fonts?
Tuskey: You really need to consider the tone you’re trying to convey before choosing. Consider serif versus sans serif fonts. Serif fonts are more traditional and can convey strength, reliability, trust. The thickness of a serif font will also affect just how traditional it is. Thinner serif fonts tend to be more modern and sophisticated. Compare this to san serif fonts, which are considered more modern.
Green: It’s essential to consider your typographic hierarchy. You’ll want to account for every application of each font – either your typographical family or as a couple. You’ll want to identify how you want your headline, subhead, body, buttons, etc all look and how they function together on a page.
What’s at stake when choosing a font system
Green: Not to be overdramatic, but everything is at stake. You’re talking about the readability of your site, its performance and the brand identity being conveyed. Type choice can do just as much as color when it comes to projecting a firm’s brand, so it shouldn’t be taken lightly.
Tuskey: When you choose fonts without much thought, you run the risk of a disjointed brand and an identity crisis, which is bad for business.
What trends are you currently seeing in typography?
Green: The two biggest ones I’ve noticed are 1.) large typography and 2.) traditionally-styled fonts. I think large typography is a response to the overall design trend to keep things simple and because of the increased need for accessible designs. Sans serif (considered more modern) fonts were big for a very long time, so it seems serif are being re-introduced with modern twists to keep things fresh.
Tuskey: We’ve been seeing type behave as an artistic element to websites now. A single element paired over a photograph or with a gradient function or elegant CSS to communicate as visually stimulating, rather than just as copy itself.
Tuskey: I really like Merriweather, because it’s a serif font that comes in several weights, making it easy to flex to different brand needs. I’m also loving Muli, because it’s versatile with personality.
Green: That being said, I cannot stand Lobster right now. It is very 2013 and doesn’t function for a lot of reasons. I would also always tell people to avoid fonts that are recognizable in a prominent logo or movie, like Game of Thrones or Cheese Itz.
Tuskey: Any brush script is pretty ridiculous. It doesn’t fit because it’s trying to look handwritten, but because of the nature of digital fonts, it just looks inorganic. Also, I shouldn’t have to say this, but Comic Sans – don’t do it.
A font is more than copy; the style itself is a message that speaks to a larger idea as well and a font can greatly affect the technical performance of a digital experience. Typography is one of the biggest parts of design, so it should never be considered an afterthought while building out a brand’s identity system.