Bronwyn Gruet
Designer and Illustrator

Thoughts about design, illustration and inspiration

How We Designed a Typeface for Our Brand

 

 

Over the last year, the design team at Creative Market has been hard at work finding opportunities to push our brand and product design forward. So far, upping our typography game has been at the center of improving our design system.

1. We cleaned up our logoscript.

2. We said goodbye to Museo Sans and implemented a brand spankin’ new system font: Averta.

….And for our third act? We designed a hand-drawn brand font.

But…Why?

There’s a substantial segment of our community that discover Creative Market through the huge catalog of handmade products our shop owners create and sell on the marketplace. When we built our new brand illustration system, we wanted to honor the value of that handmade aesthetic, and make sure we were creating a style that incorporated bespoke touches and textures.

Once we found our new illustration voice, it felt like we should take the natural next step to create a complementary typeface that shared the sensibilities of our brand illustrations. Our goal was to to design a unique, hand-crafted typeface that reflects our marketplace, exudes our brand voice, and pairs well with our brand illustrations.

Setting the Ground Rules

Even though we all got very excited about whipping out our brush pens to start creating this branded typeface, we didn’t want to design anything that would draw too much attention to itself. This new asset shouldn’t distract from or compete with our shop owners’ work when used within the marketplace. With that in mind, we set a few ground rules for the role our new typeface would play in our brand design:

  1. Simple is best
    We have some fun plans in the works to expand on this initiative in the future, but for our immediate purposes, we decided to keep things simple by focusing on a sans serif typeface, all upper case.
  2. Hand-drawn, not handwritten
    This typeface isn’t going to serve as our hero typography. It’s more like a fun and friendly sidekick within our brand design work. Instead of making something highly stylized, we were aiming for a structured sans that tastefully exudes a hand-drawn, friendly feeling.
  3. Keep it clean
    As a supporting brand asset, this isn’t a typeface that will carry huge headlines. We decided to keep texturing in the letterforms to a minimum to make sure it’s legible at small sizes, and to keep it optimized for embedding on the site.
  4. Slightly condensed
    Our system font, Averta, is a geometric sans. Steering the proportions of this typeface toward a more condensed sans would open up more possibilities for the role that the new brand font can play in our design system.
  5. Complementary to our illustrations
    This initiative spun out of our illustration system revamp, so we wanted to make sure the choices we made with type were informed by the characteristics of our new illustrations. Our brand illustrations and new typeface needed to carry the same energy and spirit.

Get sketching!

To get the ball rolling, we experimented with different tools to find gestural qualities that felt right. We wanted to honor the handmade aspect of the work. Any edge inconsistencies or small angles should come from an analog application of pen to paper. We ended up really liking some of the low contrast, bold marks these pens created.

2.jpeg

We tested a few different stylistic directions: condensed and rounded, low contrast condensed, high contrast letterforms, stylized terminals, and super simple monoline letterforms. We conducted a group critique the get the team’s gut take on the different styles, and decided to move forward with a simple, mid-weight, low contrast condensed style.

3.jpeg

Next, we shifted focus to find the right proportions in a condensed style. Instead of starting with individual letters, we picked a phrase to use across the experiments. Each style was paired with a couple of our brand illustrations to get a sense of what kind of type felt good when in the same context as an illustration.

4.png

We also experimented with different cross bar heights against the cap heights, different levels of low contrast, and a couple different glyph styles for the letter A.

5.png

After narrowing down to two final directions, we moved on to tweaking the weight, cross bars, and tiny personality characteristics. We kept the very slight angles in the terminals of some of the letterforms, since it provides a nice visual connection to the physical drawing medium. We ended up building out two lean fonts to test our final two directions in more contexts.

In context, our slightly less condensed option was feeling right at home with illustration work and at small sizes. We built out a set of diacritics, numerals, and refined some of the personality touches in the full set of letterforms.

8.png
7.png

After finishing out the set of vector letterforms and symbols, it was out the door for kerning.

Screen Shot 2018-05-15 at 9.48.29 AM.png

Power to the Creators

After a few rounds of feedback and some fine tuning, we exported our brand font 1.0. We’ve got big plans for future phases of this asset, which will help us add a handmade touch to the design work we do in marketing and product.

PTTC.png

Keep an eye out for this friendly little sans in brand design work!

 
Bronwyn Gruet