Introducing the New Fonts.com

Johnathan Zsittnik

Johnathan Zsittnik in Archive on May 1, 2012

Today we unveil a brand new Fonts.com. If you’re a regular reader of the Fonts.com blog, you’ve probably already noticed a new aesthetic right here. The actual site offers plenty more to take in: In addition to a revamped design, you’ll discover additional ways to browse and search for fonts, fresh approaches to UI, and loads more typographic imagery. Despite all that’s new, the story of this site actually dates back quite a while.

In mid-2010, we took stock of the existing Fonts.com and drew up a lengthy list of areas to improve. Our wishlist included changes to the overall aesthetic, the organization of articles and other content, the way our products were presented and the tools we provide for discovering and trying fonts. In short: it was time to redesign.

We approached Happy Cog to help at the end of 2010. We’re big fans of executive creative director and renowned standards proponent Jeffrey Zeldman. So, the decision to work with his agency was an easy one. Jeffrey, Creative Director Chris Cashdollar and others from the Happy Cog team came out for a kickoff meeting in January of 2011. The Happy Cog team posed challenging questions regarding our vision for the new Fonts.com. ‘Should content focus more on searching or exploration and inspiration.’ While there were no easy answers, the ensuing conversation shaped the direction of the redesign and let us know it was a good fit between agency and client.

We came out of that initial kickoff meeting inspired and charged up with the following objectives and vision for Fonts.com:

  • Create a new Fonts.com home page featuring inspiring executions of fonts, an increased focus on search, and thoughtfully chosen interfaces that balance the most popular purchases, new and promoted products, and original content that is compelling and educational.
  • Integrate the Web font service into the Fonts.com experience.
  • Offer an improved search experience that makes smart choices about what to present and when, using the latest techniques for increasing engagement and conversion including things such as suggestive search and faceted results.
  • Release a re-envisioned font browsing experience, that focuses on font presentation, decreases steps to experimenting and purchasing type.
  • Refine the structure of content types to make it more accessible without getting in the way of getting to font products.
  • Tightly integrate social features.

An intense collaboration ensued, taking us from the objectives stated above, to sitemap, to wireframes, to the creation of the primary visual design elements to page design and eventually to the site we premier today.

With that, let’s take a tour of the new Fonts.com.

Home: Modernized aesthetics; loads of real estate for type

Fonts.com Inspiration

We think you’ll agree – the new Fonts.com homepage makes an impression. Big, bold type showings demonstrate type in use and provide in-depth looks of families. The stage premiers with showcases of Massif – a new design by our own Steve Matteson in addition to showings of the Akko, Gibson and Salvo Sans families. Hero images were designed by Monotype Imaging creative director Dennis Michael Dimos (Massif) as well as external designers Bethany Heck (Akko), Mark Weaver (Gibson) and Naz Hamid (Salvo Sans). Keep an eye on this area as we’ll rotate in fresh new showings from graphic designers and type designers on a regular basis. Beyond the hero images lies a variety of type showcases and discovery tools. Explore rich previews of hot new releases and established designs through the best selling new fonts and featured font sections. The “Find Your Type controls” allow you to search, browse, or identify fonts without ever leaving home. You’ll also find a selection of the latest articles on Fonts.com. We’ve always put out great, informative and educational content, but now the best content is far easier to find.

The decision to incorporate Web fonts for all of the type was an easy one. Picking the typefaces families and optimizing the fonts for the Web took a little more time.

“We really enjoyed working with the type and implementing it through the Fonts.com Web Font service,” said Christopher Cashdollar, creative director at Happy Cog. “We were able to implement a smart, legible and well-structured type system using the Neue Frutiger and Frutiger Serif families. We knew we could trust the integrity of the type because of the level of scrutiny that Monotype Imaging puts into the screen optimization of its fonts.”

Search: Sort, Filter and Discover; Desktop fonts and Web fonts Side by Side
Our new search results pages introduces sorting and filtering options that will help you navigate through our vast inventory and zero in on the design of your choice. Oh yeah, typefaces results are (finally) grouped by family.

As I mentioned, integrating our Web font service into Fonts.com was a primary goal of the redesign. The new search results page is just one place where you can find desktop fonts alongside side of Web fonts. Our search tools will return results for desktop fonts, Web fonts and articles. When you rollover a family that’s available as a Web font, a control will display that will allow you to add it to a project right from the search results page.

Family pages: Try, learn and share

Our new family pages feature a prominent showing. We’ve hand designed showings for many top families and will continue to expand this inventory over time. But we’re also counting on you. Showcase your design skills by designing and submitting images for your favorite typefaces.  Just click the ‘+’ to add your work to our gallery.

These robust new family pages gather all of the family members in one place. Type historians will appreciate the detailed descriptions – available for many of our most popular and newest families. And font enthusiasts of all kinds will enjoy rating and sharing their opinions with the Fonts.com community and through social avenues.

Cart: Quick, convenient shopping

The new Fonts.com features a mini shopping cart that is accessible from the header nav of every page. Click the shopping cart to view or delete products in your cart, without leaving the current page. This is convenient for those working their way through a lengthy shopping list and those with items remaining in their cart from a previous visit to Fonts.com.

Manage Web Fonts: Your new Web font command center

Fonts.com Web Fonts subscribers will notice a dramatically different set of controls for managing their Web fonts projects. Our new Manage Web Fonts page acts as a dashboard, providing virtually everything you need to build, edit, deploy and share Fonts.com Web Fonts projects.

Learn About Fonts & Typography: Even more great, educational content

Fonts.com FontologyLearn About Fonts & Typography is home to the original content we produce. Here you’ll find a new series called Fontology – an ever-expanding academic resource for educational institutions, design students and those with an interest in the typographic arts. This section is also home to the Fonts.com blog which features topical content that will keep you up to speed with the latest from Fonts.com and the type design community. Lastly, our popular series, For Your Typographic Information, lives on within Learn About Fonts & Typography. This longstanding series remain an excellent source for those in search of typographic tips and tricks.

Best Sellers: Insight into typographic trends

If you’re curious to know what’s hot, look no further than our best sellers pages. View the New Best Sellers page for a look at the top new releases or the All Best Sellers page to see the typefaces whose popularity has stood the test of time. For further looks into what’s trending, note that you can sort search results by popularity. You can also access the highest rated typefaces (as determined by your ratings submitted on family pages) through the “Find Your Type controls” on the home page.

Fonts.com Best Selling Fonts

FontGazer: Try thousands of fonts directly in Adobe InDesign
The new Fonts.com isn’t the only thing in beta.  As you may have seen, we recently announced FontGazer – a free InDesign plug-in that allows you to browse, try, and buy fonts from Fonts.com directly from Adobe® InDesign®. Download FontGazer and be sure to let us know what you think by sharing your raves, gripes and feature requests in the FontGazer Feedback Forum.

Fonts.com FontGazer

If you’d like a more interactive tour, you can check out this video. It will give you a more detailed look at many of the features described above, plus many more – including an overview of how to manage your Fonts.com Web Fonts projects on the new site.

The new Fonts.com is out. But that doesn’t mean we’re done. We’re hard at work on additional enhancements that will arrive during and after beta. In the meantime, we want to know what else you’d like to see. We’re not there yet, but you can help us make Fonts.com everything you want it to be. If you notice something that’s missing or that can be improved upon – let us know. See something you like? We want to know. Click the red feedback bar on the side of the site to share your thoughts.

Now get out there on the new Fonts.com, and find your type.

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.


Great Type Makes Sites Stand Out

Start your free fonts.com web fonts subscription today

Start Subscription