Nutzen Sie das Schriften-Abo! Die gesamte Schriftbibliothek mit über 75 Schriften ist immer griffbereit. Mehr erfahren

In 10 Jahren Arbeit als Schriftstudio haben wir 1.500.000+ Zeichen gezeichnet. Testen Sie TypeType-Schriften!

Wir haben einen digitalen Schriftkatalog! Das Stöbern in unseren Schriften ist jetzt noch bequemer. PDF-Katalog der TypeType-Schriften

SchriftstudioBlogVariable Schriftarten: Was ist neu an ihnen für Designer?

Variable Schriftarten: Was ist neu an ihnen für Designer?

Variable Schriftarten: Was ist neu an ihnen für Designer?

In this article we will tell you about variable fonts and what an interesting and useful, yet underrated instrument they are. We will also mention their disadvantages and nuances of working with them.

The article will cover the following issues:

  • Creation history
  • Technical peculiarities
  • Advantages and disadvantages
  • Use peculiarities
  • Creative use examples

Creation history

To start with, let’s talk about the history of variable fonts technology development.

In late 1980s, Adobe presented the PostScript format and Apple presented the TrueType format for font file development. They both used Bezier curves to construct characters. We use these formats in their updated forms to this day when working with font files.

Variable Schriftarten: Was ist neu an ihnen für Designer?
1980s — PostScript (Adobe), TrueType (Apple)

In 1991, Adobe presented the Multiple Master technology as an extension of the PostScript format. It allowed storing several contour variants for one glyph in the same font file. These variants were the end points on a scale, between which you could find intermediary values, for example, in order to change the weight or width.

Variable Schriftarten: Was ist neu an ihnen für Designer?
1991 — Multiple Master (Adobe)

To use such a font, a static face had to be generated first using a special program (Adobe Type Manager). It then had to be uploaded to the system for use in a graphic editor. Due to the difficulty of use this format has never become popular and font designers continued to create static faces.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Static font

In 1997, Adobe and Microsoft together presented the OpenType technology. It was based on the TrueType format but allowed for a much larger number of characters to be implemented (65000, previously the limit was 256). TrueType also allowed for OT features, without which we can not imagine a modern font anymore. Here we are talking about small capitals support, tabular characters, superiors, stylistic sets, contextual alternates and so on. The OpenType format remains most popular to this day.

Finally, in 2016, Adobe, Apple, Google, and Microsoft have announced the new version of the OpenType format — OpenType Font Variables. Since then, font designers can write the information on several faces of a font family in the same file. The key point of this format is similar to Multiple Master but has one crucial difference: now static faces don’t have to be generated in advance. Parameters can be set directly in the graphic editor.

Variable Schriftarten: Was ist neu an ihnen für Designer?
2016 — OpenType Font Variables

Technical peculiarities

Let us have a closer look at how this format is different from the classic OpenType.

When a designer buys a font family, say, a sans serif of 9 weights, he or she obtains 9 separate font files. These faces have been previously prepared by a font designer and the weights were calculated such that the widths are arranged gradually from the lightest to the boldest.

Variable Schriftarten: Was ist neu an ihnen für Designer?
TT Norms Pro

A variable font, on the other hand, consists of only one file and the range of faces is limited only by the thinnest and the boldest ones. And the designer can choose any one among them that he or she likes.

Variable Schriftarten: Was ist neu an ihnen für Designer?
TT Norms Pro Variable

If you look into a font, you’ll see that each character has anchor points, based on which it is constructed. If the number of these points is the same in the lightest and boldest faces, the program can connect them and calculate the midpoint positions. Font development is, of course, not as simple and straightforward, and we often have to specify more than two masters, but this does not affect user experience.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Anchor points

The range between two end faces is called an axis. In graphic editors like Adobe it looks like a slider that can be adjusted to choose the needed value.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Slider in graphic editor

Variation axes options

The first variant is the weight axis that has already been described. In most font families, there are several faces of different weights and theoretically they all can be variable.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Weight axis

