Choosing Fonts for Your Responsive Website

Responsive Typography

It is way overdue, I know. After a year and a half, the sequel to Choosing Fonts for Your Mobile Website (the most popular post on this blog FYI) is finally here; however, it is more of a Redux than a Part Two.

For the web, things have changed significantly over those 20 months, and we, at Bluetrain Mobile, are always keeping up with the latest technology. As the Chief Creative Mechanic, I have been orchestrating our creative team to bring new and innovative features to our platform (which you will soon see). And that is the reason why you have not seen a blog post from me in a very long time. Now, let’s get down.

RWD

What is RWD? A car? Nope! RWD stands for Responsive Web Design. Even though RWD isn’t the holy grail for mobile, it is a great solution that utilizes mobile-first strategy. If you are a web designer, you are most likely doing lots of RWD nowadays. Also, you’d care about applying good typography to your design. Guess what? I am here to tell you about fonts for the web.

Web Safe Fonts

In my last blog post, I stated the following as Web Safe Fonts:

  • Arial/Helvetica
  • Arial Black
  • Comic Sans MS
  • Courier/Courier New
  • Georgia
  • Impact
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

As for Mobile Web Safe Fonts, it would be the same list minus Arial Black, Comic Sans MS, and Impact. Unfortunately, if you are doing RWD, this list does not apply at all. If you are using any fonts in the above list, Android devices are still replacing them with either Droid Sans or Droid Serif (depending on the font type). So, what now?

The New Web Safe Fonts: Custom Fonts

Yes, you heard that right! The days of using those boring Web Safe Fonts are over. Let me tell you this: You may use any font you wish and it will be web safe, as long as you have the license to it and you implement it correctly. Wow, isn’t that a designer’s dream? Yup, I believe so. Now before you go crazy on your web typography, learn how to embed custom fonts correctly.

@font-face

This is the most ancient and reliable way to implement custom fonts, and all web fonts service providers are built on this CSS property. It is now supported in all modern web browsers.

Summary

  • Easy setup, try Font Squirrel’s @font-face generator.
  • Use any fonts you desire, provided you bought the license.
  • The fonts would be hosted on your own servers, pirates could look at the source and steal your fonts. That would be breaking the font’s license agreement. So make sure you secure the font files.
  • Depending on the font, cost could run very high.

Tips

Unless your desired fonts can only be implemented through @font-face, save yourself some hassle and just go with a web fonts service provider.

Web Fonts Service Providers

Using a provider is the best way to implement custom fonts in your RWD project. You don’t have to deal with hosting bandwidth or font licensing. Here I will analyze the top 3 providers and show you the pros and cons. I will also rate each provider using the Matthew Carter system (famous typographer, creator of Georgia!): 5 Matthew Carters being “awesome”, 0 Matthew Carter being “don’t waste your time”.

Fonts.com

Fonts.com

The Web Fonts service from Fonts.com have been around for a few years now, and it has improved so much since its start. Fonts.com went through a redesign recently and the Web Fonts service also received a huge upgrade to its UI and UX. It no longer feels like it’s in beta anymore.

Pros

  • Free trial account available
  • Over 20,000 fonts to choose from, including classic fonts and web optimized fonts
  • Advanced browsing allows you to sort by categories, such as by designers and foundries
  • Page View History
  • There are 3 options for the embed code: Javascript, non-javascript, and self-hosted
  • Create Projects. Each Project has its own embed code for implementation. The embed code stays the same regardless of what changes you make to the Project (add/remove fonts, edit CSS selectors, etc.), so that you can make typographic changes to your website without ever touching your HTML and CSS (once the embed code is implemented).
  • Option to download the fonts
  • Unlimited websites (even for the free trial account)
  • Unlimited fonts per website

Cons

  • Registration is required for using the service
  • The catalog system for browsing fonts is rather slow and unintuitive
  • Each price plan is limited by page views per month
  • Expensive. Paid accounts (Standard and Professional) could range from $10 to $4000 per month depending on your page view needs. The maximum page view option caps at 100m.
  • Free trial users are required to show the Fonts.com Badge

