Improved type on Firefox for Android

Project Readability

The Firefox UX team has been thinking a lot about type and readability lately, as part of our ongoing goal to make the web more beautiful and more readable on Firefox for Android than on any other mobile web browser.

Since the web is made almost entirely of text, we do a lot of little things to improve the readability of the web, especially on devices with smaller screens. We subtly increase the text size of content to make reading more comfortable (the algorithm we developed for this has actually been adopted by the folks working on Chromium). We built a beautiful Reader Mode that converts articles into a simpler and more readable format. In fact, more and more, we find that we are comfortable with the baseline legibility of text in Firefox, letting us explore the broader definition of readabilty.

The web deserves great type

Historically, web browsers have relied on operating systems to provide fonts for displaying content. This has evolved with the rise in popularity of web fonts, but many websites still look to the OS for a generic Sans or Sans Serif typeface to use. This is more or less acceptable on desktop computers that ship with tons of fonts, but mobile operating systems don’t tend to provide much in the way of variety (iOS being the exception here, with quite an impressive collection of typefaces from which to draw). Android ships with Roboto, Droid, Droid Serif. All of these are strong for use in UI design, but they aren’t as well suited for the kind of long form content we see on the web.

So we thought, what if Firefox could make the web look better than Android’s default font allow? What if we shipped our own fonts inside the app? It seemed like an interesting opportunity that no one else was doing on Android browsers, so the search for fonts began.

Defining the right typeface

What makes a great typeface? It all depends on the job it needs to accomplish, so we started out by defining a set of criteria for finding the right pairing of serif and sans serif typefaces.

1. Must be beautifully designed and very comfortably readable
2. Design must be subtle – this is an all-purpose font. Like Helvetica, it should adapt to content but not make any strong statements about itself through its appearance.
3. Must have broad character support for multiple languages (good coverage across Latin/Cyrillic/Greek character sets)

Open vs. Licensed

Given that Firefox is an open source product, the natural place to start was to explore options for open typefaces. Sadly, we often found that either a typeface was beautiful but lacking in character support, or it had great coverage but was either unattractive or simply not appropriate or refined enough for general purpose use. So we moved on and started reaching out to font foundries about licensing fonts to use, and they delivered some of the best fonts available today.

Initially, paying to license fonts seemed like a reasonable alternate solution. It is quite common to pay money to get good design, whether it’s an illustration, a photograph, an icon, a piece of graphic design or a typeface. As discussions evolved with our teams, however, placing a paid font into our app opened up deeper and more philosophical discussions about how to deal with licensed objects inside of open source products. There is a real tension that exists between maintaining our free and open ideals and licensing things that will greatly improve the quality of our products — and that even now it is up for debate as to what the Right Thing to do is.

We felt it would be best to take it to the newsgroups and talk through our options. Paid or Free, Licensed or Open.

Samples

So to gather more research in preparation for a newsgroup discussion, we went back and did a much deeper dive into open source typeface design. And in our research, we discovered some open fonts we had missed the first time around.

font-samples-sans

font-samples-serif

We also learned that some of the fonts we dismissed early on for lack of character support actually stacked up much better than we thought!

font-comparison2

Unsurprisingly, paid fonts performed exceptionally across the board. However, the open fonts were more competitive this time around. Charis (serif) was a new find, and performed surprisingly well. Open Sans (sans serif) is strong across the board, and has considerably better character support than we initially thought. Gentium and Source Pro were also nice, but were either too distinctive in their design (Gentium), or lacked the character support we require (Source Pro). Even though the quality of design of the paid fonts remained superior to their open alternatives, it became a difference of A+s vs. As, whereas before it was A+s vs. Cs.

Given the closeness in quality between the open and paid fonts we were comparing, we decided to put our top picks for open fonts — Open Sans and Charis SIL — into our Nightly test builds and live with them for a while to see how they performed, and to get some more testing and feedback.

And it turns out, they are awesome, we’ve been very happy with them so far. The difference is subtle, but hugely enjoyable. The fonts are set to launch with Firefox 21 in mid May (goes to Beta in early April). But who wants to wait that long when you can try these fonts in our pre-release Firefox Aurora right now? Go get it!

About these ads

13 comments

  1. starwed

    I started to ask what’s wrong with Ubuntu’s font family, but I guess it’s intentionally distinctive? (I’m pretty ignorant of fonts, so excuse the probably silly question! :) )

  2. Anonymous Coward

    Thanks so much for making readibility better on Firefox! Would you please port the Readibility + fonts work to the desktop, please? :)

  3. Excellent work. Can this not be limited to English font only?
    For Arabic please consider using Amiri

    http://sourceforge.net/projects/amiri/

    It’s the best font I use, and it’s open source.
    It’s also used for Wikipedia Arabic

    http://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9_%D8%A7%D9%84%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9

    http://ultimategerardm.blogspot.ca/2012/03/supporting-font-for-arabic-ii.html

    For info about it contact its creator @KhaledGhetas

  4. robinst

    Thanks for the blog post, I wondered what happened to the fonts when they suddendly changed – glad I wasn’t imagining things ;) .

    Text inflation is a nice idea, but the following bug makes some sites nearly unusable:

    https://bugzilla.mozilla.org/show_bug.cgi?id=707195

  5. What’s wrong with DejaVu font family (http://www.dejavu-fonts.org/)? It has been a bread-and-butter font for non-Ubuntu Linuxes for years, it looks pretty great and its international coverage is quite substantial.

    • There is nothing specifically *wrong* with it, but we found that Open Sans and Charis better fulfilled our needs in this project than other open fonts — including DejaVu, which was on our early list of potentials.

  6. Great looking fonts and initiative (yeah, the FF Sero and Meta-Serif do look best to me as well – great serif |g|!). I’d also like to see this go into desktop Firefox as well.

  7. Lozzy

    Amusingly, I just started playing with Nightly Fennec a few days ago and immediately noticed it seemed to have better looking text than other browsers. I tried loading a few pages in each browser to compare them and came to the conclusion that they did indeed appear more legible in Fennec.

    Unfortunately though, on my HTC Desire, it doesn’t quite achieve the performance I’d need to be able to use it as my primary browser. But I eagerly await the day that Firefox becomes my browser of choice for both for desktop and mobile.

    • Thanks Lozzy — where do you see the performance hits, and which browser are you using instead as your default?

      • Lozzy

        It’s hard to pinpoint any particular sluggish features; in general most interactions have some degree of unresponsiveness involved. Panning involves a lot of jitter and interruptions in animation. Same for zooming. Tapping on interactive page elements like text boxes and buttons is subject to latency; usually takes a second to register that anything has happened.

        The menu shown after going into the menu and pressing “More” also exhibits scrolling animation jerkiness, whereas visiting the settings area exhibits none of these problems (is this due to the settings area being a native Android control?)

        Dolphin is my browser of choice at the moment. Note that only the ARMv6 build of Fennec runs on this device.

        Added my main email address to the contact field in case you would like me to provide profiling results or similar (though I’m not familiar with the process).

  8. I wonder if we’ve looked into using the Moz font family? It’s readable on-screen, optimized for low-res displays, and carries a distinct Mozilla look (ie. similar to how we set the Firefox wordmark).

Comments are closed.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: