Variable typography is considered the future of typography for Web development.
But why, and how to put it in place, is what we will develop in this article.
What is Variable Typography for?
When we code a website, for each variant of a chosen typography (italic, bold, plus or minus size), we need to generate a different file. This slows down the download of a web page, which will have to call all these font files.
Variable typography makes it possible to group all the combinations of a font into a single file, and thus speed up the loading speed of a page.
This process also ensures that the display of text is responsive, making it automatically adaptable to all screens.
Can Anyone Use Variable Typography?
Given the benefits it represents, it makes sense to ask why variable typography is not yet used automatically by all web developers.
Why deprive yourself of such a technological advance?
Simply because it is not yet effective for all operating systems.
So, for GNU / Linux, the most recent version of Linux Freetype is required. For macOS, only versions after 10.13 support variable fonts.
It is therefore a technique that is still in full development, and that can not be implemented everywhere immediately. To avoid differences between browsers, it is still useful to load the files corresponding to each font variation.
How to Set Up Variable Typography?
CSS provides access to all variations of a font using the @font-face reference, which allows you to define which fonts to use to display the text of web pages.
It no longer becomes necessary to depend solely on the fonts installed on users’ workstations.
Technically, the most important concept for variable fonts is the axis of variation. It describes the interval that will vary the appearance of a font.
For example, the fat axis describes the range between the thinnest and boldest characters. An axis can be an interval (between 1 and 999) or a binary choice.
The main axes used will be:
- The body (weigh): represented by the label wght, it defines the thickness of the lines forming the characters.
- The width : mentioned under the label wdth, it specifies the axis according to which the characters will be more or less narrow or broad.
- Italic : activated or not.
- The slope (slant): which applies a slope on the characters, quite close to the italics, and more variable.
As before, the CSS will systematically explain to browsers how (and where) to adjust the font in the different formats desired.
Good to Know
You will indicate that a title H2 will be more or less bold, but without having to load the file corresponding to the font in bold.
Flexible layouts can then be considered in the future! This may be useful especially in applications, to enlarge the size of the characters and adapt it to the view of users.
The future of variable typography is not yet written. But it is already being written in the web developer’s notebooks!