Goodbye Museo, Hello Averta
For as long as I can remember, Creative Market has used Museo Sans as it’s main typeface. In fact, if I look back, way back into the archives, Museo was indeed used in some of the original mocks!
Whoa. That’s a long standing history of dating the same typeface. But things are changing and today, we’re breaking up with Museo Sans. Don’t take it too hard Museo, it’s not you, it’s us.
Why the change?
Great question. The short answer is, we’re always itching to move our UI forward. We’re 5 years strong into our current iteration and while it’s worked extremely well for us, we are actively working towards improving our aesthetic–and type is a major cornerstone of that. So major in fact, that type is marking the beginning of all future UI changes. Each iterative change will build on the previous, and today we start with type.
A Design Team Initiative
This entire project started as a design team initiative. That is, side projects we work on outside of our weekly projects and tasks. Many of our design team initiatives are focused on what the future of Creative Market will look like and as much as we’d like to make all of these changes in one huge sweep, that wouldn’t be the wisest move. We need to balance our advancements in the UI with crucial measurements against our bottom line–we are after all an online marketplace.
Setting Goals
To kick things off, we set some simple goals. The new typeface needed to be a sans-serif and it needed to have some personality but not so much that it distracted from the content of the website. Our marketplace is full of incredible digital assets being sold by independent creators, and the focus should always be on the products and shop owners that make them. We also had some technical goals. We wanted to reduce the load time of carrying a lot of font weights and we wanted to hopefully self-host, to eliminate any scripts that could delay our speed to render the site.
Getting Started
To get started we had everyone on the design team grabbed a half-dozen or so typefaces. The only constraints was that the typeface had to be available as a web font. That means we could use anything from Typekit to Google Fonts–we ended up scouring them all! Initially just compiled a list in Paper. From there, we each took time to vote on our favorites from each of our lists.
You can see the icons we used to “like” type, and then if more than one person liked a typeface, we used the “man/woman” icon to represent multiple likes. Sad Pragmatica, no one liked it except me. In the end we had about a dozen or so typefaces to begin exploring.
Type Exploration in Context
In order to explore each typeface in context we created a file that represented several areas of our site where the new type would/could live. This gave us a good chance to view each typeface in context and even quickly compare them against each other. You can see what that looks like below.
Narrowing the List Down
So at this point we’ve narrowed down our list to three excellent candidates. This was done very democratically, with everyone simply voting on their favorites. Using the three finalists we created comps based on our category pages. Things started to feel real now seeing the typefaces in a full-page context where we are so used to seeing everything with Museo Sans. These exercises really started to help us visualize the direction we were headed and they got us excited, to say the least.
Working with a smaller collection of finalists also allowed us to start to see how each prospective typeface worked with our own custom typeface we’re developing. Oops, did I just let the cat out of the bag?
Look What I Just Found…
That was how a conversation started about a typeface that one of our designers found on Creative Market (of all places)! At this point we had landed on a finalist–Avenir Next. We had vetted it, matched it with our custom typeface, examined all the details around web fonts and hosting solutions and then this… this new candidate gets thrown into the mix like a plot twist in some Tom Cruise movie with a lot of running montages. A quick comp and we’re all smitten.
Introducing Averta
Well there she is, the new typeface… isn’t she lovely? We couldn’t be happier with where we landed with this project. Averta is geometric sans, created by Kostas Bartsokas, that “brings together features from early European grotesques and American gothics”. Oh, and you can buy it right on Creative Market.
In Conclusion
The goals of this project were all met with the selection of Averta. We have a beautiful sans-serif type with just enough personality to feel right for our aesthetic, but doesn’t distract from the beautiful work our shop owners are selling on the marketplace. The fact that it’s a product of one of those shop owners is an added bonus! Look for Averta to be the anchor of the future UI improvements that are coming to Creative Market.
We’re always looking for amazing people to join the Creative Market team. We value our culture as much as we value our mission, so if helping creators turn passion into opportunity sounds like something you’d love to do with a group of folks who feel the same way, then check out our job openings and apply today!
