Contacts Contacts
Menu Menu

#Design

Variable Font, history of a typographic revolution

Gianluca Vedovato
agosto 2024 - 4 minuti

The next big revolution in the use of fonts on the web took place in 2016 with the release of OpenType version 1.8. Four pillars of world technology such as Apple, Microsoft, Google and Adobe joined forces to create the Open Type font variation, better known by the name Variable font.

Before going into detail, let us take a step back in time and brush up on a few pages of history.

History of fonts on the web

In the early days of the web, fonts could only be selected via browser settings, with no possibility of using certain fonts for different sites. It was not until the mid-1990s that the first fonts for the web were designed: Georgia and Verdana . These, together with the more common system fonts, were the only ones used on sites at the time. For the following years, despite support for @font-face, the only fonts that could be used were those installed on devices, and to get around this problem, the only solution was to use images instead of text.

It was not until 2012, thanks to the CSS3 Fonts Module, that it became possible to download fonts for display on websites. Thanks to this system, fonts were uploaded to the server and downloaded only for display within the site, without the need to install files in the operating system.

Variable fonts, what they are and how they are constructed

Whereas until 2016, each font family had to be contained in several files, with variable fonts only one font encompassing several styles and variants is required. In this way, the weight of font files to download and HTTP requests become far less, and it will be possible to have a more varied design without any limitation on the number of fonts used.

Font variations occur through interpolation between various font versions. Interpolation in mathematics means the approximate determination of intermediate values of a function or quantity from a number of known values. In typography, interpolation means the generation of new fonts from certain existing instances. Thus, from certain font versions (called masters ), it will be possible to generate an almost infinite number of fonts with characteristics intermediate to the master forms. For example, it will be possible to generate numerous intermediate weights between the regular and bold versions. In addition to the weight, it will also be possible to modify all structural characteristics such as width, contrast, thanks, optical size, etc., thus making it possible to obtain an almost unlimited number of variations of the same font.

A variable font is contained in a single file where various axes are defined on which the shape will be modified. By modifying the values on the axis, new fonts will be generated through the interpolation of points on the master shapes. When opening the file, the axes will have a default value. It will then be possible to create font instances to orient the designer to certain predefined styles (such as the most popular regular, bold, extended, condensed, etc.). The number of axes modifiable on a font is very large (65,536, to be precise), and the name of the axes is customisable at the user’s discretion, although there are some standards to follow.

Why use variable fonts?

Variable fonts become very useful when it is necessary to use several versions of a font within a website. It will no longer be necessary to upload multiple files to a site, thus lengthening the loading time of the web page. Only one file containing several weights and variations of the font you want to use will suffice.

For example, if we were to use 5 weights/variants of a font (Light, Regular, Bold, Semi Bold, Condensed Regular) we would have to upload 5 files for a total weight of about 200Kb and we would still only be forced to use these 5 versions of the chosen font. A variable font, on the other hand, is enclosed in a single file weighing around 80Kb. Thus, in addition to saving on the weight of the files to be uploaded, we would also save on HTTP requests and greater creativity on the part of the designer, who can use a much larger number of fonts than in the past.

They may also be interested in these items
See all articles See all articles