Keep an eye on your inbox!
Hmm, that didn't work. Try again?

6 of the best typography tools for designers

These free tools will help you set your content in the perfect light.

Mat Vogels
December 11, 2015
Resources

We’ve said it before, and we’ll say it again: content is king. And as more and more designers adopt a content-first approach, it’s crucial to keep in mind that designing the right typographic system for your website becomes even more important.

Typography is the style, arrangement, and appearance of text. So it’s not just the font you use, but also the size of the text, length of content, and style (like color, italics, etc).

This means that we designers should not only understand the ins and outs of typography, but also take advantage of the many typographic tools available.

Here are a few of my favorites you’re sure to love.

1. Educate yourself with Typekit Practice

You can teach yourself about type in all kinds of ways, but Typekit Practice has always been one of my favorites.

I’m a big fan of Typekit (especially since it’s so easy to use your Typekit fonts in Webflow) and the lessons they provide here are just as effective as they are easy to get through. It’s my go-to for both education and practice, since you can try your hand at many of their lessons on CodePen.

2. Find out what that font is with FontFace Ninja

Have you ever been on a site and wondered, “Wow, what font is this?!” While you can dig through Chrome Dev Tools (by right clicking and picking Inspect Element) to find out, there’s a much easier way.

The FontFace Ninja Chrome lets you identify the font family, weight, and even the font size used anywhere on a site — all by just hovering over it.

3. Discover new fonts through Hoefler&Co.

The Hoefler&Co. font foundry boasts some of my favorite fonts on the web. Their Discover.typography site offers a great place for discovering new fonts (and layout ideas) via beautiful typesetting experiments.

4. Find the perfect font with Wordmark.it

Picking the perfect font for your next project can be a huge challenge. It takes a lot of thought and, often, a bit of trial and error. Wordmark.it can speed this process up by letting you preview text you input, set in every font on your machine, side by side.

5. Pair your fonts with Font Flame

While there are exceptions, most websites feature at least two fonts: one for headings and callouts, and another for body text. Picking the right pairing is super important, since they need to complement each other to create a good reading experience. Font Flame is a Tinder-like tool that lets you match fonts with ease and see them together before trying them out.

6. Get your type hierarchy right with Modular Scale

Once you’ve nailed your font pairing, it’s time to start considering your hierarchy — the size relationships between different heading levels and body text. A well-considered hierarchy helps people understands the relationships between different types of content on your site, greatly improving the reading experience.

Over hundreds of years, typographers have developed a range of ratios between type sizes, many based on music. Calculating how these ratios play out across your headings can take a bit of math — or you can just use Tim Brown’s amazing Modular Scale, which automatically generates a classical type hierarchy from your base font size (body text) and a scale.

What are your favorite type tools?

There are so many amazing typography tools out there, we know we’re leaving out a ton. So let us know what tools you use on Twitter!

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.