readium-css

Open Source and Libre Fonts We Can Recommend

[Implementersā€™ doc] [WIP]

While we recommend using system fonts to get the best performance whenever possible, implementers might want to use Open Source Fonts to offer more choice to users. On the Android platform, for instance, system fonts are limited to one typeface per generic family (serif, sans-serif, fantasy, monospace, and cursive), which means implementers donā€™t get a lot of options out of the box.

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

  1. they have enough styles (at least the 4 ā€œcore stylesā€ i.e. regular, italic, bold, bold italic) so that implementers donā€™t break authorsā€™ expectations;
  2. they can be used in body copy;
  3. they are designed with quality 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-based languages.

Hereā€™s the complete list of those 28 fonts:

How were those fonts reviewed

Each of the 28 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), and in different reading modes (day, sepia, night).

Then each font was:

  1. compared to its closest reference (system font);
  2. tested against the latin, cyrillic and greek alphabets and 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. Font stacks should consequently be fine-tuned so that this character doesnā€™t disrupt the reading experience.

Results

It is important to state that implementers canā€™t really go wrong with those 27 fonts.

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.

The 12 recommended fonts are simply providing the best rendering in the worst situations 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 which are not recommended.

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

Buggy

Mediocre

Average

Good

Excellent

An extended selection of 13 typefaces are recommended to offer implementers some flexibility. With an extended solution, it is likely that all apps leveraging Readium CSS wonā€™t end up using the same exact selection.

Note: Supported Languages focus on diacritics. Support for languages using the latin alphabet, like English, is implied.

Serif fonts

Charis SIL

Charis SIL compared to Charter. The typeface appears a little bit bolder but shares Charterā€™s metrics. When comparing an entire paragraph, it is really hard to tell which is which as they originate from the same ā€œmaster.ā€

Global info:

Technical details:

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

Faustina compared to Charter. The typeface looks smaller and feels definitely condensed. When comparing an entire paragraph, the fact its x-height is larger becomes really visible as it allows for a shorter line-length while appearing larger in weight. Those specificities may help on narrow screens.

Global info:

Technical details:

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

IBM Plex Serif compared to Charter. The typeface is definitely wider, larger and bolder. When comparing an entire paragraph, this become obvious in the sense fewer words fit on a line. This could become an advantage on larger screens, as the user wonā€™t have to increase font-size.

Global info:

Technical details:

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.

Literata

Literata compared to Georgia. The typeface is noticeably larger and bolder. When comparing an entire paragraph, this become obvious in the sense fewer words fit on a line. This could become an advantage on larger screens, as the user wonā€™t have to increase font-size.

Global info:

Technical details:

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: small caps, numeric figure values, numeric spacing values.

Merriweather

Merriweather compared to Iowan Old Style. Although more condensed, the typeface has been designed for screens and offers a larger x-height and bolder strokes. This shows when comparing an entire paragraph, as fewer words fit on a line and an extra line is even created.

Global info:

Technical details:

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

PT Serif compared to Charter. The typeface looks slightly larger and makes for a sharper substitute. When comparing an entire paragraph, it is visibly larger but fits the same amount of words on each line.

Global info:

Technical details:

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

Vollkorn compared to Bembo (ET variant). The typeface is significantly larger and bolder; its vertical alignement is also a lot lower. When comparing an entire paragraph, those traits become obvious and offer a better design for reading on screens.

Global info:

Technical details:

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

Clear Sans compared to Trebuchet MS. The typeface appears a little bit smaller and the aperture of some glyphs like lowercase D appear more enclosed. When comparing an entire paragraph, it feels a little bit smaller but some letters like capital I are easier to differentiate, which is a plus for accessibility.

Global info:

Technical details:

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

Fira Sans compared to Arial. The typeface is decidedly more condensed, and its letter-spacing larger. When comparing an entire paragraph, the metrics of both fonts donā€™t look that much different, but Fira Sans brings the extra personality some users require in a bookish context.

Global info:

Technical details:

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

Libre Franklin compared to San Fransisco, the Appleā€™s system typeface. Libre Franklin appears a little bit thinner and feels definitely larger. When comparing an entire paragraph, it shows, although it is capable of keeping the same amount of words on each line.

Global info:

Technical details:

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

Merriweather Sans compared to San Fransisco, the Appleā€™s system typeface. It appears bolder and feels decidedly larger. This is remarkable when comparing an entire paragraph, especially as its design is less neutral.

Global info:

Technical details:

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

PT Sans compared to Seravek. The typeface appears more condensed. When comparing an entire paragraph, it also feels a little bit thinner but fits the same amount of words on each line and share some of Seravekā€™s traits.

Global info:

Technical details:

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 Sans Pro compared to Seravek. Its x-height is noticeably ā€“ but not remarkably ā€“ larger. When comparing an entire paragraph, both feel like they share some common traits, despite very visible differences in the drawing of their glyphs.

Global info:

Technical details:

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

Microsoft has been investing a lot of resources in designing 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, extensive support of Open Type features, and high quality rendering, even on mediocre screens.

As a consequence, we strongly recommend prioritizing such system fonts for the core selection and using Open Source fonts as extras. A list of system fonts available can be found in Microsoft Typography docs.

ReadiumCSS is shipping with 2 a11y-related fonts to be found in the dist/fonts folder:

Those fonts should be applied by those exact names as we need very precise fallbacks for missing characters. We may create variables in the future, once those fonts have been properly reviewed and validated.

We can also recommend Open Dyslexic, either in addition to or replacement of AccessibleDfa.

In addition to Google Noto Fonts, we can currently recommend:

In addition to Google Noto Fonts, we can currently recommend:

In addition to Google Noto Fonts, we can currently recommend:

In addition to Google Noto Fonts, we can currently recommend:

This site is open source. Improve this page.