|
I’m back from An Event Apart this week, and feeling pretty excited about the response to my talk and to variable fonts in general. I took a poll of the room during my talk and posted a video of a room full of people excited to use variable fonts. It sparked a bit of discussion that is still ongoing. I’m happy about that: we need to keep educating the industry about them, get a few more good, complete open source fonts out there for people to use, and to celebrate the launches of sites that put variable fonts into practice.
Toward that end, I’d be remiss in not pointing out the first such example: the Nielsen/Norman Group. They updated their site to use Source Sans Variable back in November of 2018 and wrote a bit about it as well. Their decision was driven by performance and user experience, and it’s a fantastic use case even without any further design considerations.
More recently, a project I’ve been working on with the Georgia Digital Services team in conjunction with Lullabot has started to launch. I designed the responsive typography and refined the design system for their state agency website platform, and Lullabot has done all of the development (and content strategy, UX, and then some). It’s been an amazing partnership, and the sites utilize just about everything I’ve worked on in the past 8 years or so in responsive typography. I’m tremendously proud of the work we’ve done, and love how well Source Serif Variable (and the static version for older browsers) looks in the new system. The first couple sites launched in the past 2 weeks (ADA and SWBC), with more to come throughout the year.
I did have a bit of fun after my talk at AEA: I spent some time remixing something Jeffrey Zeldman worked on as part of the Poynter Digital Newspaper Design Challenge back in 2017. You can read about his experience with the summit and the particular part of it he chose to tackle here. I took his template design and added the dynamic typography, variable fonts, and general responsiveness I've been speaking about, and we launched that at the end of the conference. I'm looking forward to seeing what else we can do with that, but in the meantime, have some fun with it and be sure to share some links!
Finally, one or two more tidbits to share! I had the pleasure of interviewing Jenny Shen, an independent UX and localization consultant based in Amsterdam, for a new series I’ve started in collaboration with Smashing Magazine. More on that soon, but the first episode with Jenny went live on Monday and you can watch it over here. Next week I’ll be teaching a full-day workshop on variable fonts at Type Directors Club in New York City. There are just a couple spots left if anyone wants to grab one. And last but not least, I’m thrilled to share that I’ll be heading to Barcelona in July to talk about variable fonts at CSS Camp along with a growing list of absolutely brilliant presenters.
And now let’s get back to some more on variable fonts!
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
Variable fonts, Part the Second: Optical size, custom axes, and other curiosities
|
|
|
Last week I finally introduced you to variable fonts a bit more formally. I covered four out of the five registered axes and bunch about how to implement them. This week I want to dig into the fifth registered axis, talk a bit about its history, and explore some of the other interesting aspects of the new format.
|
|
|
|
A broadsheet specimen printed by William Caslon in 1720, showing the physical differences between sizes of metal type.
|
|
Optical size
For many of us, the only sort of type we know is digital. And digital type has generally worked the same way for a long time. There is a single outline for every glyph, and changing the font size simply scales that glyph to the desired proportion. But if the typeface has particularly high contrast between thick and thin strokes, simply scaling the outline uniformly can lead to some unpredictable results. Very thin stroke weights can become so fine at small sizes as to fall apart or effectively disappear. Conversely if the design has been optimized for smaller physical sizes, it can look ungainly when used at larger sizes. But this was not always how things were done.
Going back hundreds of years, there has been a practice in the type design industry of crafting slightly different version (of ‘cuts’ of a typeface with subtly altered stroke weights: making them slightly thicker at physically smaller sizes to avoid breakage of the forms. At larger sizes the thinner strokes could maintain a more refined proportion, preserving the original detail and design intent. The examples below are details from the broadsheet shown above, printed by William Caslon in 1720 to demonstrate one of his early typeface designs. The upper-case letter C, shown at a normalized size, set at both 6pt and 72pt shows this technique quite clearly.
|
|
|
But by the 1960s, as phototypesetting and then digital type became the norm, this practice was largely lost. When converting the type to the new format, in most cases a single outline was chosen which was then scaled uniformly. While modern paper and printing has improved dramatically, there is still an unmistakable difference in legibility and refinement when you see it side-by-side. Occasionally you see digital typefaces sold in different optical size ranges (optimized for small body copy versus large display use), but it’s pretty uncommon.
With the advent of variable fonts we can revive the practice in a much more practical way. Rather than having to create, sell, and load separate font files, we can load that same single variable font file, and have the browser set the optical size for us. Intended to be applied automatically, we also can control the optical size setting explicitly should the need arise.
The intent is that the optical size axis values correspond with the size at which the font is set. So an optical size range of 12 to 72 when used on the web should correspond to an equivalent pixel value (or points in print applications). Browsers are supposed to be able to set this automatically, but as of this writing Chrome still doesn’t support the property so you have to set it manually to get more universal results.
Ideally according to the spec you should be able to set this (or even have the browser just do this by default):
|
|
.optically-sized {
font-optical-sizing: auto;
}
|
|
|
|
To ensure it works in all browsers supporting variable fonts, you need to use this for now. Note that the value supplied should be an integer corresponding to equivalent pixel size of the font.
|
|
.optically-sized {
font-size: 2rem;
/* 2rem = 32px with default font sizing */
font-variation-settings: 'opsz' 32;
}
|
|
|
|
I’ve set up a couple of examples looking at Amstelvar (a serif typeface where it makes a huge difference), and Roboto Delta (a sans-serif where it’s quite a bit more subtle). I make use of optical sizing on my own site with the variable version of Roslindale and the impact between text and headings is (I think) pretty stunning.
|
|
|
|
Example of optical sizing: top, with correct optical size showing fine details; and bottom, with the optical sizing forced to a lower value showing the reduced contrast and thicker forms that will help maintain readability at physically smaller sizes.
|
|
Custom axes
One of the main goals of the variable font format was extensibility: it’s simply impossible to know exactly how type designers will want to vary their typefaces in the future. And that’s really the point: evolution and exploration are already yielding some fascinating and fantastic results. One that I quite like is the ability to alter the height or depth of ascenders or descenders. This can have enormous impact on the overall tone of a typeface, but can also impact how we typeset with it. I love really tightly set headlines, and with the ability to tuck the ascenders and descenders in just a little bit we can tailor the typography quite a bit and avoid unsightly collisions from one line to the next.
|
|
.tight-fit {
font-variation-settings:
/* lower values shorten the ascenders and descenders */
'YTAS' 750,
'YTDE' 250;
}
|
|
|
|
Amstelvar has axes for ascenders and descenders, so I’ve set that up as an example to play around with as well. Of course there are many other custom axes that have been created. You can explore some fun experiments on CodePen to see some of them in action. I’ll cover more examples next week.
Not custom, but curious
David Jonathan Ross has been one of the most prolific designers of variable fonts to date. He’s been releasing one almost every month in his Font of the Month Club, often improving them even further over time. One of the most fascinating releases is the italic version of Roslindale Display: it separates the italic and slant axes, so you can choose to have italic forms in an upright stance, roman forms with a slant, or any combination of the two. And rather than change all the italic forms at once, they’re spread along the italic axis so it’s even possible to have a combination somewhere in the middle. I have to admit, I’m pretty smitten. I've shown them below, but you can also have a play over on CodePen.
|
|
|
|
Example of upright italics and slanted with Roslindale Display
|
|
|
I hope you’ve had some fun with these. We’ll take a look at more custom axes next week to get an idea of just how much we can do now on the web.
|
|
Does your organization need a boost?
If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!
|
|
|
|
