Background

Firefox OS was aimed at low cost smartphones in developing markets. Finding the right typeface was key, as it would influence the visual design and affect the user experience for years to come and for users across the globe. We faced one problem: No one other than Google distributes a typeface optimized for small screens, with extensive localization support and free distribution to the open source community. Licensing a typeface for an OS is a seven figure endeavour and making a new one is not any less expensive. In this case, we knew that creating a typeface was the right choice to ensure great visual brand alignment and provide Mozilla with the ability to distribute it to our community at no additional cost.

From the start, Firefox OS has been a collaborative project with various partners specializing in many disciplines from engineering to UX. One of those partners, Telefonica Digital, had close ties to Erik Spiekermann, type legend and coincidentally the designer behind FF Meta Sans, our corporate brand typeface. With this connection, it was only natural for us to work with his team on this project.

Process

As the visual design owner of Firefox OS in an “in-house” environment, my role for the project was to be both art director and producer (one who secures funding) for this typeface. My experience working in-house as the design owner for Firefox OS blurred the lines between client and designer, as I had to be both. With an initial budget that was relatively small, this project spanned multiple years, with further funding being secured as we expanded the glyph set from one language to the next based on the Firefox OS release product roadmap.

Establishing the art direction for the new typeface, which is now known as Fira Sans, was by far the easiest part of the process. It made sense to align this new typeface closely with Meta Sans and maximize its resemblance to our established brand identity; we created a sibling typeface, envisioning a day when we could switch to Fira for all of Mozilla’s identities. 

Several significant changes to FF Meta Sans were made in the process. FF Meta Sans was designed in the late 80s for the Deutsche Bundespost with a focus on distinguishable glyphs and high legibility with neutral spacing due to its use in print, primarily on low quality paper. Fast forward nearly 25 years: media has changed and our display media is digital.

In a digital environment, hinting greatly alters glyph fidelity, more so than what bleeding ink does in print, meaning that shapes need to be more direct with less complexity, especially at small sizes. When compared to FF Meta Sans, Fira Sans is wider, has less variation in line widths and fewer stylistic elements, allowing it to render with more clarity. The x-height needed to increase for improved legibility, and a compromise in width needed to be attained to balance between shape distinction and letter count per line.

Other characteristics of the Fira Sans typeface include:

• Form differentiation between the glyphs of 1, l and I: the lowercase i for instance has a little “kick” to add a more casual feel.
• Extra care was given to the “r-n” combination to create a greater distinction between the forms so that they would not read as  “m”
• Looped lowercase “g”
• Lining figures have slightly smaller numbers than the uppercase characters
• The number 1 in lining figures doesn’t have a slab serif and is kerned closer to the other characters while the 1 in tabular figures does a have slab serif foot, so it's much more uniform

The overall design process for the first cut only took a few months where I would receive beta fonts with sets of glyphs, load them onto our test phone hardware, evaluate the rendering and then send notes back. Our focus was on creating a balance of small screen legibility and visual character. Our goal was to create a typeface that would display with an acceptable contrast, tone and line letter count while still communicating the casual and friendly aesthetic one expects in a Mozilla product.

Challenges

Overall the creative collaboration went very well. We experienced no hiccups working with some of the best type designers in the industry. We did experience two challenges in-house:

The Name
The process of naming the typeface involved consulting the Mozilla brand team, Erik Spiekermann's group and the UX teams (Firefox OS and Telefonica). It took us over three months with 100+ submissions. In the end we decided on Feura Sans. The name was inspired by our brand messaging and the desire to incorporate a reference to "fire", as it would be used in Firefox products. The root is "feu", referencing "fire" in various languages from our launch markets. Our research also revealed that the letter combinations made it a unique word, and a background check by our lawyers confirmed that it is not used by any similar products. The last letter being an "a" gives it a softer ending, while sounding progressive and confident. 

...and then at the 11th hour…

There were concerns from Erik Spiekermann who is German, that perhaps “Feura” sounded a little too much like “Führer” which would have an extremely uncomfortable association. Feura became Fira, which maintains many of the attributes we liked, dropping the element that caused concern.

Version One & Budget Limitations

Due to our limited budget, the first release of Fira Sans had to be a balancing act between depth of typographic styles and breadth of glyph coverage. We needed to support all the European languages at launch, so compromises had to be made with the range of weights. Regular and bold weights would be a given, but the contrast between the two was far too extreme within the UI, and limited the use flexibility of the bolder weight. We wanted to have a distinct thicker weight for a highlight (bold) but with the ability to use as a stand alone on certain UI elements.

In the end we chose 3 distinct weights to best cover the entire range of potential app and system communication.

1. Light: For headlines

2. Regular: For body copy

3. Medium: For app labels, indicators and emphasized text
 

Result

I was given great trust to direct and sign off on the design, so after its completion there was a big question: Will people actually like it? Having distinct character and high flexibility allowed Fira to grow with Firefox OS and onto many form factors, to work seamlessly with all apps and web content.

Although completed in late fall of 2012, we targeted the revisions of Fira Sans to align with Firefox OS releases. On February 21, 2013, the first cut shipped to our users across Europe on Firefox OS smartphones. By the summer, we had Fira 2.0 with a monospaced variant and a true bold weight which shipped to users on December 9 that same year with Firefox OS 1.2.

As Firefox OS expanded its global reach, so did the funding for Fira allowing for further weight variations and additional language support. By spring 2014 with the release of Fira 3.1, we had 16 weights and it seemed like the right time to make it available to everyone for download and open source it by allowing design contributions through our github repo. The success of Firefox OS became crucial to the evolution of Fira, as we moved into a 6 month release cycle we were able to have a predictable roadmap. With the emergence of $35 smartphones in Africa, by spring of 2015 Fira 4.0 supported over 500 local African glyphs. The move to support feature phones allowed for the creation of a condensed variant by fall 2015. 

Interested in submitting a case study? Download 'Guidelines for Contributing Content' and email news@rgd.ca.