Formatting typography to fit your exact purposes can be a time-consuming process. So imagine instead being able to make a font subtly bolder or more italicised just by adjusting a slider in Illustrator. 

variable font

Variable font technology now allows you to do just that. These individual font files actually 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 and GraphicRiver.

What Are Variable Fonts?

A variable font is an OpenType font format that includes new 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. 

  • Color fonts are set to take over the graphic design world in 2018, but what are they, and how do you use them? Learn all about color fonts in this tutorial.

  • Creating fonts has never been so easy as with Fontself—a powerful extension for Adobe Illustrator and Photoshop. Learn how to make color fonts with Fontself!

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 provide designers with a single font file that behaves like multiple fonts. The new OpenType format allows us to quickly adjust certain…

    Anna Monus

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.

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

Independent typeface designers are also 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.

You can also find a beta website, v-fonts.com, which features an ever-growing list of new variable fonts. 

variable fonts site

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. 

character panel

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.

axis praxis

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 and GraphicRiver, or read our edited lists of some of the best fonts out there:

  • Get started on incredible designs for 2018! Check out this selection of brand new typefaces from Envato Market and Envato Elements.

  • Get the best retro fonts for your projects! Check out this list of premium goodies exclusively picked from Envato Market and Envato Elements.

If you want to learn more, why not try our new course, Up and Running with Variable Fonts.