Verdict

4 Matthew Carters out of 5. If you can afford it, Fonts.com is the most feature-rich solution out there, and it has a massive library to boot.

Awesome Fonts.com Web Fonts

  • Adobe Jenson
  • Avenir
  • Bickham Script
  • Clarendon LT
  • Frutiger
  • Futura
  • Goudy Text
  • ITC Bodoni Six
  • Kepler
  • Univers

Typekit by Adobe

Typekit

Remember Typekit? Yeah, these guys did it first, as far as I can remember. They were aquired by Adobe back in 2011. Typekit is a favorite among many web designers.

Pros

  • Free account available
  • Adobe licensed a lot of quality fonts, including Caslon, Garamond, Futura, Meta, Minion and more. Plus, you can use fonts you already owned from type foundries such as FontFont, Process Type Foundry and Arstype.
  • Great UI design for browsing fonts
  • Mobile Settings panel within the Kit Settings enables the user to turn on specific support for iOS, Android and Windows devices
  • SSL font serving. SSL is recommended for any site with a login. This feature is completely free.
  • Cheap. The most expensive plan (not counting the custom business plan) is only $99.99/year.

Cons

  • Registration is required for using the service
  • The full library consists of 873 fonts, it is rather small compared to competitors
  • There’s only one javascript option for the embed code. Performance is still a little bit slow compared to competitors.
  • Each price plan is limited by page views per month
  • Free users are required to show the Typekit Badge

Verdict

4.5 Matthew Carters out of 5! Quality fonts at an affordable price, no wonder web designers love Typekit.

Awesome Typekit Fonts

  • Adelle
  • Adobe Caslon Pro
  • Chaparral Pro
  • FF Meta Web Pro
  • Futura PT
  • Garamond Premier Pro
  • Minion Pro
  • Museo
  • Myriad
  • News Gothic Std

Google Web Fonts

Google Web Fonts

Google is still my favorite amongst all providers. Its ease of use and reliability is second to none. Our mobile website platform currently works with all Google Web Fonts.

Pros

  • Completely free
  • Option to download the fonts
  • Unlimited websites
  • Unlimited fonts per website
  • No registration required
  • Convenient sorting filters make browsing through the font library quick and easy
  • There are 4 options for previewing fonts: word, sentence, paragraph and poster
  • The font review interface is feature-rich. The Text Drive feature is especially helpful for seeing how your fonts look in multiple paragraphs and headings.
  • Option to turn on extra character sets, such as Latin Extended
  • There are 3 options for the embed code: HTML link tag, CSS @import, and javascript. Performance is the fastest compared to competitors.
  • Reliability is unbeatable. After all, it is provided by Google.

Cons

  • The font library only has 600-something fonts, but it continues to grow.
  • There are some crappy fonts in the library.
  • A lot of the fonts only have one style, it makes choosing body fonts a little hard because having the 3 basic styles (regular, italic and bold) is recommended.

Verdict

4.9 Matthew Carters out of 5!!! If only Google could provide more quality fonts, I would give this a 5 out of 5. But for the price of free, you really can’t ask for more. It is even more feature-rich than some of the paid alternatives.

Awesome Google Web Fonts

  • Arvo
  • Bitter
  • Cinzel
  • Condiment
  • Gentium Book Basic
  • IM Fell English
  • Libre Baskerville
  • Lobster
  • Oleo Script Swash Caps
  • Open Sans
  • Pacifico
  • PT Sans
  • Raleway
  • Vollkorn

Other Providers

There are many more providers out there, but they really aren’t worth mentioning. Just stick with the top 3 for your design projects.

Rock Your Web Typography

Now that I’ve taught you all this fancy web fonts stuff, you should be able to design a responsive website with great typography. Feel free to share your design and feedback in the comments section.

About the Author

Mike Mai operates the train of creative thoughts at Bluetrain Mobile. He loves web, mobile and social media. Language skills include Mandarin, Cantonese, and HTML5.
@mikemai2awesome