Variable Fonts: Varied & Flexible

Pascal Zoghbi

NEW TYPOGRAPHIC TECHNOLOGY 

In our fast-evolving digital world, typography is at the heart of it all. Fonts are becoming the core of many digital projects. From static typography, we are moving to dynamic type solutions. More and more we are seeing digital visual communication projects relying more on typographic solutions instead of only visual ones, as it was conventionally. Typography is becoming more available and flexible in digital projects, compared to how limited and strict it was a few years back. Fonts have always been the bread and butter of print applications, and now they are excelling in screen application with the introduction of web OpenType fonts and recently variable fonts. 

29LT Zarid Sans AL, LC, and LG Variable Fonts

At 29LT, we constantly try to learn the new typographic techniques enabling us to create, develop, and publish our typefaces following the latest technological requirements. 2020 proved to be a hard and exceptional year, but this didn’t stop us excelling and updating our typographic philosophy and type systems. In 2020, the 29LT website was upgraded, placing 29LT fonts at the centre, showcasing them with their new versatility. The whole identity was recreated including a new logo and colour schemes. Variable fonts were introduced for key 29LT typefaces offering both standard and variable font licensing options for our clients. 2020 also marked a shift in 29LT script support. While 29LT remains an expert in bi-script Arabic and Latin typography, a multi-script approach is gradually being adopted: an expansion to Cyrillic and Greek started with 29LT Zarid Sans, and other scripts will hopefully follow in the future. You can read more about this topic here. 

2020 brought us less mobility and variety in our social life due to the pandemic, and 2021 is promising to be a return to the flexible life we had before the lockdowns. At last, we have scope, we have possibilities, and we can move a bit more. This can be viewed as a metaphor for standard static font and variable fonts. What are variable fonts? A means of expression. Very fresh. Very functional. Versatile and fun. Varied and flexible.

SO MUCH MORE

With variable fonts, our creative selves have more room, more movement. 

One file can now do what many files had to do separately: it contains a whole type family, if not a whole super family. Whereas before, each standard (or static) font was accommodated in one file, and each file is one style of the typeface. Now everything is opened up. One compressed TrueType or WOFF2 (Web OpenFont Format 2) file has a whole family of fonts in a versatile design space, including all the styles in itself and everything in between.

This gives us two things that in the design and the typographic world we long for: high performance and wide-open choice. 

29LT Bukra Variable

Greater choice means that our creativity and design can fly further and higher. For example, instead of the 49 fonts of 29LT Bukra upright with their changing weight and width, we now have access to the wonderful possibilities of using a single font, 29LT Bukra Variable. It contains all the default 49 styles besides hundreds of variables in weights and widths. Designers have more expressive potential, enhancing readers’ experiences through meaningful typographic choices. Varied and flexible indeed.

Arabic letter “Qaf” and Latin lowercase letter “a” from 29LT Bukra Variable

DESIGN SPACE—WIGGLE ROOM

The design space is the framework for a font, the boundaries of the stage in which it can act. For the moment, we have worked through the space of one and two dimensions. Typefaces like 29LT Zarid super family and 29LT Baseet and Zawi have one weight axis, while 29LT Bukra and 29LT Okaso acquire two axes: weight + width and weight + stretch respectively. We can simply play with a one-dimensional line; we can move inside a two-dimensional square; however, inside a three-dimensional cube we can jump and stretch and play. Future 29LT fonts might be built with three or more axes depending on the design concept of each. 

The type designer creates the design space based on the concept of the typeface. While the weight axis might be a constant for all variable fonts, the other axes are dependent on the design and functional requirement of each type system.

29LT Bukra Variable (Left) & 29LT Zarid Sans Variable (Right)

AXES FOR THE ASKING

Variable fonts work through axes, the sliders that are the lines of power. We move along and change these sliders, varying and reinventing the appearance and character of each font. 

There is the possibly of introducing registered or custom axes in variable fonts. These are the defined registered axes: weight (tag-name wght), width (wdth), italic (ital), slant (slnt), and optical size (opsz). The custom axes can be anything else that answers the requirement of the typeface and makes it function as intended by the type designer. They can be serif (SERF), contrast (CNTR), grade (GRAD), etc. Axis tag-names are case-sensitive: registered axes have lowercase tag-names while custom ones require uppercase tag-names. Axes might be binary, like 0 – 1, or allow a range or a continuum, like 100–900. 