Let’s imagine that you have bought a regular font family and plan to use it to set a book or a website with a large array of text. You know what the optimal weight of the main text should be so that it is comfortable to read. But you have a problem: the regular face in the family looks too light, and the next one, say, the medium, looks too bold. A weight between regular and medium would be perfect, but it does not exist. But if you were using a variable font, you could move the slider in the editor or specify a custom value in CSS to create it.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Optimal weight

The next rather frequent axis is the width of the font. In static families, you have several width options, for example, Normal, Condensed or Extended. In the variable font you can manually select the needed width between the narrowest and the broadest faces.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Width axis

This setting may come in handy if you are setting the text in narrow columns which have to fit in as much text as possible. Normal width is too broad for this purpose, and the narrow is inconvenient for reading large texts. A variable font would have allowed you to make the face a little narrower without compromising its readability.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Optimal width

The third axis is slant. It is applicable when the characters in the slanted face are constructed the same way as in the upright. Most often, this variant can be found in sans serifs.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Slant axis

You can choose the incline angle yourself, thus regulating how much this face will stand out in the text. This option is useful if you need to set a large text array in an inclined face without causing the reader any discomfort.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Optimal slant

Finally, an axis that is less widely spread but is also embedded into the OTF Var format, the optical size axis.

Variable Schriftarten: Was ist neu an ihnen für Designer?
TT Fors Display

You might have seen Display and Text subfamilies in variable fonts. The first usually stands out due to its higher contrast, more detail and narrower spacing. Display faces are used in titles, posters, and other cases where large text size is needed.

Variable Schriftarten: Was ist neu an ihnen für Designer?
TT Fors Display

The Text subfamily, on the contrary, has lower contrast and fewer details. Overall, it is better readable in smaller sizes and large texts.

In a variable font, you can generate an intermediary variant which will still be well readable in small sizes but more refined than a simple text face. This variant would be ideal in smaller titles, for example.

Variable Schriftarten: Was ist neu an ihnen für Designer?
TT Fors Text

We have now covered the axes that were implemented by the format developers. Specific names have been developed for them:

  • wght — weight
  • wdth — width
  • slnt — slant
  • ital — italics
  • opsz — optical size

But font designers can also invent and implement their own axes.

You can find completed examples where the following parameters change: serif length, height of lowercase and uppercase characters, height of ascenders and descenders, contrast, etc.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Source: axis-praxis.org

A font can of course be changed decoratively. Only the author’s imagination is the limit here.

Imagine now that one axis can provide you with a thousand options for font faces. If you have two axes, there are now a million options. Now, when you have custom axes, the font options become endless.

To sum up, almost any typographic task can be solved with the use of variable fonts.

Advantages and disadvantages of variable fonts

Now let us discuss some of the problems we encounter when using variable fonts and interesting use cases of variable fonts.

It should also be noted that the variable font technology has existed for many years now. However, while the technology of font editors advanced greatly and variable fonts have become so much easier to create, they are still not very popular or widely used. This means that either there is not yet an area where they can be used or that the product itself does not correspond to the market demand, or that the instruments do not allow using them. At the moment, not all graphic editors and browsers support variable fonts — for example, not all browsers support design apps.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Source: v-fonts.com
Variable Schriftarten: Was ist neu an ihnen für Designer?
Source: v-fonts.com

The greatest disadvantage of variable fonts is the low quality. Most variable fonts are of mediocre quality, and consequently, they may act up at the worst moment when in use.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Low quality of some variable font

Another example. If you have a website that is loaded 1000000 times per day and uses the full Norms PRO family, it takes up 5306 Kbytes on the webpage. If you use the variable version of the family, it only takes 1875 Kbytes. Have a close look at the table below. We see that with this huge number of loads per day, there can be a total difference of 3272 Gb that has to be loaded from the server. Obviously, it does not matter much for each individual loading instance, but when summed up, it matters.

Variable Schriftarten: Was ist neu an ihnen für Designer?
The difference between static and variable version of the font

It also has to be noted that most variable fonts are not hinted. It is a difficult process that has to be learned. Because of this, variable fonts may not always display properly in small sizes.

Hinting of variable font

