Variable Font Support

[Ash]

Variable fonts

Apps: Affinity Designer, Affinity Photo, Affinity Publisher
Platforms: All

You're now able to use variable fonts in all Affinity apps, providing a plethora of new typographic design possibilities.

As well as providing predefined font styles, such as light, bold and condensed, variable fonts give you fine control of specific design aspects known as axes of variation, or just axes for short.

To try out variable fonts in Affinity, apply one to some text and then:

- On desktop, click the Font Variations button on the context toolbar (or on the Character Panel).
- On iPad, tap the arrow to the right of Bold/Italic/Underline/Strikethrough on the Text Panel and then tap Variations.

Variation settings on desktop.

 

 

Variation settings on iPad.

 

You'll see settings for each axis that the font designer has made individually adjustable.

Axis' slider being dragged.

Many variable fonts allow you to adjust their width and weight axes, and possibly italic, optical size and slant. These five axes are common enough that they're defined by the OpenType specification.

All manner of other axes may also be adjustable, such as:

- the height of ascenders and depth of descenders to better fit your chosen line spacing.
- the stem terminals, to choose between straight and swelling.
- the width of counters, which are enclosed and partially enclosed spaces within glyphs.

For examples of other possible axes, check out the axis definitions that are available for variable fonts at Google Fonts.

You may see fewer axes in Affinity than are mentioned by a font provider's marketing. For example, Google Fonts lists 13 axes for Roboto Flex and Affinity exposes five of them. This is because we respect font designers' ability to specify that an axis should be hidden. This is part of the OpenType specification and means that software isn't meant to provide an interface for such axes.

Why would a designer do this? Well, a variable font might adjust an axis internally based on your choices for other axes that you can directly adjust. For example, observe how counter widths change when the weight axis is adjusted in the animation above.

Variable fonts and PDFs

PDF doesn't support variable fonts. So, when you export a PDF of an Affinity document that uses a variable font, we create a static instance of the font with fixed settings.

We've taken steps to ensure static instances of fonts are well named. You should find this minimises the need to identify the original variable fonts if you later import or place the resulting PDFs.

[Affinity Info Bot]

Known Issues in this feature
A list of unresolved issues for this feature, reported by users

• AF-2606 - Variable fonts - could trait be shown as "Custom" rather than blank
• AF-2880 - Variable Fonts - add reset to default icon to axes panel
• AF-2885 - Variable Font - text style description not correct when a style is modified by a variable font style
• AF-2886 - Variable Fonts - Updating a text style based on variable font changes not functioning
• AF-2890 - Variable Fonts - Font Manager issues
• AF-2922 - Character Panel: All fonts, selecting a Font Book Collection with Variable fonts will crash Affinity
• AF-2950 - Variable Fonts - Italic state lost when varying axes away from an italic preset
• AF-2974 - Axes Panel is sized incorrectly

Released Fixes
A list of issues for this feature, available in the current beta build

• AF-2910 - Variable Font - All axes visible when they shouldn't be
• AF-2878 - Variable fonts - Axes panel has transparency enabled
• AF-2845 - Variable fonts - Axes values not updating
• AF-2893 - Variable Fonts - Geologica Font not responding to Cursive axis

Upcoming Fixes
A list of issues for this feature, which will be available in a forthcoming build

[Patrick Connor]

The earlier posts made in this thread before the feature was made available can now be found here

[Maxdanger]

Excellent addition, first impression is it works smoothly.

Just noticed one thing which is at odds with your GIF Ash – the numerical value for each axes doesn't update in live time when you adjust the slider, it only updates when you close and reopen the variable font panel:

 

 

[MikeTO]

In addition to the numbers not updating when you drag the slider, the slider doesn't update if you enter a number and press tab or return, again until you close and re-open the popup.

Edited April 26 by MikeTO
fixed typo

[Bryan Rieger]

There's a noticeable lag with variable fonts (it's there with regular fonts too, it's just not as noticeable) where the text is fuzzy (like a highly compressed JPG) for a moment before it sharpens while being edited/resized/etc. I realize this was probably designed this way for performance reasons, but it's rendered fuzzy for just long enough to be distracting.

macOS 14.4, MBP M1-Pro, 32GB.

[MikeTO]

I really like how responsive Affinity is with axis changes, it redraws the font in real time as I drag the axis sliders without any lag whereas Adobe only redraws after I've let go of the slider and after a full second pause which seems like forever on fast hardware. The axes work great.

I was surprised that when I created custom instances that the Font Style control was blank. I was confused at first because blank is already used for mixed state. Perhaps you didn't want to repeat what Adobe did, listing all the axis changes in the name (e.g., "Italic Monospace-0.429 Casual-0.130 Semibold") but perhaps something else could be shown such as <Custom>?

3 minutes ago, Bryan Rieger said:

There's a noticeable lag with variable fonts (it's there with regular fonts too, it's just not as noticeable) where the text is fuzzy (like a highly compressed JPG) for a moment before it sharpens while being edited/resized/etc. I realize this was probably designed this way for performance reasons, but it's rendered fuzzy for just long enough to be distracting.

macOS 14.4, MBP M1-Pro, 32GB.

I'm on a M1 Pro, too, and choosing fonts and changing variable font axes are both instantaneous for me.

I don't have a huge number of fonts installed. I have the standard set plus about two dozen others. Do you have lots of fonts installed?

[Bryan Rieger]

19 minutes ago, MikeTO said:

I don't have a huge number of fonts installed. I have the standard set plus about two dozen others. Do you have lots of fonts installed?

I've got maybe a dozen fonts installed beyond the standard macOS font set.

[Hangman]

Feature request...

A keyboard shortcut (Alt or Cmd) to disable the defined stepping when dragging the sliders, i.e., to enable the completely smooth transition of the variable between values as per Google Fonts sliders...

[MikeTO]

8 minutes ago, Hangman said:

Will we always be restricted to the current five variables?

or at some point will all the variables for the specific font be supported, e.g., Roboto Flex supports thirteen variables...

I think Ash answered this in the initial post stating that axes hidden by the font designer will be hidden in Affinit and used Roboto Flex as an example. Lots of custom axes appear in Affinity. 

[walt.farrell]

10 minutes ago, Hangman said:

or at some point will all the variables for the specific font be supported, e.g., Roboto Flex supports twelve variables...

Did you miss Ash's comment toward the end of the first post in this topic?

On 4/12/2024 at 8:53 AM, Ash said:

You may see fewer axes in Affinity than are mentioned by a font provider's marketing. For example, Google Fonts lists 13 axes for Roboto Flex and Affinity exposes five of them. This is because we respect font designers' ability to specify that an axis should be hidden. This is part of the OpenType specification and means that software isn't meant to provide an interface for such axes.

Why would a designer do this? Well, a variable font might adjust an axis internally based on your choices for other axes that you can directly adjust. For example, observe how counter widths change when the weight axis is adjusted in the animation above.

 

[adrien_b]

Hello,

I tried using the Inter variable font, but the weight axis doesn't show up in the dedicated area, only the optical size one. (Note: the weight axis is not hidden in the font, as discussed above for others)

However, the weight axis is displayed when setting a text style

Edited April 26 by adrien_b

[Floor]

14 minutes ago, Hangman said:

or at some point will all the variables for the specific font be supported, e.g., Roboto Flex supports twelve variables...

 

On 4/12/2024 at 2:53 PM, Ash said:

You may see fewer axes in Affinity than are mentioned by a font provider's marketing. For example, Google Fonts lists 13 axes for Roboto Flex and Affinity exposes five of them. This is because we respect font designers' ability to specify that an axis should be hidden. This is part of the OpenType specification and means that software isn't meant to provide an interface for such axes.

Those axes are marked as hidden in Roboto Flex. According to the spec: "If this flag is set, the axis should not be exposed to users in application user interfaces except in specialized scenarios, such as a font inspection utility." Although it's a bit strange that Google does show all axes on their own type tester page: https://fonts.google.com/specimen/Roboto+Flex/tester?query=roboto+flex

edit: see above posts

Edited April 26 by Floor
too late

[Hangman]

5 minutes ago, walt.farrell said:

Did you miss Ash's comment toward the end of the first post in this topic?

Yep, completely missed it...

[Hangman]

Another question...

Is the Font Variation panel supposed to show transparency on Mac when accessed from the Context toolbar? This feels very out of character with the rest of the UI...

[MikeTO]

I tested copying text to and from MS Word. Microsoft only supports preset instances so I didn't expect custom instances to work but even the preset instances didn't work. I'm mentioning this only because others will likely try it and somebody might think it's a bug in Affinity.

Copying or Exporting from Word to Affinity: I believe it's Microsoft's fault because they're truncating the font style names - for example "Recursive Mono Casual Medium It" instead of "...Italic" - Affinity will show the font with a question mark. The issue happens with copy/paste, docx, rtf, and html. I had best results with docx but it was still terrible. Safari couldn't use the font style info in the HTML either.

Copying from Affinity to Word: Affinity properly copied the font style as RTF but Word could only accept the font family and ignored the font style.

[Bryan Rieger]

10 minutes ago, MikeTO said:

Copying or Exporting from Word to Affinity: I believe it's Microsoft's fault because they're truncating the font style names - for example "Recursive Mono Casual Medium It" instead of "...Italic" - Affinity will show the font with a question mark. The issue happens with copy/paste, docx, rtf, and html. I had best results with docx but it was still terrible. Safari couldn't use the font style info in the HTML either.

FWIW I had some weirdness in Affinity where I had one document I had opened that used a static version of a font, while I then created a new document that used the variable version (but only having the static or variable version of a font active at one time). I ended up Affinity picking up the 'correct' font, but there were visual glitches in terms of tracking, kerning, metrics, etc. Even copying between Affinity documents was creating some confusion.

I'm not entirely sure if this problem is down to only some variable fonts, or if it's potentially a larger problem in the way that Affinity handles these fonts in general. I'll do some more testing later, and try to come up with a solid reproducible test case.

[Hangman]

I made a simple PDF export test to see how the variable font information is labelled... Interestingly:

• Acrobat Reader fails to render or identify any embedded fonts and shows a blank page (assume this is an Adobe issue)
• Apple Preview shows the fonts but doesn't provide an option to see which fonts are embedded
• Foxit PDF Reader shows and identifies the embedded font info
• PackZView shows and identifies the embedded font info

[Hangman]

Another question...

When many variables are applied the export preview and the physical export are very slow for a really simple file i.e., twenty instances of the letter A using Roboto Flex each using a different Optical Size, is this to be expected owing to the conversion to static instances of the font with fixed settings?

 

[4dimage]

I tested the Roboto flex and Noto sans. Works well, even with effects on the text frame. I guess (in contrast to the 2023 Roboto Condensed) the Roboto Flex and Noto fonts ar far better constructed with only a few uncritical or no overlaps:

 

Noto and Robot Flex don't show artifacts when layer effects are applied, Roboto Condensed still does:

 

By the way: a little reset button/icon in the variable font drop down panel mightbe a nice timesaver after messing all parameters up 🙂

 

Like fonts.google.com

 

 

[Affinityconfusesme]

+1 for a reset button

[walt.farrell]

38 minutes ago, Bryan Rieger said:

FWIW I had some weirdness in Affinity where I had one document I had opened that used a static version of a font, while I then created a new document that used the variable version (but only having the static or variable version of a font active at one time). I ended up Affinity picking up the 'correct' font, but there were visual glitches in terms of tracking, kerning, metrics, etc. Even copying between Affinity documents was creating some confusion.

I would expect that you still need to have the correct font installed, and that having multiple documents open that require different versions of a font is more of a user error in setting up their configuration.

