OddBird

Open Brand Identity Design: Please Steal These Ideas

by Sondra Eby in , .

How to choose evocative and accessible fonts and colors for your website brand identity.

How do you choose the best fonts and colors for a brand identity among the thousands of options available on the interwebs these days – fonts and colors that perfectly express the mood you or your client want to evoke when users encounter your company – while also meeting accessibility standards, and standing out from the masses? OddBird tackled this question as part of the open redesign process of this, our OddSite.

Whether you’re starting from scratch or rebranding like us, use this step-by-step guide to help focus and direct your decisions. I’m focusing on website branding in this two-part series, but many of these ideas apply to print as well. Feel free to use this guide and these resources with your team. Happy thieving!

Part 1 – Web Typography and Typeface Pairing

Step 1 – Define Brand Goals

It’s hard to know whether you’ve found what you’re looking for unless you first know what you’re looking for. Ask yourself or your client questions like these: What is the personality/attitude of the project? What is it not?

After a review of our OddSite Brand Goals, we knew we were looking for type families that conjured the ideas of trustworthiness, skill and high standards without arrogance or that rectangular corporate look. All of that plus a dash of our odd, people-first personality (though we agreed any typeface termed cute or flashy would be going too far).

Step 2 – Play with Typography Options and Typeface Pairings

Now the fun part! Typography is a delight, and there are so many choices with unique associations and histories and uses. Serifs make long chunks of small text easier to read. Typefaces like Times New Roman, Georgia, and Baskerville have been around forever and are often used to present serious news. Associations like classic and trustworthy spring to mind. According to a study by Errol Morris, “Baskerville, a 250-year-old serif…was statistically more likely to influence the minds of readers than Computer Modern, Georgia, Helvetica, Comic Sans or Trebuchet.”

/static/images/blog/2017/typography/librebaskerville.jpg

Google Fonts – Libre Baskerville

On the other hand sans serif, hand-drawn typefaces like Amatic SC are personal and friendly and bring to mind trendy indie movies: Life Inside Out, Frank. Amatic shines in titling, but would make my brain hurt if I had to read several paragraphs at 14px size. Always check the description for each typeface to find out what it was designed for and whether it is accessible at small sizes.

/static/images/blog/2017/typography/amatic.jpg

Google Fonts – Amatic SC

Dive deep and luxuriate.

7 Resources – Free and High Quality Typography and Typeface Pairing

Font Squirrel

Font Squirrel is my go-to resource for typography. Curated for quality and free for commercial use, Font Squirrel’s compilation of typefaces is easy to filter and download.

/static/images/blog/2017/typography/fontsquirrel.jpg

Fontspring

If you can’t find the perfect typeface on Font Squirrel, try its sister site Fontspring. Their lists of thousands of high quality typefaces aren’t free, but Fontspring has done the mind numbing work of sorting through licenses to make the purchasing process straightforward and easy to understand for you and your clients. Proxima Nova is a personal favorite that OddBird used for the CoachHub app.

/static/images/blog/2017/typography/fontspring.jpg

Adobe TypeKit

If you already have an Adobe Creative Cloud subscription, then you can use TypeKit fonts in your Adobe software and commercial web and/or print projects. Double check the licensing details before presenting a TypeKit font option to a client. You may find some TypeKit fonts available for free on Google Fonts or you may run into expensive and complex license restrictions.

Since OddBird already subscribes to Creative Cloud, I found several font options there: Freight Sans and Freight Text, Abril and Raleway, Merriweather and PT Sans. Not all of these typefaces made it to our final round of element collages, but it was an excellent place to start. TypeKit Design Gallery is an inspiration for typeface pairing as well.

/static/images/blog/2017/typography/typekit.jpg

Google Fonts

Google Fonts’ collection of free, open source typefaces is an excellent resource. These fonts are all designed for the web, so you can be sure you’re getting a legible, high quality typeface. I love reading about the foundries and designers who designed each typeface and why. These descriptions are a handy resource when you need to explain to clients how your typeface choices relate back to their brand goals. Google Fonts also offers typeface pairing suggestions with each specimen.

/static/images/blog/2017/typography/googlefonts.jpg

Typewolf

Typewolf is the first place I go to find lovely typeface pairing with samples from live websites as well as expert recommendations. I discovered Freight Sans and Freight Text on Typewolf.

/static/images/blog/2017/typography/typewolf.jpg

Font Pair

Font Pair is exclusively for pairings of Google Fonts. I love the stripped down design. This is where I found the Raleway and Merriweather typeface pairing, one option we considered for OddSite. Unfortunately, this pair didn’t make the final round of cuts.

/static/images/blog/2017/typography/fontpair.jpg

Carrie Dils

