The most subtle typography adjustments can make a real difference in design. For many designers, getting font selection right is a crucial phase within their projects, and they go to great lengths with thorough type studies. Even if you do find the perfect font, you’re typically limited by the options provided by type designers. Traditional fonts come in a fixed range of weights, widths, and slants, and you often play with spacing to achieve a certain look.
Luckily for us, there have been developments in font technology and typography designers have come up with an easier way for designers to get fonts exactly right. Enter Variable Fonts, or “OpenType Font Variations,” as they have been officially dubbed.
Want to know how variable fonts could unlock even more creative solutions in your next project? Read on to learn exactly what variable fonts are, how they’re innovative, and ways to use them in your projects. Plus, you’ll discover variable fonts on Creative Market that stand out as excellent examples of the new technology.
What Are Variable Fonts?
When you’re trying to get your typography just right in a design project, do you ever wish you had a slider to drag to get the font as bold, as italicized, or as wide as you want it? Well, you’re in luck. Variable fonts offer a solution to this exact problem.
In the most basic sense, Variable Fonts are large font files that contain a font’s entire set of glyphs. This means that, within a single font file, you can find thousands upon thousands of variations of the font, including different weights, widths, and slants.
A Variable Font allows designers to manipulate master variations of the text along specific axes, which represent specific visual aspects of a font. Each axis represents a single font design feature; for example, you can set a weight axis, a width axis, an italic axis, a slant axis, and an optical size axis. This graphic by Microsoft shows how Variable Fonts can combine two or more different axes of variation, like weight and width:
Essentially, designers can choose new, arbitrary points along an axis, creating a new font style instantly. This can lead to a huge number of variations of just one typeface. Variable fonts can be edited with a simple click-and-drag tool. This is unlike a traditional font style that must be selected from within a family, then resized and manipulated manually to fit the design.
Imagine starting with a thin, lightweight typeface, then manipulating the font by clicking and dragging until it’s loud and bold. You didn’t have to change fonts or styles — you simply created your very own variation of the original typeface that works for your project.
Variable fonts were originally developed as a collaboration between tech giants Adobe, Apple, Google, and Microsoft to facilitate responsive typography. They make it easy to ensure your text looks good on screen, no matter what device someone is viewing your project with. The jury is still out on whether ongoing development will make the design process easier for print designers, or whether the precision of editing individual typefaces may be better for a print product.
How to Use Variable Fonts in Popular Design Software
Currently, variable fonts can be used in popular design software Adobe Illustrator (CC 2018, 22+), Photoshop (CC 2018, 19+), InDesign (CC 2020, 15+), Sketch (59+), Figma (114.4+), and other apps you can review here. Simply download and install the font as you would any other. You can also use and define variable fonts in CSS.
In Illustrator, activate the variable font slider by clicking on this icon in the Character panel:
More and more variable fonts are continually created and offered to the public. Variable fonts are supported on the latest versions of Safari, Chrome, Firefox, and Edge. Here’s a more detailed overview of browser support for this format.
Standout Variable Fonts Available on Creative Market
The following variable fonts are available for purchase from professional typography designers on Creative Market:
Superlumina
Studio Buchanan created Superlumina. The designer mentions that the font is particularly well-suited for movie posters or streetwear. Bold and contemporary, this font comes in 9 weights with matching italics and a variable font file with support for 13 languages.
Figuera Variable Fonts
AF Studio created Figuera Variable Fonts. This set of variable fonts has an unmistakable Victorian style, with subtle serifs and an old-timey, antique apothecary vibe. When you download this font family, you also get bonus borders to go with it.
OKE! Sans Family ( Variable Fonts )
One of the most elegant and modern variable fonts on Creative Market is OKE! Sans, a variable font created by Paperwitch. The font is minimalistic and slim, and it’s a great choice of variable font for a clean, unfussy project. The designer says it was designed with readability in mind.
TT Rationalist: intro offer 50% off
TypeType created TT Rationalist, now offered for 50% off. When you buy this font, you get 10 upright fonts, 10 real italics fonts, and two variable fonts. It supports more than 200 languages. This is a basic serif font that echoes a typewriter. Clean and simple, classy and neat.
Eighties Comeback Serif (70 fonts)
Eighties Comeback Serif is a handy variable font with more than 70 variations. Created by Nicky Laatz, you’ll feel like you’ve hopped back forty years when you use this font. The designer was inspired by magazine advertisements from the 1970s and 1980s. If you purchase this creation, you’ll get 70 fonts and 2 handy variable fonts.
Codo Mono Modern Monospace Typeface
Codo Mono Modern Monospace Typeface is a variable font created by we are colt. When you buy Codo Mono Modern Monospace Typeface, you’ll get standard and italic styles, 6 weights of fonts, and a variable weight version.
Antipoda
Sudtipos created Antipoda. It’s a grotesque sans serif display font meant to be an exploration of opposites. Extreme weights are juxtaposed for a fascinating, eye-catching aesthetic. With Antipoda you’ll get a Latin Extend set, 3 weights and 3 widths of the font, and a variable font, too.
Manouche Font Family
Manouche Font Family is a font by Guts Type that can be purchased in 7 weights, 5 widths, and also in variable format. Manouche comes with OpenType features with stylistic sets, and there are 455 characters in each style type. Manouche offers support for close to 80 languages.
Codec Pro 22 fonts + 1 variable
Zetafonts created Codec Pro, a bundle of 22 unique fonts and 1 variable font. This clean, minimalistic sans serif is described as a “veritable Swiss-knife” for this designer. That’s because it can be used in a huge range of projects or aesthetics because it has so many stylistic sets plus a variable font.
Agharti Bold Display Family
Agharti Bold Display Family was created by That That Creative. Agharti Bold Display Family comes with 49 fonts with 7 widths and 7 weights, as well as a variable typeface as a bonus thrown in with the purchase.
Savior Sans
Sudtipos created Savior Sans, a font family that comes in 9 weights and 3 widths, as well as a variable version. Savior Sans offers balance because its clean minimalistic sans serif nature is paired with the whimsical, quirky features of many of the characters. The designer recommends using this variable font for a modern logo, contemporary webpage design, or in a print headline.
Manufaktur – A 60 fonts family
Purchase Manufaktur by Great Scott! and you’ll get a variable font with a distinct industrial and antique aesthetic. A cast iron sign spotted on an old Swedish industrial machine was the inspiration of the designer. If you buy Manufaktur, you get stylistic alternates, small caps, and a family of over 60 fonts plus 670 glyphs.
Stinger – 42 Fonts
Zetafonts created Stinger, a font family that comes in 40 weights in 4 widths, as well as a variable version. This is a simple sans serif with a slight quirk in each character, which lends the font a somewhat whimsical feel. The designer explains, “Subverting the traditional relationship between thick verticals and thin horizontals [makes this] perfect for eye-catching advertisements.” This font comes with support for more than 200 languages.
Presto
Presto is a variable typeface created by Type Juice. The variable font is made up of 12 different fonts, from “thin and condensed” to “wide and bold.” This is one of the most fun fonts on the list, thanks to variable widths. This means you can (and should!) use characters of varying widths within words, which makes a viewer or reader really LOOK at the words. You can be sure your message isn’t overlooked. Plus, when you buy Presto, you get access to over 5,000 glyphs.
Organetto
Latinotype created Organetto, a distinctly art deco-inspired variable sans serif font. This retro-feeling variable font has multiple widths, so you can use it in a variety of projects and scenarios. Organetto has OpenType features, including 3 sets of alternates, catchwords, and titling. Use this for headlines, not body text.
Extenda
Extenda – 12 fonts was created by Zetafonts. It’s a variable width sans serif font family meant to be used to create strong headlines, logos, and display text. The characters are condensed and close in Extenda (note the irony in the name), but the typeface is eye-catching and designed for display. The variable font comes with coverage for more than 200 languages and is offered for commercial use, as well as personal.
Find Expressive Variable Fonts on Creative Market
These variable fonts are not the only choices available in our design marketplace. You can choose a variable font to use in your current design project, then pair it with any of the other outstanding design assets available in our marketplace.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Brand strategist. Creating design tools to empower creative entrepreneurs. Author of the Lean Branding book. MA in Design Management from the Savannah College of Art and Design (SCAD).
View More Posts
