Identity Systems Series: Fonts

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.

Choosing fonts using Google 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.

Creative font interaction

What fonts are you loving – and hating – right now?
Green: I’ve been pretty obsessed with two serif fonts lately, Abril Fatface as well as Playfair Display.

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.

Did you like this blog? Read part one of our Identity Systems Series on color here.

Subscribe

The One North Ideas Update delivers each month’s latest posts on digital for PSOs—including industry trends, news and our latest research—directly to your inbox. Although it’s our goal to always include thought-provoking and compelling content, you can unsubscribe at any time. 

See our Privacy Policy to learn more about how we protect and manage your submitted data.

Hannah Green Art Director

As Art Directorr at One North, Hannah designs thoughtful, engaging and visually stimulating digital experiences. Leveraging her collaborative partners across pillars, she delivers innovative concepts that push her clients creatively and function seamlessly across all devices and platforms. 

  • Last thing you geeked out about: My tomato plant at home finally producing purple heirlooms… only to be destroyed by a tree rat (i.e. a squirrel) shortly after.
  • Favorite Chicago spot: It’s a toss up between Wrigley Field, my apartment rooftop or anywhere that serves a great dirty martini with bleu cheese-stuffed olives.
Alexa Tuskey Front-End Designer & Developer

As a Front-End Designer & Developer at One North, Alexa creates innovative and engaging digital designs for clients and One North marketing materials through creative insight and cross-department collaboration. Alexa brings an open-mind, an unbeatable attention to detail and fearless creativity to her role at One North. She enjoys being able to help her clients tell their story by interpreting their vision and bringing it to life within functional and creative designs.

  • Fun fact: I did my senior thesis on the evolution of hip hop music.
  • What did you want to be when you were little: The President of the United States

One North Interactive 
222 North LaSalle St, #1500
Chicago, IL 60601

+1 312.469.1740