Originally developed as the joint effort of the following four biggest tech companies, variable fonts allow designers to get unlimited number of variants from the same font file:
– Apple
– Microsoft
– Adobe
So this becomes easier to adjust the typeface to varied orientations, many design constraints, different viewports, and devices.
Variable Fonts – Why Use Them?
These fonts significantly reduce overall limitations of present day font formats. The fonts available today are quite inflexible and do not scale very well. These only provide us with certain fixed styles with names such as “Extra Bold”, “Light”, or “Bold”. One can also get typefaces with just one slant or weight variant. On the other hand, with variable fonts, you can enjoy access to endless flexibility of the following:
– Weight
– Rounding
– Slant
– X-height
– Slabs
– Other typographical attributes
This is not all; variable fonts also work towards boosting overall performance. Web fonts usually require each font variant to be stored in a separate file. As for example, folder of the Roboto web font will appear as the following:
‘Contents of Roboto web font folder’
Variable fonts ten to use a single font file which the browser has to load just once. As soon as it is loaded, it may serve all of the variants from that single binary.
Named Instances
With variable fonts, type designers can define named instances (exact font variants amongst the infinite options available). For example, the Variable Font Prototype of Adobe comprises of two axes, namely weight and contrast. It also includes 8 named instances:
– Extra Light
– Light
– Regular
– Semibold
– Bold
– Black
– Black Medium Contrast
– Black High Contrast
These named instances play a vital role when a designer wants to use variable font in combination with a design program like Adobe Illustrator. It is possible to generate a named or unnamed instance on web using CSS.
How to Add Variable Fonts to a Web Page
Variable fonts can be added to a website by using the ‘font-face rule’ at the top of CSS file.
For example, the variable font ‘Avenir Next’ can be added with the CSS rule stated below:
1
2
3
4
@font-face {
font-family: “Avenir Next Variable”;
src: url(“AvenirNext_Variable.ttf”) format(“truetype”);
}
Visiting the Axis Praxis website will help you find more number of variable fonts on the GitHub pages of all types of design companies such as Type Network, MonoType, and Typekit.
Note: Remember that not every OpenType font is a variable font.
How to Set Font Variations With CSS
Font-variation-settings CSS property introduced in combination with the CSS Font Module Level 4 can be used by freelance web designer and professionals to define font variations. The low-level property lets users to control variable fonts through specifying a specific value for each axis.
Here’s an example using Avenir Next.
This variable font comprises of two design axes:
Weight
Width
Both of these are registered axes. The font also has eight named instances:
- Regular
- Medium
- Bold
- Heavy
- Condensed
- Medium Condensed
- Bold Condensed
- Heavy Condensed
The full CSS (belonging to a random anonymous font variation) appears like the following:
1
2
3
4
5
6
body {
font-family: “Avenir Next Variable”;
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: ‘wght’ 631.164, ‘wdth’ 88.6799;
}
You may use any value (float numbers are also allowed) for the axes between the values – min and max. For Avenir Next, [400, 900] range can be used for weight and the [75, 100] range can be used for the width axis.
High-Level CSS Properties
As per the recommendations by W3C, property of the font-variation-settings is low-level property. Hence, it must be used only if other techniques are not available. As per the CSS 4 specifications, only registered axes with higher-level CSS properties can be controlled in the future, such as:
– font-weight (will control the wght axis)
– font-stretch (will control the wdth axis)
– font-style (will control the slnt and ital axes)
– font-optical-sizing (will control the opsz axis)
The first three properties exist since CSS2, however the CSS4 specifications expand their usage. We will be able to use them not only with predefined keywords (e.g. normal or bold for font-weight) or round numbers (e.g. 400, 600, 800, etc.), but also with all numbers on a predefined scale (for instance, font-weight will range between 1 and 1000 & font-stretch will range between 50% and 200%).
These features are still in the experimental phase, though. So for now, the reasonable thing is to keep using font-variation-settings, as currently this is the most stable property for accessing the axes of variable fonts. If you have any question for web fonts, so visit here: http://www.jiteshmanaktala.com
Support
Since variable fonts are a new concept, the support for browser support is not yet seamless. Although the newest versions such as Safari and Chrome support the font, Firefox and Edge don’t.