How to use variable fonts

Now let us talk about using variable fonts in work.

Let us first look at Adobe Illustrator. For instance, you have already typed a text and would like to choose an already installed variable font for it. Such fonts have a «var» sign next to them in the list. By the way, Adobe has its own variable fonts installed in the latest software versions, so you can start experimenting with them.

Selecting variable font in Adobe Illustrator

Once you have chosen a variable font, an additional button Variable Font appears in the Character panel. All variable axes present in the font hide behind it, and you can change the parameters with the sliders. You can see the results immediately. Other settings in this panel remain unchanged.

Variable sliders in the character panel

You can also choose one of the faces from the list and use that family as static.

Variable font as static faces

The process in Sketch is absolutely the same, but it has no special marks next to variable fonts.

Selecting variable font in Sketch

Variable fonts can be implemented in the web with help of CSS. We will not cover this in detail, but we can have a look at how variable fonts are integrated in the web.

Here you can see that changing the properties of variable fonts is available using CSS Transitions.

CSS Transitions

This demo shows support for CSS Animation.

CSS Animation

And also an example of how it is possible to animate each letter separately.

Animation each letter separately

You can read more about using variable fonts on the web in Richard Rutter’s articles on Medium:

Get started with variable fonts — a quick but rich introduction.
How to use variable fonts in the real world — description of problems you may encounter and how to solve them.

Creative use examples

Let’s have a look at creative examples — how you can use variable fonts with a bit of imagination.

Example of stretching the font depending on the size of the container.

Source

Example of interesting attempts to use variable fonts in AR.

Source: Variable fonts in AR

Example of how a font can change depending on the looking distance.

Source: Distance Based Interpolation

Example of adapting font saturation depending on reading conditions, lightning in this case.

Source: Variable font in different reading conditions

You can make a step further and create moving images from the font, as axis-praxis suggest. You can even make them colorful by overlaying several letters, as you may see in Toshi Omagari’s experiments. But this is, of course, beyond the initial purposes of font use.

Variable Schriftarten: Was ist neu an ihnen für Designer?
Moving images from the font

Useful sources

We would like to suggest several resources where you can try working with variable fonts.

First, this is axis-praxis.org that has a large collection of variable fonts. You can also upload font you have there.

Second, there is also v-fonts.com where you can try different fonts in their simplified form.

Finally, there’s the great website that we actively use in our work to test variable fonts, dinamodarkroom.com by Dinamo. There you can test not only variable axes, but opentype features as well, and upload static fonts with defined parameters.

Instead of a conclusion

Variable fonts have the chance to become an integral part of the font world. In the last years, there was a lot of talk about them, but they have not become widespread yet. At present, they are instruments to solve an array of specific tasks. We also have to note that there appear increasingly more variable fonts. They will take over the world! It’s only a question of time!

Neueste Publikationen

Kerning, Tracking, Leading & Spacing in der Typografie: Was ist der Unterschied? 

Kerning, Tracking, Leading & Spacing in der Typografie: Was ist der Unterschied? 

Even seasoned designers sometimes mix up the concepts of kerning, tracking, spacing, and leading. Become a pro at distinguishing them! Learn the definitions of these concepts, explore their differences, and discover some helpful tips on how to use them while working on your fonts.

Mehr erfahren
Branching out: How Scandinavian Sans TT Firs Grew and Found Its Font Pair

Branching out: How Scandinavian Sans TT Firs Grew and Found Its Font Pair

In 2023, we breathed new life into the beloved Scandinavian sans serif TT Firs Neue by dramatically refining and renewing the typeface to comply with cutting-edge standards. Soon after, we introduced the text font pair for this typeface — an elegant TT Firs Text. This article is dedicated to how it all began, why we decided to update TT Firs Neue, what we added and modified, and how TT Firs Text was born.

Mehr erfahren
Die Top 10 Typografie-Trends für 2024

Die Top 10 Typografie-Trends für 2024

Willst du deine Typografie auf dem neuesten Stand halten und wirklich inspirierende Projekte gestalten? Die Experten und Designer des TypeType-Schriftstudios freuen sich, in diesem Artikel die wichtigsten Schrifttrends für 2024 mit dir zu teilen. Bleib im Trend!