29LT Okaso Variable

In 29LT Bukra, for example, two registered axes are used: weight (wght) and width (wdth), while in 29LT Okaso, one registered axis is defined, the weight (wght) axis, and a second custom axis was added, the stretch (STRC) axis. 

The 29LT Bukra super family was in development before the invention of the variable font technology. The idea was to explore the limits of a bi-script Arabic and Latin typeface in the condensed, normal, and wide realms without distorting the letter outlines. In 2017, the main type system was published, and in 2020, the variable font versions were published. Read more about 29LT Bukra here.  

29LT Okaso has a completely different research topic and design thinking behind it. We introduced the stretch axis in the variable font version of the typeface to enable the horizontal outlines of the Latin letter to stretch and echo the kashida concept in the Arabic script. Read more about 29LT Okaso here.

Now we, the users, designers, and developers, can use these axes exactly how we want. Each slider has its own minimum and maximum, and its defaults. Any set of values chosen within all axes create an “instance” which is like one font with particular values set. There are hundreds of these instances that can be created by one variable font. The higher the number of axes and the range they offer, the higher the multiplied number of instances that can be rendered. 

VARIABLE FONTS ON WEB APPS

Twenty years ago, each computer-make had its own fonts. For the web, what were the variations?–simply regular, bold, and italic. These variations had to be linked to default system fonts on the computer and even appeared differently on different computers. In the font restaurant, just a main dish with two sides. Everyone had to settle for a standard meal and accept what was reasonable. 

Around ten years ago, WOFF files gave the opportunity for web designers and developers to move on from the strict system font list to a more varied font choice that could be embedded or called for in websites. The page-loading speed was always an issue though, if multiple fonts were needed to achieve a certain online typographic hierarchy. 

Three years ago, web designers and developers started exploring the possibilities of variable fonts. Google, Adobe, Apple, and Microsoft—all brought in OpenType variable fonts. They are now supported by all major operating systems and web browsers, and desktop applications are following. 

So many dishes, sides, and salads, with desserts thrown in for free too. 

No longer do we have to install and load many font files into our browser. Just one. And that means less to manage and maintain. This brings us a system improvement too: with at least a 70% reduction in file size, there is less lag-time between loading and displaying. This saving in bandwidth improves web performance. 

Responsive websites were introduced few years back and now they are standard. A responsive website changes dynamically between different screen resolutions to insure the most appropriate layout/design and the most legible information. Now fonts can be responsive too. A developer can inform a variable font to change weight, width, optical size, etc. with the change of the screen dimension insuring text hierarchy and legibility.

Please note, however, that the variable-font technology is still in its early stages and should be treated with caution. Some bugs might emerge while rendering the fonts, although with the latest versions of web browsers, most of the bugs have been extinguished, with the remaining ones also being sorted in the near future. 

The use of variable fonts on the web requires CSS and sometimes JavaScript coding. Most professional web developers know these two languages, and it is fairly easy for a developer to learn how to manipulate variable fonts in websites to give the esthetical and functional requests of the web designer. Look online for several articles and tutorials explaining the usage of variable fonts on the web and which CSS settings should be implemented in the website coding. 

A typographic animation can be an example of an aesthetical application, requiring few lines of CSS and a small variable font file size of few KB, and being interactive and even editable. This drastically reduces the upload and display time of a certain animation in comparison to the same animation done in a video format, which might be 10 or even 100 times the size and is not interactive nor editable. 

Here is an example for the 29LT website: a calendar animation where the weight and width of the months, days, and date change as the mouse moves from top to bottom, from left to right. We use 29LT Bukra Variable for this. 

A functional application of variable fonts can be simply linked to a certain design aspect, or applied to improve legibility or help screen viewing accessibility. Using different sensors, variable fonts can adjust to motion, sound, light, etc. besides the basic digital mouse movement. 

Below is a simple example from the 29LT Okaso typeface webpage. The weight and stretch axes can be accessed by the browser while type edit is possible. 

We can encounter so many other examples of variable fonts in action on the web. 

VARIABLE FONTS ON DESKTOP APPS

