This content originally appeared on Envato Tuts+ Tutorials and was authored by Grace Fussell
Formatting typography to fit your exact purposes can be a time-consuming process. Imagine instead being able to make a font subtly bolder or more italicised just by adjusting a slider in Illustrator. That's where variable fonts come in handy.
You don't need a complex font definition to understand what a variable font is. Variable fonts behave like multiple fonts, allowing you to adjust the weight, width, and slant of type as you work.
But are variable fonts actually useful for designers, or a fun but pointless gimmick? Here we take a look at how you can use variable fonts in Illustrator CC and how you can best apply them in your design work.
On the hunt for more cool fonts? Check out the huge range of display styles, serifs and sans serifs over on Envato Elements.
First, let's answer the question, What is a variable font?"
What Are Variable Fonts?
A variable font is an OpenType font format that includes technology called OpenType Font Variations.
Jointly developed by four of the most influential technology companies—Google, Apple, Microsoft, and Adobe—these font files contain a huge amount of extra data, compared to your average OpenType font.
A variable font can contain a font’s entire glyph set, or individual glyphs with up to 64,000 axes of variation, including weight, width, slant, and, in some cases, specific styles, such as Condensed, Bold, etc.
OK, But... Why?
Alongside Color Font technology, variable fonts can seem to the uninitiated a little, well, pointless. Many typographers would argue that the process of manually formatting fonts is the most professional and satisfactory way to go about things.
However, variable fonts are a natural progression for the field of typography, which is increasingly reflective of developments in responsive web design. Designers are demanding more convenience and interactivity from their design tools, and fonts which you can adjust with the roll of a slider are meeting this demand.
Variable fonts offer flexibility and immediate results, which makes them a welcome novelty for the time-strapped typographer.
They’re also great for adjusting typography ‘live’. So if, for example, you’re showing a client a design on a screen, you can adjust the formatting of a header before their eyes instantly.
Now that you know what variable fonts are, we'll show you where to find them.
How Do I Find Variable Fonts?
You can use a limited range of pre-installed variable fonts in Adobe Illustrator CC and Adobe Photoshop CC, including:
- Acumin Variable Concept
- Minion Variable Concept
- Myriad Variable Concept
- Source Sans Variable
- Source Serif Variable
- Source Code Variable
Acumin Variable Concept might be one of the most popular variable fonts, but also consider independent typeface designers. They are starting to release their own variable fonts, though many of these are still only available as prototypes. Check out Gingham, a minimal sans serif by Christoph Koeberlin, or Jabin, a variable take on Gothic type styles by Frida Medrano. These can be an alternative to Source Serif Variable or Source Sans Variable.
You can also find a beta website, v-fonts.com, which features an ever-growing list of new variable fonts.
How Do I Use Variable Fonts?
Here, we’ll look at how to use variable fonts in Illustrator CC.
The process is really easy. Simply select the Type Tool (T) and drag to create a text frame on the page. Place your cursor into the frame and type in your text.
With either the frame selected or the type highlighted, choose a variable font from the normal font menu in the Character panel (Window > Type > Character).
Click on the small double-T symbol to the right of the font weight menu. When you hover over the symbol, you’ll see ‘Variable Font’ appear next to your cursor.
Clicking on this opens a pop-out window with sliders to adjust three options, which are detailed below.
Weight
Adjusting this slider makes the type appear thinner or bolder. Depending on the variable font, this can range from ultra-thin to a very heavy or fat weight.
This is a great option for playing with the visual impact of headers or sub-headings, allowing you to define just the right amount of boldness for your text.
Note that increasing the weight of the font can also expand the overall width of the text, purely due to the increased size of each character.
Width
To give your type a condensed (or squashed) look, or stretch it to give it a broader appearance, adjust the Width slider.
While this has an aesthetic effect on your text, it’s also a really nifty method for banishing any stray orphans or widows in your typography if you don’t want to spend a long time adjusting tracking or kerning manually.
Slant
Although applying false italicisation to text is often considered a big no-go in typographic circles, the Slant slider actually replicates a large variety of authentic italic weights.
This gives you the professional look of actual italics, but the wide variety of options you can often only achieve by applying false italics.
Where Should I Use Variable Fonts?
Variable fonts have been designed with web design in mind, and they are supported by Safari, Chrome, Edge, and Firefox. The web is the natural home for variable fonts because they are uniquely tuned to responsive sites and apps. You can play around with different variable fonts to see how they would appear online on the Axis-Praxis site.
By storing information about multiple font families within just one font file, variable fonts also offer a space-saving solution for web designers.
However, variable fonts also present an exciting new way of formatting typography for print designers. Because adjusting the fonts is so quick and convenient, they make a brilliant timesaver for print designers as they work on drafts.
Conclusion: Are Variable Fonts a Gimmick or Here to Stay?
For web designers, variable fonts represent another exciting development in responsive typography. Along with color fonts, variable fonts allow web designers to be more flexible and creative in their designs, making typography the focal point of websites rather than a mere necessity.
For print designers, the jury is still out as to whether variable fonts are useful enough to replace manual typography formatting. Until a very wide range of variable fonts are made available in Adobe software, it seems unlikely that they will replace the standard method of formatting type for most designers.
Looking for more great fonts? Check out the selection of typefaces on Envato Elements, or read our edited lists of some of the best fonts out there:
35 Best New Fonts for 2023
30 Cool Retro Fonts to Download in 2022
18 Best Small Fonts (Pixel & Tiny Fonts to Download Now)
36 Best Wide Fonts (Extra Wide & Extended Fonts)
Fonts Similar to Roboto (& the Best Roboto Font Pairings)
If you want to learn more, why not try our new course, Up and Running with Variable Fonts.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Grace Fussell
Grace Fussell | Sciencx (2018-06-11T14:31:31+00:00) What Are Variable Fonts?. Retrieved from https://www.scien.cx/2018/06/11/what-are-variable-fonts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.