Mehr erfahren
Die 15 besten Magazin-Schriften für perfekte redaktionelle Designs 

Die 15 besten Magazin-Schriften für perfekte redaktionelle Designs 

Zeitschriften sind eine perfekte Kulisse für die Typografie, um all ihre Dimensionen zum Ausdruck zu bringen. Schriftarten vermitteln in diesem Fall nicht nur Informationen, sondern beeinflussen auch direkt das Design. Sie vermitteln die Botschaft des Magazins und spiegeln seine Werte und Ideen wider. In diesem Artikel erörtern wir, wie Sie die beste Schriftart für Zeitschriften auswählen und stellen eine Liste mit 15 relevanten Optionen für redaktionelle Designs zu verschiedenen Themen zusammen.

Mehr erfahren
UniversiTTy: Lesson 9. Uppercase Characters. Detailed Contour Refinement

UniversiTTy: Lesson 9. Uppercase Characters. Detailed Contour Refinement

Welcome to the ninth lesson of our «UniversiTTy»! In this series, we guide you through the process of font design step by step. The font is a cohesive visual system. This can be seen on all levels: global (font type, weight, proportions, contrast, general forms) and at lower scales that encompass all graphic choices in individual characters. Let’s find out together how visual details influence the overall perception of fonts.

Mehr erfahren
Die 15 besten Outline-Schriften, die von Designern im Jahr 2024 verwendet werden

Die 15 besten Outline-Schriften, die von Designern im Jahr 2024 verwendet werden

Outline-Schriften sind ein hervorragendes Mittel, um einem Design Abwechslung zu verleihen und es attraktiv und plakativ zu gestalten. Wie sehen sie aus? Wo werden sie verwendet? Zu welchen Schriftstilen passen sie?
Wir haben all diese Fragen in diesem Artikel behandelt und eine Auswahl der besten Outline-Schriften für verschiedene Projekte getroffen.

Mehr erfahren
Die 10 besten Schriftarten für Posterdesigns 

Die 10 besten Schriftarten für Posterdesigns 

Plakatdesign ist eine große kreative Spielwiese für die Arbeit mit Typografie. Wie wählen Sie Plakatschriften richtig aus, ohne Ihre Idee zu vernachlässigen? Welche verschiedenen Schriftarten für Plakate gibt es und wie können Sie die richtige finden? Erfahren Sie es in diesem Artikel!

Mehr erfahren
UniversiTTy: Lektion 8. Gestaltung grundlegender lateinischer Schriftzeichen. Großbuchstaben

UniversiTTy: Lektion 8. Gestaltung grundlegender lateinischer Schriftzeichen. Großbuchstaben

Willkommen zur Lektion 8 unserer „UniversiTTy“-Serie! Beim letzten Mal haben wir uns mit dem optischen Ausgleich, der Höhe von Groß- und Kleinbuchstaben und dem Konzept des Kontrasts beschäftigt. In diesem Artikel werden wir uns schließlich speziell mit der Gestaltung von Glyphen beschäftigen.

Mehr erfahren
Wie Sie Schriftarten für Ihre Marke auswählen: Ein umfassender Leitfaden für Designer

Wie Sie Schriftarten für Ihre Marke auswählen: Ein umfassender Leitfaden für Designer

Sind Sie immer noch unsicher, wie Sie eine Schriftart für Ihr Logo oder Ihr Website-Design auswählen sollen? Lernen Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie Schriftarten für Designprojekte auswählen und verbessern Sie dabei Ihre Fähigkeiten.

Mehr erfahren

Mehr erfahren

Schriftanpassung

Schriftanpassung

Es kommt häufig vor, dass bestehende Schriften nicht den Anforderungen eines bestimmten Projektes entsprechen. Aber eine Schrift ist kein statisches Instrument, das nur so funktioniert, wie es geschaffen wurde. Um den individuellen Stil eines Unternehmens zu vermitteln, kann und sollte die Schrift an die eigenen Bedürfnisse angepasst werden, was von einfachen Änderungen wie der Reduzierung der Zeichengröße bis hin zu komplexen Designänderungen aller Glyphen reichen kann.