In a desktop app, selecting a standard typeface and clicking on its drop-down menu reveals all the styles present in it, and each style can be selected separately and worked with. With variable fonts, additionally to the drop-down menu showcasing all the preset “named instances,” a variable font icon appears to the right of the styles menu. Clicking on the icon will reveal the sliders for every axis present in this typeface. The sliders can be dragged to the left and right to find the appropriate instance. The values can fall on existing preset styles or be custom, meaning that they are between preset styles. Depending on each variable font, different sliders will appear with different sliding values.  

YouTube has several tutorial videos explaining the usage of variable fonts in different desktop applications. 

Below are two screengrabs from Adobe InDesign showcasing some of the 29LT variable fonts in action. 

While the major web browsers (Chrome, Safari, Firefox, Edge, and Opera) support variable fonts, at the time of writing this article, very few desktop apps support variable fonts. And with the ones that do, some bugs are encountered; for example, spacing and kerning don’t perform perfectly in Adobe desktop apps, like InDesign and Illustrator, as they do on web browsers. For the Arabic script, we don’t recommend using accented text since it might overlap with the base letters. 

Before publishing any printed work using existing variable fonts, check for bugs and try to remove them by refraining from using a certain aspect of the font or the script you are typesetting in.

Check this link to see which web and desktop apps do or don’t support variable fonts: 
https://v-fonts.com/support

CONCLUSION—ONE FOR ALL  

With Variable fonts, we return to the big one: choice. We can choose one font family to suit a range of purposes within our project. Crunchier or grittier for headlines, with something slightly lighter and more dynamic for body text or copy. All contained within the one font. 

If that’s the big one, how about inclusivity? Variable fonts serve so many more readers than before, with availability to all. Each font variation works for more preferences and abilities of readers, sliding from long to short line-lengths, and dark to light, for example. Variable fonts also work across all devices, with different pixel densities and orientation. Accessibility?–check. We like having more chances in life, at a time when many aspects of living have been limited. Wouldn’t it be nice in our typographical decisions to have a heavier weight for a font (just so)—with some slant to it but not too much (just a bit less please)—and with greater width (a touch more). Yes, that’s right now.

Published by Pascal Zoghbi

When setting up to establish 29LT digital type foundry in 2013, Lebanese designer and educator Pascal Zoghbi aspired to explore the diversity and potential of the Arabic script. Zoghbi envisioned 29LT with a cross-cultural approach. Having evolved, studied and worked in a multicultural and largely bilingual environment, he embraced multilingualism. Coming into contact with more than one language in his everyday life, he has developed an exceptional ability to think global and to reflect the various technical, conventional, and cultural writing systems into his work. Accordingly, he has excelled in creating innovative, high-quality contemporary multiscript type families, each of which is unique in its design approach and responds to regional and international market needs. Staying true to his culture, he worked on turning traditional Arabic script into contemporary type. Always on the lookout for new ideas and harmony between scripts, he explores various tools and techniques and regularly partners with a team of professional designers specialized in specific scripts to create multiscript typography. Not only is he heavily involved in the practice of Arabic type design and typography, but he has also contributed to the field as an educator. Between 2007 and 2017, he taught at various design schools in Lebanon (American University of Beirut, Lebanese American University, and Notre Dame University) and in the UAE (American University of Sharjah). Besides lecturing at universities, he takes part in a range of design events worldwide and provides trainings and workshops on Arabic typography at universities, conferences, and agencies. Zoghbi has gained an international reputation for his work and has received throughout his professional career prestigious design awards and honors, such as TDC Typographic Excellence, Granshan, AIGA, and was nominated to Jameel Prize 3. His work encompasses an outstanding collection of contemporary Arabic and multilingual typefaces. He co-authored and edited the “Arabic Graffiti” book published in 2010. Zoghbi started his academic journey at Notre Dame University in Lebanon where he grew interest in Arabic typography. He further developed his type design skills at the Royal Academy of Art (KABK), the Netherlands, where he obtained in 2006 a Master of Design in Type & Media. In 2018, he relocated to Madrid where he is currently based. Since then, his interest in a vast number of Spanish historical and cultural topics, especially those that showcase the merging of Arabic and Spanish cultures, grew keener. 29LT expanded accordingly, shifting from supporting only Arabic and Latin scripts to a global multiscript approach tapping into other world scripts.