Open source and libre fonts we can recommend

[JayPanoz]

This is a draft for a future implementers’ doc. Please feel free to review the recommendations.

While we recommend using system fonts to get the best performance whenever possible, implementers might want to use Open Source Fonts in order to provide users with more choice. On the Android platform, for instance, system fonts are limited to one typeface per family, which means you don’t get a lot of options out of the box.

Consequently, amongst the thousands of fonts available online, a pre-selection of 26 have been reviewed in details. Those typefaces were selected based on multiple factors:

1. they have enough styles (4: regular, italic, bold, bold italic) and don’t break authors’ expectations;
2. they can be used in body copy;
3. they are of good quality and were designed with screen rendering in mind;
4. they can be free alternatives to system fonts available on other platforms;
5. they offer good-enough support for at least latin languages.

Here’s the complete list of those 27 fonts:

• IBM Plex Sans
• IBM Plex Serif
• Crimson Text
• Spectral
• Vollkorn
• Lora
• Gandhi Sans
• Gandhi Serif
• Gentium Book Basic
• PT Sans
• PT Serif
• Merriweather Sans
• Merriweather Serif
• Alegreya
• Heuristica
• Bitter
• Charis SIL
• Faustina
• Volkhov
• Libre Franklin
• DejaVu Sans
• Rubik
• Source Sans Pro
• Fira Sans
• Proza Libre
• Rosario
• Clear Sans

How were those fonts reviewed

Each of the 27 fonts has been undergoing tests in real rendering situations.

They were rendered on the Android, iOS, MacOS, and Windows platforms, using SD and HD displays when possible, in multiple browsers (IE11, Edge, Safari, Chrome, Firefox).

Then each font was:

1. compared to its closest reference (system font);
2. tested against the latin, cyrillic and greek languages;
3. tested against the small capitals and numeric OpenType features.

Note: For some reason, a lot of Google Fonts don’t have the “™” character so you’d better fine-tune your font-stacks.

Results

It is important to state that you can’t really go wrong with those fonts. We simply decided to go with fonts providing the best rendering in the worst situation possible (Windows ClearType on a mediocre screen), and the best language support as well. If you don’t have to support Windows, for instance, then you can try fonts we don’t recommend.

We sometimes forget that users can’t necessarily afford bleeding-edge technology, which is why it was important to review those fonts in various conditions.

For your information, here are the results for Windows ClearType rendering at 1em (or 100%).

Buggy

• IBM Plex Sans (will become excellent once hinting issues are fixed)

Mediocre

• Alegreya
• Crimson Text (supports latin + cyrillic + greek though)
• Lora
• Spectral (maybe try using medium instead of regular on Windows)

Average

• Gentium Book Basic
• Heuristica
• Volkhov
• DejaVu Sans
• Faustina (Average+)

Good

• Vollkorn
• PT Serif
• Bitter (the Google Fonts version was reviewed but the FontSquirrel version is more complete)
• Charis SIL
• Rubik
• Source Sans Pro
• PT Sans
• Gandhi Serif

Excellent

• IMB Plex Serif
• Merriweather Sans
• Merriweather
• Gandhi Sans
• Fira Sans
• Proza Libre
• Rosario
• Clear Sans

Recommended Typefaces

Twelve typefaces are recommended so that implementers can pick a few among this extended selection.

Note: Supported Languages focus on diacritics. Support for latin languages like English, which are not using diacritics, is implied.

Serif fonts

Charis SIL

• Source: https://software.sil.org/charis/

• Google Fonts: NO

• Design: SIL International

• License: SIL-OFL

• • *

• Reference: Charter

• Classification: Slab

• Styles: 4

• Metrics:

  • Contrast: TBD
  • x-height: TBD
  • weight: TBD
  • width: TBD

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic.

OpenType Features: none

Faustina

• Source: https://github.com/Omnibus-Type/Faustina

• Google Fonts: YES

• Design: Omnibus Type

• License: SIL-OFL

• • *

• Reference: Charter, Bookerly

• Classification: Slab

• Styles: 8

• Metrics:

  • Contrast: 0.39
  • x-height: 0.76
  • weight: 0.06
  • width: 0.45

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish.

OpenType Features: none

IBM Plex Serif

• Source: https://github.com/IBM/type

• Google Fonts: NO

• Design: IBM

• License: SIL-OFL

• • *

• Reference: Georgia, Droid Serif

• Classification: Modern

• Styles: 6

• Metrics:

  • Contrast: TBD
  • x-height: TBD
  • weight: TBD
  • width: TBD

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish.

OpenType Features: none

Merriweather

• Source: https://fonts.google.com/specimen/Merriweather

