Variable fonts are single font files that include an entire font family, allowing for many different variations in style without the need to use a separate file for each.
How Are Variable Fonts Different To Static Fonts?
Normally, a typeface, such as Arial, has many font files associated with it: Arial Regular, Arial Light, Arial Bold, etc. The typeface is a family of designs created in a particular style; the fonts are individual files within that family.
Each of these fonts uses the same typeface but differ in one or two attributes; a bold font, for example, has a higher weight (or thickness) than a normal font. Because of this, a typeface might have 20, 30, or more static files associated with it.
A variable font contains all the varieties (and more) that these static files represent, but in just one file. The Manufaktur typeface, for example, includes 60 fonts, but can instead be downloaded as one variable font:
How do Variable Fonts Work?
Variable fonts have been designed to have one or more axis of variation. These axes allow the designer to enter any value within a given range for a particular aspect of the design. Sometimes this is a scale (e.g. weight), and sometimes it is a choice of on or off (e.g. italic).
Unlike static fonts, which are available in a few select options, a designer can enter any applicable number on the scale. Want a font weight of exactly 553? No problem.
There are five standardized axes: weight, width, slant, italic, and optical size, and designers can also create custom axes to define other values that are not covered by these options.
All variable fonts allow you to define a value for at least one of these axes, but few include them all. This Figuera Variable Font enables you to enter a custom value for width and weight:
Benefits of Variable Fonts
Variable fonts benefit both web design and graphic design:
On-The-Fly Design Changes
Using variable fonts in graphic design enables designers to make quick changes using a slider, rather than fiddling around with different font files. You can customize your designs quicker and easier, which is particularly useful when you’re making changes live while discussing the project with your client.
Smaller File Size and Fewer HTTP Requests
Most websites use 6-8 variations of a font, each one requiring an HTTP request and a download of around 20kB (or more). Using a variable font reduces this to one HTTP request and a smaller overall download size. This reduces loading times, improving the user experience.
Limitless Design
Variable fonts allow designers to use a wide variety of weights and widths without requiring multiple files. This allows for better design decisions; you can use as many sizes, styles, weights as you like without impacting on site performance. Designers can design for style and readability without worrying about loading times.
It’s Just Easier
Sick of having to download and install 20 separate files every time you want to try a new font? Us too! Variable fonts just make sense. It’s much easier to find the design you like by moving a few sliders than it is by trying lots of different versions.
How to Use a Variable Font as a Graphic Designer
You can use variable fonts in Adobe Photoshop and Illustrator, but not InDesign (yet – Adobe say they’re working on it). The latest versions include a few example variable fonts so you can get started even if you haven’t purchased any yet. The included variable fonts are Acumin Variable Concept, Minion Variable Concept, Myriad Variable Concept, Source Sans Variable, Source Serif Variable, and Source Code Variable. Using a variable font is easy:
- In Photoshop, select a variable font from the normal font menu. You’ll see the sliders appear towards the bottom of the Type Layer Properties pane.
- In Illustrator, select your variable font from the normal font menu, then click on the double-T symbol in the character panel. A pop-up menu will appear with the sliders on.
That’s it! Time to start experimenting.
How to Use Variable Fonts on a Website
Web designers can use CSS to control variable fonts. When using the standard axes, designers can use the properties font-style, font-weight, font-stretch, and font-optical-sizing to adjust the text (other axes can be utilized by using the font-variation-setting property). These properties change the styling, weight (or boldness), stretch (width), and optical sizing (enables the browser to optimize for viewing at different sizes) respectively. This allows for great flexibility: font-weight, for example, can take any value between 1 and 1000 (including decimals, such as 550.5). For more information, check out this instructional article by Google.
Finding Variable Fonts
The few example variable fonts included in Adobe software won’t get you very far. Thankfully, you can find plenty of new fonts at Creative Market. Here are a few of our favorites:
Love Moon
Perfect for wedding invitations, greetings cards, headlines and logos, Love Moon also contains a wide range of glyphs, ligatures, symbols and ornaments.
Farwell IPA
Inspired by vintage signage, this all-caps design is great for making sure your message gets noticed.
Gunta
This stylish geometric font is ideal for attention-grabbing headings.
Products Seen In This Post:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
3 Comments