On the third day of ax-mas, we’re exploring: the Optical Size
In the last message, I wrote about using the Weight axis for a justification algorithm. This could be implemented as a “lower-level” use of Variable Fonts, where—should the font in question support the axis—the designer doesn’t necessarily have to know or care much that it is using a Variable Font.
This isn’t actively done, but there is a much better supported feature that follows the same pattern:
font-optical-sizing: auto in CSS.
Manual and Automatic Optical Sizing
Typefaces are drawn with at least a rough idea of their intended size, whether that comes from an intended use case, like “display headlines,” to “multilingual credit text at the bottom of movie posters.” Some are designed with an exact point size in mind.
This is communicated to end typographers in names like “Example Serif Text,” but occasionally styles will even have the exact intended point size in the name (although this can also be because it’s a historical revival of a typeface that was physically a specific point size).
Instead of using this naming pattern across a family of static fonts, it can be provided, in much more detail, along the Optical Size axis.
The text Optical Size, will likely get a value around 10–16 units on the Optical Size scale. The units are intended to correspond with the font size, so the minimum value must be larger than zero.
The maximum value will depend on a large size that the display size of your typeface is still intended to be used at, although I would avoid 100 as that implies a percentage. A range from, say, 8 to 72 in a text-to-display VF, will imply typographic scale to many.
I’m not going to get into the idea of drawing a typeface with the optical size feature in mind. Type designers are well-versed on this subject, and the drawing doesn’t need to be different due to Variable Fonts. Like designing typefaces with Width or Weight axis, these registered axis are intended to build on and further establish conventions that exist in typefaces.
What has changed, and is unique to Optical Size, is: the Optical Size value can, and perhaps should, be automatically applied based on the content’s font size.
As type designers recognize better than anyone, that is not always how they end up getting used; a high contrast display typeface intended for subheads being used to set lengthy body copy, or a text face being used as a headline when there is a more suitable option in the same family.
font-optical-sizing CSS property on the web, and features like InDesign’s option to map Optical Size axis to the Font Size value, provide one way to abstract this question away for people using your fonts that might not be in a position to need or want to make that decision.
The most opinionated part of
font-optical-sizing: auto is that it’s well supported across browsers (although there are some recent issues in Safari), and is intended to be enabled by default. Put another way: typographers on the web may have to opt-out of using it and define a custom optical size, rather than opt-into using it.
While many result in more options for end users, this can be a scenario where there are less decisions needed by typographers, and more control retained by the font (and therefore the type designer).
Until next time,