• Google Fonts: YES

• Design: Sorkin Type Co

• License: SIL-OFL

• • *

• Reference: Iowan Old Style

• Classification: Modern

• Styles: 8

• Metrics:

  • Contrast: 0.51
  • x-height: 0.75
  • weight: 0.08
  • width: 0.52

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic.

OpenType Features: none

PT Serif

• Source: https://fonts.google.com/specimen/PT+Serif

• Google Fonts: YES

• Design: ParaType

• License: Paratype PT Serif Free Font License

• • *

• Reference: Charter

• Classification: Slab

• Styles: 4 (+ 2 for captions)

• Metrics:

  • Contrast: 0.55
  • x-height: 0.71
  • weight: 0.06
  • width: 0.47

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic.

OpenType Features: none

Vollkorn

• Source: http://vollkorn-typeface.com

• Google Fonts: YES

• Design: Friedrich Althausen

• License: SIL-OFL

• • *

• Reference: Athelas, Bembo

• Classification: Modern

• Styles: 8

• Metrics:

  • Contrast: 0.53
  • x-height: 0.68
  • weight: 0.06
  • width: 0.45

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic

OpenType Features: small caps, numeric figure values, numeric spacing values (and more)

Sans-serif fonts

Clear Sans

• Source: https://01.org/clear-SANS

• Google Fonts: NO

• Design: Intel

• License: Apache 2.0

• • *

• Reference: Trebuchet MS

• Classification: Sans

• Styles: 8

• Metrics:

  • Contrast: TBD
  • x-height: TBD
  • weight: TBD
  • width: TBD

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic, Greek.

OpenType Features: none

Fira Sans

• Source: https://github.com/mozilla/Fira

• Google Fonts: YES

• Design: Carrois Apostrophe for Mozilla

• License: SIL-OFL

• • *

• Reference: Seravek

• Classification: Humanist

• Styles: 18

• Metrics:

  • Contrast: 0.25
  • x-height: 0.76
  • weight: 0.07
  • width: 0.42

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic, Greek.

OpenType Features: none

Libre Franklin

• Source: https://github.com/impallari/Libre-Franklin

• Google Fonts: YES

• Design: Impallari Type

• License: SIL-OFL

• • *

• Reference: Arial, Helvetica, San Fransisco, Franklin Gothic

• Classification: Sans

• Styles: 18

• Metrics:

  • Contrast: 0.28
  • x-height: 0.71
  • weight: 0.07
  • width: 0.44

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish.

OpenType Features: none

Merriweather Sans

• Source: https://fonts.google.com/specimen/Merriweather+Sans

• Google Fonts: YES

• Design: Sorkin Type Co

• License: SIL-OFL

• • *

• Reference: Arial, Helvetica, San Fransisco

• Classification: Sans

• Styles: 8

• Metrics:

  • Contrast: 0.30
  • x-height: 0.75
  • weight: 0.08
  • width: 0.45

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish.

OpenType Features: none

PT Sans

• Source: https://fonts.google.com/specimen/PT+Sans

• Google Fonts: YES

• Design: ParaType

• License: Paratype PT Sans Free Font License

• • *

• Reference: Seravek

• Classification: Humanist

• Styles: 4 (+ 2 for captions + 2 for narrow)

• Metrics:

  • Contrast: 0.16
  • x-height: 0.71
  • weight: 0.06
  • width: 0.39

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic.

OpenType Features: none

Source Sans Pro

• Source: https://github.com/adobe-fonts/source-sans-pro

• Google Fonts: YES

• Design: Adobe

• License: SIL-OFL

• • *

• Reference: Seravek

• Classification: Humanist

• Styles: 12

• Metrics:

  • Contrast: 0.20
  • x-height: 0.74
  • weight: 0.06
  • width: 0.39

Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish.

OpenType Features: numeric figure values

Windows

We recommend picking system fonts if you don’t find any in this list of recommendations. Indeed, Microsoft has been investing a lot of resources to design fonts that render perfectly on this platform, especially with ClearType. Typefaces like Cambria, Constantia, Arial Nova, Georgia Pro, Sitka, Verdana Pro, and more, offer a large amount of styles, excellent language support and perfect rendering, even on mediocre screens.

There’s really no need to use an alternative if you can use those typefaces.

[JayPanoz]

[Update] Added Intel’s Clear Sans to the review and recommended list as I wasn’t particularly happy with Rubik.

[JayPanoz]

This is now in docs, in a more advanced state and much better shape that this issue so it’s time to close it.

Any additional recommendation will be made in docs on the develop branch, especially for languages we deal with in i18n but please feel free to open a dedicated issue for each script/language if applicable.