New Fonts.com Blog

P

Piper Lawson in Learning on September 19, 2014

There aren’t as many faces behind Fonts.com as one may think. We are a small, passionate and friendly team that is ready to show that side of ourselves to our user. The challenge was quite simple: we wanted to create a more approachable, usable blog to better express ourselves and products to our users.

Blog Wire

Updated Color Palette

When we started creating the new Fonts.com blog, our first step was creating a new palette. Fonts.com has had a plain color scheme—with a repeated use of a deep blue throughout the site—for years. When we approached choosing new colors, we turned back to our challenge. As a website, we wanted our user to think of us as welcoming, so we used warm, muted tones while keeping our primary color a shade of blue for brand consistency.

A Wide Range of

Warm Colors

We thought this new palette was so successful, that we actually released it to Fonts.com first. If you haven’t already seen it, be sure to go check it out!

Fonts.com Homepage

Friendly, Modern Typography

We’re all about type, so it was time to roll up our sleeves and show off what we do best! While we immediately all jumped to our favorite designs, after taking a few steps back, we knew we needed to find a font that would work at various sizes, could pair well with a font of another classification, worked with our messaging, but—most importantly—helped improve readability of our content. We went through a lot of options and we ultimately chose the Harmonia Sans and PMN Caecilia families.

Harmonia Sans

A B C E D F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Typographic application of Harmonia Sans throughout the Fonts.com Blog

Relevant Content

Interesting, Accessible Content

We set out to create a more approachable, usable blog to better express ourselves and products to our users.

PMN Caecilia

A B C E D F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Typographic application of PMN Caecilia throughout the Fonts.com Blog

Exciting Design

Fonts.com provides the biggest and best selection of high quality desktop and web fonts. Try, buy and download classics like Helvetica, Univers, Frutiger and Trade Gothic.

There is more to creating a great typographic experience than just choosing the typeface, although it’s a very large part. The actual content of the blog was one of our largest focus areas. The PMN Caecilia collection is a gorgeous slab serif design featuring a tall x-height. Boasting generous 21px body copy and 167% line-height, the type is set in dark grey on a beige background to minimize discomfort. We also made sure to preserve plenty of white-space, and implement an average length of 68 characters per line, giving our readers the very best reading experience.

“There is more to creating a great typographic experience than just choosing the typeface…”

Our user interface and headlines are set in the Harmonia Sans family—a friendly, modern geometric sans designed by Jim Wasco. The typeface holds its beauty and legibility in a range of sizes on the blog, where it’s employed from 13px to 64px The versatility and performance of its various weights at varying sizes make the Harmonia Sans family a great structural UI font.

Responsive Framework

It was important for us to make our content accessible to everyone, no matter the size of their screen. We implemented Foundation to give the site the best responsive structure; with this powerful framework in place, we had power to design the site the way we truly wanted. We were able to add elements like a mobile friendly menu, type that responds to the size of your screen, as well as content enhancements like pull quotes, block quotes, captions and a spotlight area for fonts.

Blog Mobile

To ensure the very best experience on multiple devices, we decided to use card UI. Our article cards give the user the ability to scan the blog quickly to find the best content for them. Cards are also great for responsive design, either fluctuating in size or snapping to another line of the design depending on the size of the device.

Blog Card UI Explained

Outcome

With an optimized user experience and friendlier aesthetic, the updated Fonts.com blog is the start of a new chapter. The team put a lot of time and hard work into the new site and we are all so excited to be able to show you what Fonts.com is capable of.

We truly hope that this new experience will help our users better engage with us and our content.

Blog Design Comp

Great Type Makes Sites Stand Out

Start your free fonts.com web fonts subscription today

Start Subscription