Web or System Fonts - Guillermo Garron

Introduction

When the World Wide Web was born, websites were created using pure HTML, its structure were made by using tables. I still remember those days, pages were not as eye-catching as today, but there was one thing that was better, they were light, one really long page, full of text was only few Kbytes, this post explains that enough.

Let’s review some concepts about web fonts and system fonts (safe web fonts)

Fonts on websites

The first webpages started in 1991 without specifying the fonts to be used, that job was left to the Operating System. That way your webpage may look different to every visitor, depending on what fonts his system had, this is because each operating sysmtem comes with some fonts pre-loaded. At some point Cascading Style Sheets (CSS for short) came to the world, and it was now possible to specify which font to use, but the designer had to be careful, as not every system had every font, so the most common fonts were used, and became the so-called Safe Webfonts, safe because it was safe to use them, those fonts are: Arial, Helvetica, Times, Times New Roman, Palatino, Garamond, Bookman, Avant Garde, Courier, and Courier New. Few options and not all of them available on every computer.

CSS

On December, 1996 the first version of CSS was released, and with it, web delevopers got new ways to control typography on the sites they were creating, with that first release they got these tools.

font-family
font-style
font-variant
font-weight
font-size

It was possible to specify the family (Arial, Helvetica, etc) font to be used, the style (normal, italic, etc), the weight which define how bold the fond is and size that defines the size of the letter, also affecting its thickness.

As useful as this was, web developers still had to rely on pre-loaded fonts on every operating system, therefore they used the safe webfonts to stay on firm ground.

Webfonts

Major changes came in 2.002 when webmasters got @font-face, since then you can use it in CSS files to have better control on how your website looks like

@font-face {
font-family: myFont;
src: url(myfont.woff);
}

The command above let the webmaster specify which specific font is going to be used by the browser, and where that font is located, this way the webmaster can be sure that all browsers will render the website the same.

As soon as these tools became available designers used them like if there were not tomorrow, sites like Font Squirrel or TypeKit was used a lot, But with the appearance of Google Fonts on the market everyone got crazy, almost all sites started using webfonts.

Systemfonts

As stated above System fonts are the fonts preloaded with the operating system or those that have later installed on it, yes, new fonts can install on MacOS, Windows or Linux, so all of them are system fonts, but the webmaster will never know which fonts are installed on each system so if no webfonts are going to be used then the best option is to use safe webfonts

How to use system fonts safely?

If one wants to use systemfonts on his next project then this might be the CSS needed code.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

With that line in the CSS file the website will use system fonts.

It is advisable to check how the website renders on different operating systems and/or web browsers.

Impact of webfonts

The use of web fonts makes the website look the same for everyone, gives a lot more options to the webmaster, but nothing is free, and the cost is website performance.

One of the aspects where web fonts impact more in the size of the website, and the speed of it, there are ways to reduce the impact, let’s see.

Increasing the size of the website

As there are four major font file’s formats WOFF2, WOFF, EOT y TTF and unfortunately none of them is universally accepted by all browsers, usually all of them should be loaded, the weight of them can be reduced by compressing them using gzip (gzip should not be used with WOFF, it is already optimized). It can also be used a tool like Web font generator by FontSquirrel and use the expert mode to tweak the font and have it optmized.

The average web font size would be 80 Kbytes, more or less, if you compress them you can get up to 50% less weight.

Blocking the website render

The use of web fonts may block the website rendering until the web font is fully downloaded, this can be avoided by using font-display css directive, like in the example below:

@font-face {
    font-family: 'Source Sans Pro';
    src: url('sourcesanspro-bold-webfont.woff2') format('woff2'),
         url('sourcesanspro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

font-display has different options:

block: The website rendering will be blocked until the webfont is downloaded, this option should be avoided.
fallback: The website rendering will be blocked for 100ms if the webfont was downloaed it will be used, otherwise the fallback font will, as soon as the webfont is downloaded, the browser will swap fonts.
optional: The browser will “decide” if the web font will be downloaded or not, these setting is useful for visitors with slow Internet conections
swap: Will not block the website rendering at all, will always use the fallback font and swap to the webfont as soon as it is downloaded.
auto: Lets the browser “decide” which of the above options to use, it will use block almost every time.

I think the best ones are swap or fallback, swap is the best in render times, but the website flashes and visitors may find that annoying, on the other side, fallback has a small blocking time, but if the font takes to much time in loading, then the browser will not use it at all, and your website will endup using the system fonts.

I would use swap for icons, and fallback for the rest of web fonts.

When to use webfonts?

Now, webfonts are not always that bad, there are times when you really need them, let’s see some examples.

Icons

Maybe the best example on when web fonts should be used is icons, if the design needs the use of icons, then they should be loaded by the web browser before use them, some good providers are: symbolset and FontAwesome, Google can also be used.

Fonts are part of the Company Image

If the website owner is a company that uses an specific font in all its marketing materia, then its website should use the same font, and the developer must use it when designing for such company.

Personal taste

For personal blogs they are not really needed, but a personal blog is just that, personal, and should meet the ownner’s expectatives, therefore web fonts can be used or not.

I personally think that they should be avoided to make it easier for visitors to load the page, frequent visitors will read personal blogs on RSS readers anyway.

Conclusion

Some final words here, typography is an importat part of a website design, being it a corporate website or a personal blog, but site performance is also a really important aspect to consider, designers must consider both and try to balance between them.

When to use web fonts over system fonts will vary from site to site, both has pros and cons, and when using either of them good practices should be applied.