Bluetrain Mobile | Mobile Marketing Engine | Mobile CMS

In Transit Blog


Choosing Fonts for Your Mobile Website

by Mike Mai

17
May
2011

Choosing fonts for your mobile website

EDITOR’S NOTE: There is an update to this blog post, see it here.

So you are building your first mobile website for your business and you have a kick-ass design from your designer. You are ready to go build out this thing but there’s one slight problem—your designer used some fancy schmancy non-web-safe fonts throughout the whole design. By slight problem, I actually meant the worst nightmare for developers. How do you prevent this from happening? You should first educate your designer on choosing fonts compatible for the mobile web.

So let’s rewind and go back in time—back to before your designer started designing. Know the facts and learn when to use restraint. Restraint can keep creativity alive, a good designer should be able to value them instead of defying them. Now let’s talk about fonts.

Web Safe Fonts

It’s good to know about the regular web safe fonts before diving into mobile. Let me list them for you:

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

Mobile Web Safe Fonts

Now let’s take iPhone, Android, and Blackberry into consideration. All these mobile devices come with different system fonts, so your safest bets for mobile would be the following:

  • Arial/Helvetica
  • Courier/Courier New
  • Georgia
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

Also note that on some older Androids, they will replace any serif fonts with Droid Serif and sans-serif fonts with Droid Sans.

Custom Web Fonts Services

You are probably saying, “I don’t want my brand to be bland, my mobile website needs fancier fonts!” Well, don’t worry, below I will review some of the best custom web fonts services out there. Do keep this in mind though, not a single one of them is guaranteed to work across all mobile devices.

@font-face

This is not really a service, it’s just a CSS property. With Font Squirrel’s @font-face generator, this technique can be easily implemented. This is a favorite among many designers.

Pros

  • Easy setup (only if you’re using Font Squirrel’s @font-face generator)
  • Widely compatible
  • You can use ANY fonts you own the licenses to
  • The fonts ares hosted on your own server. The only downtime for the fonts is when your mobile website is down

Cons

  • It requires massive amount of CSS codes which would hinder performance
  • Even though you can use practically any fonts you want but you have to own the font licenses and make sure the licenses allow for @font-face embed. This could get very expensive

Cost: Depends on the price of the fonts you use

Google Web Fonts

This is easily my favorite service. Its library is ever growing and the setup only requires one line of code in the HTML for each font you use.
Google Web Fonts

Pros

  • Easy setup
  • Works with most iPhone, Android, and Blackberry devices
  • Slim chance of any downtime since it’s hosted by Google
  • Google lets you download the fonts to your desktop. This is convenient for your designer during the design process
  • Font Previewer on their site is great for playing with the fonts before implementing them
  • No bandwidth limitations and you can use as many fonts as you wish on a specific site!

Cons

  • The library is still relatively small, it only consists of a little over 100 fonts, but it is growing consistently. EDIT 2/16/12: it’s grown to 400+ now
  • Some fonts don’t work on anything below iOS 4

Cost: FREE

Typekit

Typekit is pretty cool. It came out couple years ago when there weren’t much competitions for custom web fonts services.
Typekit

Pros

  • Huge library with over 4000 fonts
  • Has specific mobile settings for iPhone and Android devices
  • Once you include the Typekit javascript on your HTML, you don’t need access to the HTML and CSS to change fonts. You can use the Editor on typekit.com, which means you can make fonts changes from any computers anywhere
  • There’s a free version

Cons

  • The heavy javascript hinders performance
  • No Blackberry support
  • The free version puts a branded tag on the corner of your mobile website
  • Changes sometimes take a while to go into effects
  • Cannot download fonts to desktop
  • Pricing plans are on a per year basis
  • There are limitations on bandwidth and number of fonts used according to the plans you select

Cost: $24.99 ~ $99.99 per year

Fonts.com

I remember using Fonts.com’s web fonts service while it was in beta last year. It has launched publicly since then, but the problem is it still feels like it’s in beta.
Fonts.com

Pros

  • Massive library with over 10000 fonts
  • Supports more languages than any of their competitors
  • Works with most iPhone, Android, and Blackberry devices
  • Highest pricing plan provides desktop download of fonts

Cons

  • The heavy javascript hinders performance
  • Painful implementation process
  • The font browsing experience on their site is horrendous
  • Their website is very slow. It’s hard to access to editor
  • Too many features in the editor creates confusion for the less-tech-savvy users
  • There are limitations on bandwidth according to the plans you select

Cost: $10 ~ $500 per month

Fontdeck

You can tell Fontdeck is made by designers for designers, their website is beautifully done. Their service is pretty good, too.
Fontdeck

