Web-Fonts

Web-Fonts (webové fonty, Webbtypsnitt, Webschriften, fuentes web, Webskrifttyper, verkkofontteja)

Intro

By implementing web-font, your website visitors can perceive the text in de­sired typeface even when one is not installed on their device (as sys­tem-fonts are).1

Uniqueness and originality

In contrast to system-fonts, web-fonts can often emphasise uniqueness and originality. They are one of the instruments used to make your brand more outstanding.

The more custom and rarely-used the typeface is, the more the above phenomena are felt by the website visitors, mostly subconsciously. But...

Use them with caution

Besides the advantages they offer, web-fonts are not ap­pro­pri­ate at any cost. They should be implemented with caution in order to avoid some commonly overlooked troubles. The following aspects should be considered:

1. Rare and unique typefaces

A rarely used type has a good chance being unusual to the readers, as readers are not quite used to unusual forms. The headlines might be ap­pro­pri­ate and even interesting looking in such typeface, but the main text requires good legibility and clarity.

Display Typeface

Make sure readability is good enough, otherwise the written content will be harder to absorb by your website visitors. The appropriate balance be­tween uniqueness and usability can be beneficial.

2. Displays pixel density

In general, our website visitors’ displays still have pretty low pixel density, mostly on computers.2 Because of low-rendering accuracy, the (web) fonts could look less clear there, especially the ones from the Serif family or in small size.

Serif small

What to do? Verify how the desired web-font is rendered on such displays. Note also that some system-fonts are customly pre-adjusted so they can render the content more effectively.

3. Text rendering

Some text-renderings can harm readability of particular (web) fonts. And sometimes they simply look too “pixelated” on curves. Here are couple of examples:

Comparison of text rendering in Firefox and Chrome web browser under Windows OS

Figure 1: A text rendered in Mozilla Firefox web browser with truncated symbols (top) and Google Chrome (bottom), both under Microsoft Windows OS.

Comparison of text rendering in Firefox web browser under Windows and Mac OS

Figure 2: Top – a text rendered in Firefox (Windows OS), where the appearance of letters a, c, e, o, and s is truncated. Below, the text is rendered correctly in Firefox under Mac OS.

Testing if text is “pixelated” on curves in Firefox and Chrome web browser under Windows OS

Figure 3: The curves appears to be pixelated in Firefox for Windows (top), while in Chrome for Windows, they are rendered more smoothly (bottom).

Testing if text is pixelated on curves in Firefox and Chrome web browser under Windows OS

Figure 4: Firefox rendering under Mac OS – thicker (top) and Windows – sharper and more pixelated (middle). Some letters appear to be a bit truncated in Chrome for Windows (bottom).

Make sure how your (web) typography responds at various text-rendering.

1 The list of default system-fonts on Windows and Mac OS can be found at the following addresses:
https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
https://en.wikipedia.org/wiki/List_of_typefaces_included_with_OS_X

2 Hi-quality paper publications can have a den­si­ty of dots up to 2400 DPI, while screens have up to ≈ 282 PPI. Yet most screens have around 100 PPI. Some users claim that 220 PPI is very good pixel den­si­ty when look­ing from a dis­tance of 40 cm. All data is from 2014.

Related articles: