Variable color fonts for desktop design: Now with the Affinity Suite
Affinity has recently released version 2.5 of the Affinity Suite, a non-subscription set of design tools that includes support for variable color fonts. This alternative to Adobe Creative Cloud’s InDesign, Illustrator and Photoshop applications is now one step ahead of the competition by being the first to support variable color font technology in a desktop design application.
Send in the variable fonts
With the addition of variable fonts to Affinity app’s, it is now possible to install and use variable color fonts in your designs, and set the font variables through a simple interface. This makes sketching and creating iterations with these fonts a breeze compared to the code-heavy web approach required before desktop support.
An early advantage
Early in development, the Affinity team decided to support COLR/CPAL color fonts rather than the SVG color fonts supported by Adobe Creative Cloud. This was a logical choice as all browsers support this standard (for example, Google Chrome does not support SVG color fonts), and the font standard continues to improve for a sleek and easy-to-use web experience. (for example, with the introduction of COLRv1). This left the Affinity team with only one hurdle to overcome in order to support variable color fonts: The adoption of variable font technology.Unless Adobe switches to or adds support for COLR/CPAL, variable color fonts will not be supported in their applications, as SVG color fonts cannot be variable.
The differences
To understand why only these COLR/CPAL color fonts can be variable, we need to look into its technology, and the non-variable alternative, SVG color fonts.
Broadly speaking, COLR/CPAL fonts are constructed differently: their color and letterform information is split within the file, and only reunited at the end when visualised. This allows the letterforms to remain variable, as they can be transformed while retaining their color. The color information can also be targeted in the code (using CSS, for example), making it possible to adjust the colors or choose a different predefined color palette.
SVG fonts, on the other hand, have all their information in one source: A single letter contains an SVG vector “image” in which the shape and color of the letter are combined and not accessible from the outside. This means that the font cannot be variable, because it cannot transform. It also cannot contain color alternatives, and it tends to be much heavier in file size.
For future designers and developers
The adoption of variable color fonts in the Affinity Suite can simplify and accelerate the design process, allowing for quick design sketches, code-free and in a team-friendly design environment. The power of fluid typography through variable fonts can now be easily combined with exciting, colorful, multichromatic type, opening up new possibilities for type-driven design. The ball is now in Adobe’s court: when can we expect to hear back?
Curious to learn how to create your own variable color fonts? In our 11 lesson video course Arthur Reinders Folmer cover everything from creating to implementing a variable font. With the goal to make variable fonts accessible and fun! Enroll today.
