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.

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!

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!