Improved type on Firefox for Android

ibarlow

17

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!

17 responses

  1. Demetrius wrote on :

    I love the new fonts. They have actually improved the look and the readability for more drastically especially on my higher density screens.

  2. Paul wrote on :

    There is absolutely nothing wrong with Droid Sans and Droid Serif for web use. Open Sans indeed looks nice, but makes the fatal mistake of not distinguishing between a lowercase L and an uppercase i!

  3. Henning von Vogelsang wrote on ::

    I find it interesting that Open Sans is made part of the new Firefox for Android. Open Sans was originally designed for Google and became the main typeface of their marketing for a short period, until they introduced Roboto, which has now become the dominant Google typeface. There are still a lot of Google branded marketing sites out there that use Open Sans.

  4. Dan wrote on :

    Why not make OpenSans part of the desktop Firefox?
    And Chrome. And IE.

    1. Julio wrote on :

      I think so too Dan. Why not use these great fonts on the desktop version?. I use a while ago OpenSans and change is more than remarkable.
      I thank and praise the changes made to the mobile version of Firefox, but please do not forget the desktop version.

  5. john wrote on :

    I have a question here.
    What if some characters are not included in the new open sans font, for example, the Chinese, Japanese, Indian, etc? Are they fall to the default system font(DroidSansFallback.ttf in Android)? If so, how to ensure the consistence of their look? Because many Chinese webpages also contains Latin characters.
    I think the font config of the desktop firefox is reasonable(that’s why i prefer firefox to chrome). The difference between phones and PCs are getting smaller. so I think it’s better just to port the desktop firefox’s font configuration to android than using a new embedded font for all use.

  6. Pierce wrote on :

    The new fonts are beautiful and I’m glad to hear so much thought is being put into striking a balance with the design, support, and ideology.

    Perhaps ironically, though, viewing this page in reader mode has some real issues. In particular, the text of the entry is first displayed in a small gray font with all links and paragraph breaks removed, and is then duplicated with normal formatting.

    (also, the email address validation for comments does not accept “+” symbols :-/)

    1. ibarlow wrote on :

      Thanks for the feedback Pierce! I filed a bug against the issue, you can follow along here https://bugzilla.mozilla.org/show_bug.cgi?id=864786

  7. TT wrote on :

    “Absolutely nothing wrong with Droid Sans and Droid Serif for web use” ???

    There is if you’re interested in classics. I really want to switch to an Android device but so far have only found the LG Optimus that can even half render ancient Greek fonts properly in a mobile browser. Some Samsung devices allow system font changes but then these aren’t used by any of the Android browsers I can find (Firefox included).

    But Open Sans and Charis are no better!!

    Compare Open Sans (1 Greek extended character – http://www.fonts2u.com/open-sans.font?charmap=54) with DejaVu Sans (233 Greek extended characters – http://www.fonts2u.com/dejavu-sans?charmap=54&page=1). Worse when you look at Charis. No Greek extended characters at all and even the modern Greek alphabet isn’t complete (http://www.fonts2u.com/charis-sil.font?charmap=8). Take the tick for 3. Strong character support away from Charis!

    So I’m wondering, in the open aka “free” source paradigm that is supposedly Firefox, why we’re subject to a font dictatorship? Why are we having love it / hate it conversations about the fonts dictated? Why can’t the choice of font be left to the user, or am I missing something obvious? The iPhone has no problems with this with the built in fonts. No prizes for guessing that I’d rather load a suitable, beautiful (in my eyes) font and use Firefox on Android, though!

    1. ibarlow wrote on :

      I really want to switch to an Android device but so far have only found the LG Optimus that can even half render ancient Greek fonts properly in a mobile browser.

      There is work underway to provide a download-on-demand mechanism that detects when we try to display text in a script for which no font is available, and offers to automatically fetch the necessary font. You can follow these bugs for more details: http://bugzil.la/619521 and http://bugzil.la/648548

      1. TT wrote on :

        Thanks for the info (and sorry about the dictator ref’s – hope they were taken as written, tongue in cheek). The work underway seems to be after the ideal solution and has been under discussion since 2010! Anything that can be done by users in the meantime, e.g. substitute a font file that has glyphs needed? I found font.name settings in about:config but changing them didn’t seem to do anything. The Ubuntu font is quite nice and has the glyphs I’m after and I got it onto the Samsung SIII I’m trialing OK. I now just want to get Firefox to use it (without rooting). Surely that can’t be too much of an ask? None of my searching has turned up a “how to” so I hope it’s not impossible.

    2. gngl wrote on :

      “Worse when you look at Charis. No Greek extended characters at all and even the modern Greek alphabet isn’t complete … Take the tick for 3. Strong character support away from Charis!”

      Well, Charis *is* lacking in the Greek area (strange, given its name), but this font has been designed specifically to support all languages using Roman characters. That sounds deceptively simple, but Charis has, for example, extra tables to support advanced diacritic placement and other stuff that needs Graphite to display properly. From the POV of some people, at least, supporting all the languages with weird diacritics and Roman-derived characters is probably worth more than the omission of a single language.

  8. Stefan Lasiewski wrote on ::

    While I appreciate the new fonts, I do want to point out that these fonts use 8MB of space, which is a lot considering that the average Android app is less then a few megabytes. The Android directory /data/data/org.mozilla.firefox/res/fonts uses 8MB.

    Firefox is getting so large it is almost unusable on lower-end ARMv6 phones, which is contrary to the mission of the ARMv6 project.

    For higher end Android devices which have more space, I’m sure the fonts are great and useful. However on lower-end ARMv6 phones, the Firefox growth interferes with other functionality on the phone. I currently cannot apply security updates to other software on the device.

  9. Faroush wrote on :

    I would also like to chip in and say that a font supporting polytonic Greek would be extremely helpful for students and academics on Android, especially in light of Google’s complete lack of response to this long-running bug: http://code.google.com/p/android/issues/detail?id=26037 .

    Other than that, Charis looks excellent, and I commend the team on a job well done.

  10. Anas wrote on :

    Great fonts but unfortunately they don’t support Arabic

  11. Gerry wrote on :

    I am very interested in this font issue so I will just throw a few questions in here.
    I wondered for a while how something like this can be done and maintain good performance.

    How do you deploy the font?
    Are the font files sub-setted for individual languages?
    open sans without splitting or sub-setting is around 240kb per style if you take the google version so wouldn’t loading all of these styles multiply that number?
    Regular
    Light
    Italic
    Bold
    Bold italic
    Will u also support other styles such as Condensed styles?
    How many languages do you need to support and therefor scripts?
    Open sans has under 900 hlyphs so If it must function cross platform will this font depend on system fonts for Unicode backup?
    How about Unicode rendering (example: uniscribe, pango, directwrite) on each device? Has this been tested? What kind of rendering does Firefox use?

    Sounds very challenging so hats off to you guys!
    I very much appreciate if you could share how you can overcome such a challenge to make a more beautiful web.

    Kindest regards

    Gerry

  12. Basil Bourque wrote on :

    Why not consider the “DejaVu” family of open source fonts?

    The primary purpose of DejaVu is to provide a wide coverage of characters across the Unicode spectrum. DejaVu is ideal as a fall-back font, used when no other font has a glyph for a particular character.

    The DejaVu fonts are well-worn, having been in use for several years. Many languages are already supported with glyphs, with more being gradually added as active development continues.

    http://dejavu-fonts.org/wiki/Main_Page