Pros

  • Has over 700 quality fonts
  • Easy to implement
  • Works with most iPhone, Android, and Blackberry devices
  • The pricing plan is on a per font basis, and it’s really cheap
  • Fonts browsing experience is superb on their website

Cons

  • There are limitations on page views per month

Cost: As low as $2.50/year per font, each font’s price varies. Enterprise pricing is available for websites exceeding 1 million page views per month

Other Services Worth Noting

  • FontServe
  • FontsLive
  • Just Another Foundry
  • TypeFront
  • Typonine
  • Typotheque
  • Web fonts Kernest
  • WebINK
  • Webtype

Best Practices

While fancy fonts are cool and slick, they should be used sparingly. The best practice for mobile websites is to use custom fonts on only headers and any kinds of big typography layout elements. On body text, it’s best to stick with the mobile web safe fonts listed above.

Now that you are educated on what fonts you can use on mobile websites, make sure to pass the knowledge to your designers. Hit the share buttons or leave your thoughts in the comment section down below.


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

Related:

  • http://mikemai.net/ Mike Mai

    Hi Kristina, how are you setting up the Google fonts? Maybe there’s an error in your code? Google fonts work very well for any iOS devices (unless it’s an old device like 3gs).

  • Pingback: Choosing Fonts for Your Responsive Website | In Transit

  • Anthony

    Thanks for the info, this has been very helpful.

  • Handy Andy

    Fonts.com hands down….They are the only ones who have rights to these popular and well known fonts…everything else is a lawsuit waitying to happen.
    Fontsquirrel.com is terrible and even admits you are using the fonts at your own risk….IP infringment is huge these days.
    Sometimes you can’t afford to be so cheap.

    • http://mikemai.net/ Mike Mai

      Fonts.com has improved overtime, I’ll be writing an update to this post soon, but I think other hosted services are legit, too. I can’t imagine Google or Typekit not owning rights to their fonts.

      Hosting fonts on your own server and using @font-face at your own risk, that’s in no way Font Squirrel’s fault.

  • Anonymous

    Fonts.com sucks! It’s scripts interfered with unhiding elements that after page load and a silent change in their JS broke functionality in a production site. But maybe worst of all, they don’t even compress the fonts they’re sending over HTTP. Also their site is terrible. I’m not using them anymore.

    Webink.com is a new player with very nice features, unique among others is the ability to transfer a project to you customer when going live.

    Fontsquirrel.com is also very good. They offer a @font-face generator where you can upload fonts to generate a webfont kit.

  • http://www.ivisionmobile.com/ Mobile Marketing

    Great Tips! Thanks for providing such a great post with much valuable information.

  • Claudia

    What about font SIZE???

    • http://danegetting.com/ Dane Getting

      I don’t know about the others, but I tried Google Web Fonts, and the font size is whatever you name it in the HTML.

      • http://www.facebook.com/danielfuentes Daniel Fuentes

        ha, you are missing the point. the question is what is the recommended font-size for text on a mobile device. someone answer that!

        • http://mikemai.net/ Mike Mai

          Hi Daniel. You can set your body font-size to Medium, that would ensure legibility on all devices. If you need to define it in pixels/points, 14px ~16px is the recommendation. Size varies depending on the font you choose, so just test it out in that range and you should be all set.

          • Nick Gassman

            Whatever you have your font size set to in this blog post, I find it hard to read. In Chrome on Android, your mobile version Ignores the browser setting for font scaling, and I have to use the setting to override your disabling pinch and zoom. What is the rationale for this decision?
            Nick

          • http://mikemai.net/ Mike Mai

            Don’t worry, the blog will be refreshed along with the redesign! :)

    • jababone

      ems

  • Pingback: The 4 Surprises of My Mobile College Search | University Mobile Websites | Mobile Marketing Blog | In Transit - Bluetrain Mobile

  • Pingback: 5 Tips for Mobile Copywriting: Editing Content for Mobile Audiences | Mobile Marketing Blog | In Transit - BlueTrain Mobile

  • Les

    I was wondering about CUFON…….

    • http://mikemai.net/ Mike Mai

      Cufon takes up too much resources, load time would not be ideal on mobile.

  • http://www.facebook.com/people/Sara-Allen/706418519 Sara Allen

    Thank you! This is excellent information all in one place!

  • Pingback: Mobile Internet Is On The Rise: Is your business prepared to take advantage of it? | Internet Marketing with Wordpress

  • Pingback: Mobile Website Basics

  • Pingback: What is the best font type and size to use in a mobile app? - Quora

  • http://twitter.com/philpham philpham

     Great Read!


Bluetrain Mobile

Everything Mobile. Anything Possible.