Firefox OS Typeface

Basics

Designed to integrate with the character of the OS, the Fira Sans typeface also aims to cover the legibility needs for a large range of handsets varying in screen quality and rendering. When working with Fira Sans it is recommended that micro font sizes that fall below our guidelines are avoided.

Fira Sans Light

Fira Sans Light

Fira Sans Regular

Fira Sans Regular

Fira Sans Medium

Fira Sans Medium

Fira Sans Bold

Fira Sans Bold

Text Styles

This is a list of the most common styles, and the basics you may need.

Note that the combination of sizes listed here are calculated for a 165 ppi screen. If you’re working with a different resolution you can use the conversion formula provided below.

Name Description REM Point Weight Use cases Sample
h1 Heading 2.5 11 Regular / 400 Headers Heading example
h2 Subheading 1.6 7 Regular / 400 Subheaders, Dialog titles Subheading example
p.large Body Large 2.3 10 Light / 300 Dialogs Body Large example
p /ul Body 1.9 8 Regular / 400 Body text, lists, default size Body example
p.alt Body Medium 1.7 7 Medium / 500 Med. body text and btn label Body Medium example
p.small Body Small 1.5 6.5 Regular / 400 Status bar Body Small example
p.mini Body Mini 1.4 6 Regular / 400 Fine print and status bar Body Mini example
p.micro Body Micro 1.3 5.75 Regular / 400 Application icon label Body Micro example

Usage Examples

Example

Converting Type, Sizes in Point, Pixels and REM

The calculations are density dependant and you may switch from one pixel density to another to obtain the right relationship between points and rems.

This is the formula to convert point to rem depending on the device’s pixel density.

Conversion Formula

We use typographic points as a base for all our measurements, this was done as point sizes are universally understood in design and are locked to a physical measurement. Firefox OS currently reads type best in pixels, we convert our spec’d point sizes to pixels per resolution. Here is the formula we used:

1 inch = 72 point (pt)

ie.
ZTE Open has 165 pixels per inch (ppi) = 72 pt
165ppi / 72 pt = 2.29167px (the amount of pixels in 1 point at device resolution)

I want my body text to be 8pt, how big would that be on a ZTE Open in pixels?
8pt x 2.91667px = 18.33333px

We want to round up, because bigger type is better. So 8pt is actually 19px on our ZTE Open device.

Type Unit

10 Pixels = 1 rem

Font Weight

PSDs CSS
Light = 300
Regular = 400
Medium = 500

Download

The Fira font family comes in a Sans Serif with 4 weights (light, regular, medium and bold) all accompanied by italic styles. The package also includes a Mono Spaced variant with 2 weights (regular and bold).