Website fonts. 11 free variable families with italics and Latin Extended.
Arimo, Montserrat and DM Sans lead 11 website fonts, each with a weight axis in one file, italics and Latin Extended for most European languages.
Arimo
Sans for the interface · x-height 0.53 em, stroke contrast 1.4
Loading font…
weight axis 400 to 700 · 4 weights · 4 italics
Montserrat
Sans for the interface · x-height 0.53 em, stroke contrast 1.1
Loading font…
weight axis 100 to 900 · 9 weights · 9 italics
DM Sans
Sans for the interface · x-height 0.53 em, stroke contrast 1.2
Loading font…
weight axis 100 to 1000 · 10 weights · 10 italics
Raleway
Sans for the interface · x-height 0.52 em, stroke contrast 1.2
Loading font…
weight axis 100 to 900 · 9 weights · 9 italics
Roboto Condensed
Sans for the interface · x-height 0.53 em, stroke contrast 1.2
Loading font…
weight axis 100 to 900 · 9 weights · 9 italics
Work Sans
Sans for the interface · x-height 0.5 em, stroke contrast 1.2
Loading font…
weight axis 100 to 900 · 9 weights · 9 italics
Figtree
Sans for the interface · x-height 0.5 em, stroke contrast 1.1
Loading font…
weight axis 300 to 900 · 7 weights · 7 italics
Mulish
Sans for the interface · x-height 0.5 em, stroke contrast 1.3
Loading font…
weight axis 200 to 1000 · 9 weights · 9 italics
Aleo
Serif for articles · x-height 0.51 em, stroke contrast 1.3
Loading font…
weight axis 100 to 900 · 9 weights · 9 italics
Libre Caslon Condensed
Serif for articles · x-height 0.52 em, stroke contrast 2
Loading font…
weight axis 400 to 700 · 4 weights · 4 italics
Epunda Slab
Serif for articles · x-height 0.5 em, stroke contrast 1.3
Loading font…
weight axis 300 to 900 · 7 weights · 7 italics
The list holds 8 sans serifs and 3 serifs, all free to serve from your own site or a font service.
Compare fonts for websites
11 / 11
weight axis 400 to 700 · pick 1 of 11
Arimo
Build faster with fewer tools
Loading font…
Why Arimo fits websites: weight axis 400 to 700, lowercase 77% of the capital height, no display style, x-height 0.53 em, stroke contrast 1.4, 4 italics, and 4 weights.
Web for websites: served from your own site or a font service.
Sans serifs for text and interface
Arimo, Montserrat and DM Sans are the most used of the 8 sans serifs with a weight axis and italics.
Serifs for articles and headings
Aleo, Libre Caslon Condensed and Epunda Slab bring a serif voice to long reads, each variable with italics.
Can I serve them from my own website?
| Free font | Licence | Web |
|---|---|---|
| Arimo | OFL 1.1 | ✓ |
| Montserrat | OFL 1.1 | ✓ |
| DM Sans | OFL 1.1 | ✓ |
| Raleway | OFL 1.1 | ✓ |
| Roboto Condensed | OFL 1.1 | ✓ |
| Work Sans | OFL 1.1 | ✓ |
| Figtree | OFL 1.1 | ✓ |
| Mulish | OFL 1.1 | ✓ |
| Aleo | OFL 1.1 | ✓ |
| Libre Caslon Condensed | OFL 1.1 | ✓ |
| Epunda Slab | OFL 1.1 | ✓ |
- Web (served from your own site or a font service): yes for all 11, OFL 1.1 Permission & Conditions.
- OFL 1.1 text
Which of the website fonts to pick
DM Sans suits website body text, with an x-height of 0.53 em and a weight axis from 100 to 1000 for setting a text hierarchy. Arimo is an option for navigation labels, with an x-height 77% of the cap height and 4 weights. For article headings, Aleo offers a serif face with 9 weights and 9 italics.
Website fonts in CSS
DM Sans has the widest weight axis of these, 100 to 1000, and Arimo the narrowest, 400 to 700, so check the range before you set a heading at 800.
At 16 px the lowercase of Arimo stands 8.5 px tall and Work Sans’s 8.0 px, the range across the 11 website picks.
To pair two of the website fonts, take Arimo from the sans serifs for the interface and body and Aleo from the serifs for article headings.
What the rule selected: the 11 website fonts and their numbers
| Free font | Weight axis | x-height (em) | Contrast | Weights | Italics | Google Fonts rank |
|---|---|---|---|---|---|---|
| Arimo | 400–700 | 0.53 | 1.4 | 4 | 4 | 4 |
| Montserrat | 100–900 | 0.53 | 1.1 | 9 | 9 | 5 |
| DM Sans | 100–1000 | 0.53 | 1.2 | 10 | 10 | 6 |
| Raleway | 100–900 | 0.52 | 1.2 | 9 | 9 | 7 |
| Roboto Condensed | 100–900 | 0.53 | 1.2 | 9 | 9 | 10 |
| Work Sans | 100–900 | 0.5 | 1.2 | 9 | 9 | 11 |
| Figtree | 300–900 | 0.5 | 1.1 | 7 | 7 | 14 |
| Mulish | 200–1000 | 0.5 | 1.3 | 9 | 9 | 18 |
| Aleo | 100–900 | 0.51 | 1.3 | 9 | 9 | 208 |
| Libre Caslon Condensed | 400–700 | 0.52 | 2 | 4 | 4 | 366 |
| Epunda Slab | 300–900 | 0.5 | 1.3 | 7 | 7 | 536 |
Website fonts: questions
Which free font is best for websites?
Arimo, the most used of these 11 on Google Fonts (rank 4), with weight axis 400 to 700, x-height 0.53 em, and 4 weights; Montserrat and DM Sans come next at ranks 5 and 6.
Are these website fonts free for a website?
All 11, from Arimo to Epunda Slab, are under the SIL Open Font License 1.1, which allows a website (served from your own site or a font service).
Can I self-host these website fonts?
Yes, all 11: under OFL 1.1 you may embed and serve the files from your own server or a font service (Permission & Conditions, Condition 2).
Which of these website fonts has the most weights?
DM Sans, with 10 weights and 10 italics; Montserrat has 9 weights and Raleway has 9 weights.
How were these website fonts chosen?
Text on screens in many languages: a plain face with a weight axis in one file, italics and Latin Extended. 76 of the 1,674 free fonts we checked pass that rule for websites. The 11 here are the most used on Google Fonts, from Arimo at rank 4 to Epunda Slab at rank 536, one font a family.