[Bryan Rieger]

1 minute ago, walt.farrell said:

I would expect that you still need to have the correct font installed, and that having multiple documents open that require different versions of a font is more of a user error in setting up their configuration.

Yes, but it's not flagging it as an incorrect font regardless. Also, as folks move their existing documents from static fonts to variable fonts, no doubt this 'user error in configuration' will come into consideration.

[MikeTO]

43 minutes ago, 4dimage said:

By the way: a little reset button/icon in the variable font drop down panel mightbe a nice timesaver after messing all parameters up 🙂

I've been wanting this, too, but I'm unsure what it should reset to? If I started with a named preset then of course I'd want to reset to that but if I started with custom values should Affinity reset to the custom values set before the last time I opened the popup or should it keep track of the preset I started with even if it was long ago?

With Adobe, which doesn't allow setting the axes from the toolbar and thus doesn't need a popup, the axes are listed below the Font Style list so to reset to a preset I can simply choose the preset from the list which feels natural and doesn't make me want a reset button. It's 2 clicks (open the style list and then select the style). With Affinity, I click on the font style list (which closes the popup), select the style, and then reopen the popup. It's only one more click but it feels much longer, perhaps because of the additional mousing required or my loss of focus.

I've been wishing that the font style list was duplicated in the popup so I could reset the style without closing the popup. But it seems silly to duplicate the list when it's just pixels away. Perhaps the toolbar should remain the way it is but the character panel could include the axes directly in the panel instead of in a popup. Clicking the button would show/hide the axes like Adobe.

2 hours ago, MikeTO said:

I was surprised that when I created custom instances that the Font Style control was blank. I was confused at first because blank is already used for mixed state. Perhaps you didn't want to repeat what Adobe did, listing all the axis changes in the name (e.g., "Italic Monospace-0.429 Casual-0.130 Semibold") but perhaps something else could be shown such as <Custom>?

On second thought, I want "ExtraBouncy." 🙂  Affinity doesn't show the named values for other axes, just for the primary one - I'm unsure if primary is the right term but I'm referring to the axis the presets are named for.

Shantell Sans (Google Font link) has presets named Light, Regular, Medium, etc. for its Weight axis. Its other axes are Informality, Bounce, and Spacing.

If I start with the Medium preset (Weight-500) and set Weight to 501, Adobe will show me "Weight-501". If I reset that and set Informality to 25, it will show "Medium Informality-25". If I set Bounce to +50, Adobe shows "Medium Bounce-50". All very standard.

But if I set Bounce to +100, Adobe shows "Medium ExtraBouncy", the name for +100 on the bounce axis. Likewise, if I set Informality to +100, I get "Medium Informal" rather than "Medium-100". If I drag Spacing to +100 I get "Medium Max Spacing". If I set the three additional axes to their extremes, I get "Medium ExtraBouncy Informal Max Spacing". I think this is more useful than showing blank which is what Affinity does now or than showing <Custom> which I suggested above.

Perhaps Affinity should show everything like Adobe. Or perhaps it could show the named value(s) for all axes and Custom only for other values. For example:

• "Medium ExtraBouncy" - If I started with Medium and chose a named value for another axis
• "Medium ExtraBouncy + Custom" - if I started with Medium, chose a named value for another axis, and set another axis to an unnamed value
• "ExtraBouncy + Custom" - If I set the primary axis (the ones with named presets) to an unnamed value and chose a named value for another axis
• "Custom" - If all axes are set to unnamed values

This would be shorter than Adobe but provide more information than the beta is doing now. Of course there's probably a font out there with named instance of "Custom".

Note: I don't fully understand what Adobe is doing. If I start with Regular (weight-400) and set Informality to 25, it shows "Informality-25" but if I start with Medium (weight-500) and set Informality to 25, it shows "Medium Informality-25". I don't know why it doesn't show "Regular Informality-25" for the first one.

[Pauls]

The axes have a default value specified so we should reset to that