I found Carrie’s blog on TypeKit typeface pairing to be a very informative and hilarious read. She provides intriguing insight into why her pairings work well together.

/static/images/blog/2017/typography/carriedils.jpg

Step 3 – Test Typography and Pairings in Context

I can spend hours browsing typography websites. To really evaluate whether a particular typeface will work for your project, I strongly recommend testing it in the context of your logo or website. Try out various weights – bold, italic, condensed – and sizes.

“In many ways, the font size is not as important as it used to be, because of the increased customizability of browsers and assistive technologies. However, it is important that your design accommodate increased text sizes without loss of readability or functionality.”WebAIM

Additionally, avoid using all caps wherever possible. It’s more difficult to read. Plus, IT LOOKS LIKE YOURE SHOUTING.

OddBird borrowed ideas from Vox Product’s process to test our typography options in context. Our design team created typography element collages, each using the same content from our blog. Presenting different typeface families in the same context also made it easier for the rest of the Birds to evaluate the options.

Stacy, Miriam, and myself (Sondra), the three OddBird designers, each designed two or three element collages. Then we met and eliminated all but the best four before presenting to the rest of the Birds. Each of the collages featured serif fonts – trustworthiness is a brand goal – with a twist.

/static/images/blog/2017/typography/elementcollagecollage.jpg

Browse our full element collages in our Behind the Scenes post.

Step 4 – Vote Remotely Using…GitHub?

All the options are so amazing for different reasons. How do you narrow to just one typeface or a single pair? (And narrowing down is important for accessibility.)

Using too many font faces can create a confusing visual layout, which is bad for all users, but may be especially difficult for users with reading disorders, learning disabilities, or attention deficit disorders.”WebAIM

To keep the process moving forward, it helps to take a vote. There are many ways to take a vote. Dotmocracy is a classic for team voting.

The Birds are spread out across five states and three time zones, and while we love dot-voting, we needed a web tool to help out. We also wanted our OddFriends Slack channel members to weigh in. After looking at several apps, we decided to try using GitHub Issues comments and emoji reactions. Everyone got two votes and the process worked brilliantly with the winning typefaces receiving six thumbs up.

/static/images/blog/2017/typography/github.jpg

Pros and Cons of Freight Sans and Freight Text Font Pair

And the winning pair is…

OddBird chose Freight Sans for headlines and Freight Text for the body. Fun without being flashy. Professional without being stuffy. Trustworthy yet odd. Easy to read at a broad range of sizes. These typefaces embody the essence of OddBird. Being from the same foundry and family, the visual harmony is effortless.

/static/images/blog/2017/typography/freight.jpg

“Designed for warm formality in text and an authoritative, helpful tone in display, Freight Sans eschews mannerisms of form in favor of a studied balance of organic and geometric shapes.”Webtype

Warmth, authority, helpfulness: a very accurate description of what OddBird would like our users to experience when they work with us and land on OddSite making Freight Sans an obvious choice to meet our brand goals.

“Freight Text series was designed for extended reading in periodicals and data-intensive documents.”Typedia

Freight Text was originally developed for print, and we love the classic feel this evokes, but it’s also very easy to read online, especially for large chunks of text like this blog post. Freight Text italics reminds us a bit of Libre Baskerville – the font OddBird used previously, but Freight Text has a little something extra – rounded edges, subtle flourishes – that sets it apart. Unfortunately, Freight Text lacks an amazing ampersand, so we intend to create a custom font stack and continue using Baskerville’s ampersand.

Also, we’re suckers for fonts with lowercase numerals.

/static/images/blog/2017/typography/numbers.jpg

Freight was developed by Darden Studio and is available at Phil’s Fonts as well as through TypeKit. Without a TypeKit subscription, the Freight licenses may have been more of a hassle than we wanted to deal with, requiring monthly pageview tracking. With TypeKit, we were golden.

/static/images/blog/2017/typography/darden.jpg

Getting Personal

I’ve loved typography since I was very young. Just for fun, here’s my first hand-drawn alphabet from fifth grade.

/static/images/blog/2017/typography/alphabet.jpg

What Are Your Favorite Typography Tools?

OddBird loves typography, and we’re big fans of sharing resources. What font sites do you use? What is your favorite tool or method for typeface pairing? Let’s talk web typography on the OddFriends Slack channel. Typography nerds unite!

Part 2 – How to Choose Brand Colors for Your Website

Coming Monday!

Sondra Eby Sondra spearheads the design process through user testing, brand development, and interface design. She has been creating custom brands and integrated web graphics for over eleven years. She has ...

OddSite Re-design Timeline

Let’s Build Something Together!

We want to hear all about your software ideas. Fill out our contact form, join our public Slack chat, or tweet @oddbird to start the conversation.