Mehr erfahren
Umwandlung von TT Hoves Medium in ein angepasstes TT Hoves GDTI

Umwandlung von TT Hoves Medium in ein angepasstes TT Hoves GDTI

Monospace, eine Branding-Agentur aus Deutschland, entwirft Corporate Identities und Designs für Projekte. Das Unternehmen ist davon überzeugt, dass durch Design eine Marke geschaffen werden kann, die Kundeninteraktionen angenehm und nachhaltig macht.

Mehr erfahren
Corporate font für Red Collar

Corporate font für Red Collar

In diesem Artikel erzählen und zeigen wir, wie wir die Corporate font für die Digitalagentur Red Collar gestaltet haben. Der Geist, den der Kunde in der Schrift sehen wollte, sollte die Selbstpositionierung der Agentur widerspiegeln: «Sie ist technologisch, aber erschwinglich; sie ist mutig, kühn, aber voll verantwortlich für das Ergebnis».

Mehr erfahren
Die Entstehungsgeschichte der TT Ricordi

Die Entstehungsgeschichte der TT Ricordi

Die Schriftfamilie TT Ricordi ist eine Sammlung von drei Antiqua-Schriften, die das traditionelle Schriftangebot erheblich erweitern. Alle drei Schriften haben eine geringe Strichstärke, einen ähnlichen Zeichenaufbau und bestehen aus einem Großbuchstaben- und einem Kapitälchensatz, der die Kleinbuchstaben ersetzt.

Mehr erfahren
Entstehungsgeschichte der Schrift TT Autonomous

Entstehungsgeschichte der Schrift TT Autonomous

Heute möchten wir Ihnen die Entstehungsgeschichte der Schrift TT Autonomous erzählen. Wir erzählen Ihnen, was die Designer inspiriert hat und welche Schriftarten in der Familie enthalten sind.

Mehr erfahren
Änderung der Zeichengröße in TT Commons™ Classic

Änderung der Zeichengröße in TT Commons™ Classic

PluralSight bat TypeType um Testversionen der Schriften TT Commons™ Classic und TT Interphases, um eine geeignete Schrift auszuwählen. Sie waren von TT Commons™ Classic angetan, aber die nicht standardisierte Größe der Glyphen machte die Schrift ungeeignet für den Einsatz in mehreren Ausrichtungen.

Mehr erfahren
Font Hinting: Von den ersten Entwicklungen bis zum praktischen Einsatz

Font Hinting: Von den ersten Entwicklungen bis zum praktischen Einsatz

In diesem Artikel erzählen wir die Geschichte der Entwicklung von Font Hinting. Wir berichten von unseren eigenen Erfahrungen bei der Arbeit mit Schriften und erklären, welche Aufgaben Hinting löst.

Mehr erfahren
Ligaturen in TT Norms® Pro deaktivieren

Ligaturen in TT Norms® Pro deaktivieren

Die deutsche Marketing-Analyse-Plattform Adjust wandte sich an TypeType mit der Bitte, die Schrift TT Norms® Pro anzupassen. Adjust bietet weltweit Dienstleistungen im Bereich Business Development an.

Mehr erfahren
Die Entstehung von TT Marxiana

Die Entstehung von TT Marxiana

TT Marxiana ist ein Projekt zur Rekonstruktion vorrevolutionärer Schriften. Diese Schriften wurden für die Gestaltung der Zeitschrift „Niva“ (nee-vah, „bestelltes Feld“) verwendet, die vom Verlag A. F. Marx in Sankt Petersburg herausgegeben wurde. In unserem Projekt haben wir beschlossen, uns auf eine bestimmte Gruppe von Schriften zu konzentrieren, die bei der Vorbereitung und dem Druck der Zeitschrift „Niva“ im Jahr 1887 verwendet wurden – Antiqua, Antiqua Italic, Grotesk und die „Elzevir“.

Mehr erfahren