Meteor Website Design

Web Fonts

web design

Web fonts

February 10, 2020

Web fonts

Interest in web fonts is under going a revival at the moment with the advent of variable fonts.

How Do Browsers Select Which Font To Display Text?

All browsers have a list of default fonts based on the operating system on which the are installed. Three distinct font types are generally available, 'Serif', 'Sans Serif' and 'Monospace'. Serif style is characterised by decorative markings and often used in printed matter books etc. 'Sans Serif' is without decoration and is usually considered easier to read especially on electronic screens. In 'Monospace' type all letters are equally spaced.

Font preferences can be set on the page but if the font is not available then the defaults will be used.

Custom Fonts

There are a number of possible ways to acquire the use of a font. They can be purchased or paid for by the number of page views or use the freely available ones.

The Price Of Using A Custom Font

Since all custom fonts have to be downloaded to the browser before they can used, there is an inevitable performance hit.

At the time if writing there are discussions about how best to load fonts, whether for instance to self host the font on the server and with a mixture of instructions as to how and when during the loading cycle the best performance can be achieved.

Really it depends on how the font is acquired. If the font is available from Google probably better to use that, Google provides unbeatable infrastructure and highly optimized and limited character fonts. Self hosting these fonts will almost certainly take at least twice as long and probably much longer ti install on a page.

Variable Fonts

The introduction of variable fonts allows the greatest degree of creativity for the web designer. Instead of using different files for font weights and styles, variable font files combine all possible style permutations in one or two files.

The font typeface is adjustable along 'axes of variation' five of which are standard 'registered' and a separate 'custom' which is limitless.

The five standard axes correspond to weight, width, italic, optical size and grade.

Weight corresponds to font-weight, that is commonly used 'normal', 'bold' typeface.

Width is how much space a word takes, dictated by the spacing between letters.

Italic again corresponds to the standard italic typeface.

Optical Sizing is adjusting for best rendering at large and small type sizes.

Grade allows the possibility to change font weight without changing spacing and application when dealing with screen resolution.


Can I Use developers guide Can I Use

Google Fonts (Free to use) Google free Fonts

Source of variable fonts, a mixture of paid and open source fonts and allows experimentation with fonts variations