|
Well, it’s Friday afternoon at 5, so naturally the best time to send out an email newsletter. But Monday bring’s a flight to Barcelona for CSS Camp and a bit of anniversary vacation celebration. So off it goes! Next week will likely be a bit more playful: my plan is to create something to showcase one of the variable fonts that Monotype was good enough to let me use.
Last week’s post about browser support for Italics in variable fonts sparked some great conversations—exactly what I hoped for in starting this newsletter. Folks from the W3C, browser teams, and type designers alike have written about it and/or looped that post into wider discussions. I’m excited to keep you posted on what develops. Stay tuned!
In other conference news, I've now got three workshops lined up amongst the conferences this fall: the latest being ATypI Tokyo! Full-day workshops can now be found on three continents this fall: Tokyo and Toronto in September, and Berlin in November. I’ve already had inquiries about some in-house workshops around those trips, so if your team can’t make one of the events, let’s talk about me coming to you! Hit ‘reply’ and let’s chat.
Finally, a huge thank-you to those of you who have contributed via the Patreon page I launched last week. Support in any amount is greatly appreciated. If you have reservations about that format, but you or your company would like to support in some other way, please let me know.
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
Contextual Alternations (for a fraction of the price)
|
|
|
Returning this week is the third issue in our exploration of OpenType features on the web. Two weeks back we explored ligatures, and numeral styles the week before. This time we’ll have a look at another way of using different styles of glyphs, only this time based on placement: we’re going to look at Contextual Alternates.
It’s about where you say it
Contextual Alternates are close cousins to ligatures, and are in fact accessed in a similar manner. They tend to serve two purposes: to provide alternative characters for use when ligatures are turned off (to avoid collisions between letterforms), and to replace character combinations often used to display symbols, like decorative arrows.
|
|
|
|
Check out the tail on that Q! A contextual alternate in EB Garamond
|
|
|
In many cases they are on be default, but it’s useful to dig in to the character map of the font to see what it supports. If you have the font files, one way to have a quick look is to use Roel Nieskens’ WakamaiFondue.com site. Just drag-and-drop the font file onto the target spot on the page and it will display all sorts of helpful information about the font. Just search for ‘calt’ and you’ll jump right to the relevant section.
|
|
|
|
Checked via WakamaiFondue.com, Playfair Display has some nice arrows you can access via contextual alternates (which in this case are defaulted to ‘on’)
|
|
|
|
Just uncheck the box on the right to see what characters combine to make the arrows
|
|
One hand giveth, the other taketh away
One place where you can most readily see contextual alternates in action is if ligatures are turned off. Because ligatures are used in the first place to handle setting characters that would otherwise have overlaps or collisions (think back to character combinations like ‘ff’, ‘fi’, or ‘fl’), if ligatures are not used, something else has to be done to avoid the overlaps.
Look closely at the following two examples where I’ve forced ligatures off, and then toggled contextual alternates. Notice the awkward spacing and overlaps with the ‘fi’ and ‘fl’—and where the contextual alternates are on, the finial of the ‘f’ has been shortened (the top right curved end of the vertical stroke) so that it doesn’t loom menacingly over the dot on the ‘i’ or awkwardly headbutt the serif at the top of the ‘l’. Having those present will keep your type in top shape whether you choose to use ligatures or not.
|
|
|
|
Notice the ‘fi’ and ‘fl’ combinations, and how close the finial on the ‘f’ (the top right end of the curved stroke) gets to the dot on the ‘i’ or the serif on the ‘l’
|
|
/* works with pretty much all browsers that support
web fonts, but not the preferred syntax */
.liga-on {
font-feature-settings: "calt" 0;
}
/* Works with current shipping browsers that support
web fonts (Edge support is v75+) */
@supports (font-variant-ligatures: contextual) {
.liga-on {
font-feature-settings: normal;
font-variant-ligatures: no-contextual;
}
}
|
|
|
|
And now here’s how they should look when enabled:
|
|
|
|
I’m sure you can feel a mental weight lifting from your shoulders with the alternate form of the ‘f’ giving the other letters some breathing room. Not the ‘contextual’ bit: it's only the second ‘f’ in ‘puffle’ that gets the alternate form
|
|
/* works with pretty much all browsers that support
web fonts, but not the preferred syntax */
.liga-on {
font-feature-settings: "calt" 1;
}
/* Works with current shipping browsers that support
web fonts (Edge support is v75+) */
@supports (font-variant-ligatures: contextual) {
.liga-on {
font-feature-settings: normal;
font-variant-ligatures: contextual;
}
}
|
|
|
Sometimes less is more, or more is less
The other kind of alternates you might like to use involve character combinations that help turn our ‘ascii-art’ attempts at arrows and such into actual, well, arrows and such. Many of us have used a hyphen and a greater-than symbol to create a right-facing arrow-esque symbol. Some fonts come with contextual alternates that, when finding those two glyphs next to each other, will replace them with a single alternate that is likely much closer to what you had in mind. Have a look at these, found in Playfair Display:
|
|
|
|
Some lovely little gems, if you know how to find them
|
|
|
|
Out of context: when forced off, you can see the character combinations required to use the arrows
|
|
|
Unfortunately there isn’t any sort of universal set of contextual alternates; it’s really at the disgression of the type designer to decide what they feel is most appropriate and useful. But finding out what’s there will help spur on some ideas that will add some wonderful refinements to your typography. And don’t forget that you can add helpful tips to your content management system, so that when someone else is posting a blog piece that could really use that perfect right arrow, they’ll know how to get it.
|
|
Another part of the story stacks up
A bonus form of contextual substitution can be found in that of fractions. When this gem of a feature is enabled, your recipe websites will go from drab to fab in no time flat. Or diagonal. There are features for both diagonally slashed fractions and vertically stacked ones, though the former are a bit more commonly found in my experience. They can be accessed via ‘font-style-numeric: diagonal-fractions’ or ‘font-feature-settings: "frac";’ (for the diagonal) and via ‘font-style-numeric: stacked-fractions’ or ‘font-feature-settings: "afrc";’ for the vertically-stacked variety if available.
|
|
|
|
With fractions enabled, simply typing 1/2 gets you an automatic substitution for the properly typeset glyph
|
|
/* works with pretty much all browsers that support
web fonts, but not the preferred syntax */
.fractions-on {
font-feature-settings: "frac" 1;
}
/* Works with current shipping browsers that support
web fonts (Edge support is v75+) */
@supports (font-variant-numeric: diagonal-fractions) {
.fractions-on {
font-feature-settings: normal;
font-variant-numeric: diagonal-fractions;
}
}
|
|
|
|
Just remember it might make sense to only apply this as a style for specific cases rather than all the time as it can produce some confusing results when applied to blocks of text for unsuspecting authors.
|
|
Web Type News
- The Letterform Archive in San Francisco, one of the most amazing collections of printed examples of type, typogrpahy, and graphic design from all over the world, has found a much-needed new home, but needs your donation to make it happen. Hope you’ll join me and make a contribution. Any amount will help!
- Not directly related to fonts, but Una Kravets created a fantastic demo on using CSS custom properties for color theming, and it fits perfectly with using them for typography too
- Eye On Design has a nice writeup of Nick Sherman’s latest work—a collaboration with Michael Bierut on a new typeface for the TWA Hotel at JFK
|
|
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!
|
|
Upcoming Events
- Heading to Barcelona on July 17th for CSS Camp to chat about dynamic typography and variable fonts
- Winding up in the Windy City for An Event Apart Chicago on August 26-28
- New! Teaching a full-day workshop and giving a talk on variable fonts at ATypI Tokyo on September 4-7
- Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14
|
|
|
|
