Web Fonts
Interest in web fonts is under going a revival at the moment with the advent of variable fonts. Choosing a suitable font for a website or brand can be a complicated process with multiple factors to consider.
Text heavy sites would almost certainly require legibility but also find desirable a distict look. Not easy to achieve given that fonts are finite and every one has multiple users. Unless, there are big enough pockets to finance a unique font design.
Also to consider how fonts are percieved as indicators of ‘reliability’, ‘trustworthyness’, ‘dependability’. Perception is not necessary an indication of reality.
How Do Browsers Select Which Font To Display Text?
When browsers were in their infancy default fonts were available based on the operating system on which the are installed. Three generalised font types are generally available, ‘Serif’, ‘Sans Serif’ and ‘Monospace’. Serif style is characterised by decorative letter extensions 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.
Examples of ‘web safe’ fonts listed below.
Arial (sans-serif)
The quick brown fox jumps over the lazy dog
Times New Roman (serif)
The quick brown fox jumps over the lazy dog
Courier (monospace)
The quick brown fox jumps over the lazy dog
Comic (cursive)
The quick brown fox jumps over the lazy dog
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 to 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.
Font styling is adjusted by use of standard CSS 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.
File sizes for variable fonts are inevitably larger than standard fonts.This is one factor that will imhibit the take up of these fonts.
References
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 v-fonts.com