Typography


Fira Sans

Designed to integrate with the character of Firefox OS, the Fira Sans typeface also aims to cover the legibility needs for a large range of handsets varying in screen quality and rendering. The Fira font family comes in a Sans Serif with 4 weights (light, regular, medium and bold) all accompanied by italic styles. It can be downloaded here. The package also includes a Mono Spaced variant with 2 weights (regular and bold).


Desktop & Tablet

h1

Search results: 120 puzzle games

font-family: Fira Sans OT;
font-weight: light;
font-size: 30px;
color: #1a1a1a;

h2

Related collections

font-family: Fira Sans OT;
font-weight: light;
font-size: 20px;
color: #1a1a1a;


h1 and h2 are used on desktop and tablet only.


Mobile

h3

Best New Productivity Apps

font-family: Fira Sans OT;
font-weight: light;
font-size: 20px;
line-height: 25px;
color: #797979;

h4

Author: Mozilla

font-family: Fira Sans OT;
font-weight: bold;
font-size: 15px;
line-height: 22px;
color: #797979;

body

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent vel curabitur.

font-family: Fira Sans OT;
font-weight: light;
font-size: 15px;
line-height: 22px;
color: #797979;

category

HEALTH & FITNESS

font-family: Fira Sans OT;
font-weight: medium;
font-size: 10px;
line-height: 12px;
color: #797979;

app title / mobile nav

Facebook

font-family: Fira Sans OT;
font-weight: medium;
font-size: 12px;
line-height: 18px;
color: #797979;

dev / author

Facebook, Inc.

font-family: Fira Sans OT;
font-weight: regular;
font-size: 12px;
line-height: 18px;
color: #797979;


Links, Lists, & Code

price

$1.99

font-family: Fira Sans OT;
font-weight: regular;
font-size: 12px;
color: #4cb1ff;

text link

font-family: Fira Sans OT;
font-weight: bold;
font-size: 15px;
color: #4cb1ff;

list

This game has:

  • Action!
  • Suspense!
  • Romance!
  • Everything!

font-family: Fira Sans OT;
font-weight: light;
font-size: 15px;
line-height: 22px;
color: #797979;

code

Here is a bunch of code!

font-family: Fira Mono OT;
font-weight: regular;
ffont-size: 12px;
fline-height: 16px;
color: #1a1a1a;

Any code snippets on the devHub are displayed in Fira Mono OT.