Ampersand 2018

My takeaways from a day of talks on the future of typography.

30 Jun 2018

I’m in England (for the first time!) where I’ve just attended Clearleft’s outstanding Ampersand conference in Brighton. I was a little concerned that the combination of jet lag and the (otherwise excellent) venue’s warm temperature would make it hard for me to focus, but the lineup of speakers was more than engaging enough to overcome those obstacles. The most discussed topic of the day was, unsurprisingly, variable fonts, support for which has begun seeing strides in browsers and desktop software. There was plenty of inspiring experimentation, reimagining what we expect from letterforms and how they might better serve the reading experience in various contexts. But it’s early days, and there are still many unanswered questions about how the benefits (more robust typography at smaller file sizes) will square with the costs (added complexity for font designers and software developers).

Michael Johnson: The Crucial Role of Typography in Branding

Michael walked us through some examples from his company’s impressive portfolio of branding work. It was the right kind of portfolio talk: sharing insights learned in the process of doing the work rather than simply presenting a client pitch deck. While branding work often regards type as something to support the central logomark, Johnson Banks’ brands are more centered on typography.

Science Museum: Embed the logo in the font. Create a font that is the brand.
More Than: Try to purposely limit the palette. What can you do with just one face in one weight?
University of Cambridge: Dull typefaces can be very useful.
In the spirit of accessibility, branding for the disability charity Livability makes great use of free fonts.
In the spirit of open source, the Mozilla rebrand was designed in the open.
There is so much typographic choice now, but everything looks the same: Spotify, Airbnb, Google, Pinterest all use indistinct versions of the same humanist sans that’s everywhere these days. Do you want to fit in or stand out?

Bianca Berning: The Amazing Potential of Variable Fonts

Bianca is a font engineer and type designer at Dalton Maag. She started off by breaking down fundamental considerations for the typographer:

What is the content? Genre, style of language, length of text?
What is the context? Time/place, audience, production methods?
What is the functionality? In what ways does the text need to be usable/accessible?

Then she showed some very cool potential uses for variable fonts:

Bram Stein did some experiments with a block of justified text, comparing the space savings across different justification methods: standard, algorithmic without hyphenation, algorithmic with hyphenation, and subtle character width adjustments per line. The variable font version is basically font stretching without bastardization.
Using a webcam to make type adjustments on the fly based on the reading environment. Make the text bigger when the reader is far away from the screen and smaller when they’re near. Change the text to white on black when the room is dark.
In an augmented reality context, adjust the width of the type to optimize legibility when viewed at sharp angles.

Mandy Michael: Wild Experiments with Text and CSS

Mandy is a front-end developer who shares ingenious typographic CSS experiments. Her secret weapon is the use of HTML data attributes with CSS :before and :after pseudo classes to get three stacked, individually manipulatable layers for one piece of text. You can do a lot with three layers!

<h1 data-heading="Hello World!">Hello World!</h1>

h1 {
  position: relative;
}

h1:before,
h1:after {
  content: attr(data-heading);
  position: absolute;
  top: 0;
  left: 0;
}

From there, all kinds of effects are possible using various combinations of CSS3 properties like mix-blend-mode, text-shadow, background-clip: text, etc. Also, font-variation-settings can be animated! Don’t assume code can’t accomplish the effect you want.

David Jonathan Ross: Designing Extreme Fonts for the Web

DJR is a type designer and proprietor of the Font of the Month Club. His goal is to “create type that can be specific.” Beginning with a shoutout to Rich Rutter for saving the list of pangrams from Wikipedia, DJR’s talk centered on his variable font Fit, which aims to fill available space as densely as possible while maintaining a consistent counter space. It’s effectively a systemized version of the barely legible psychedelic lettering from the late ’60s / early ’70s. Some inspirations:

Cowhand, which makes clever use of OpenType features to fill available space.
Calcula, which creates density through the use of innumerable discretionary ligatures.

Other interesting recent projects:

Output Sans, an upcoming DJR typeface which uses optical weight magic to maintain a uniform stroke width across different sizes.
Extraordinaire: A layered variable font!
Merit Badge: A variable color font!

Good things to keep in mind about variable fonts:

A variable font is only as good as its default style.
Not every font needs to be a variable font.
Try the weird thing before scaling back to the boring thing.

Jen Simmons: Groundbreaking New Tools for Web Typographers (slides)

Jen is a designer advocate at Mozilla, helping to create handy developer tools in Firefox. She’s also the host of the excellent Layout Land video series, and she refers to the potential made possible by new technologies like Flexbox, CSS Grid, and variable fonts as Intrinsic Web Design.

Jen talked about aspirations for the Fonts panel in Firefox’s web developer tools, including surfacing OpenType features and variable font axes that the designer might not know about (no one ever “reads the manual”). She also demoed some other great web developer tools in Firefox, like the CSS Grid Inspector and Shape Path Inspector, as well as the Clip Path Inspector, which is coming soon. Stay on top of the latest and greatest by using Firefox Nightly.

Steve Honeyman: Bringing Blue Notes to the Web

Steve is a web developer and musician. Accordingly, he took it upon himself to recreate a number of Reid Miles’ classic Blue Note record sleeves for the responsive web. He took us behind the scenes, but the quick pace made takeaways tricky.

html { font-size: 1vw; } seems like it’ll come in handy.
Some examples used dizzying combinations of viewport units and calc() that I still can’t wrap my head around.

He also showed one or two that got away: The typeface comprising the focal point of Lou Donaldson’s Sunny Side Up couldn’t be approximated.

It made me eager not only to poke around in his code, but also to get home and dig back into the book of Blue Note covers, which is something I should really look at at least once a week.

Irene Vachlou: Dancing Around the Design Space

Irene is a type designer at Type Together. She went into the nuts and bolts of designing Protipo, a lot of which was over my head. The part I found most interesting was the challenge of dealing with certain letterforms in variable fonts whose fundamental structures need to change in certain circumstances (e.g. the middle of a dollar sign’s crossbar needs to disappear at a certain weight). From Irene’s article about Protipo:

FeatureVariations allow character switching for typographic tweaks in specific regions of the design space. We call them jumps. Thanks to Miguel Sousa, the code is available online for everyone to read and adapt. Protipo Variable uses this technique for ten characters switching in three different values (at weight 400: ‘$’, ‘¢’, at 440: ‘€’, ‘¥’, ‘Q’, and at 600: ‘Ø’, ‘ø’, ‘ð’), values which are appropriately tuned for each character.

Dan Rhatigan: What Digital Type Could Do for You

Dan is a senior manager at Adobe Type. He started off by making a great point that I think is still understood by too few people: “Words are powerful. Digital words can be super-powered if you let them be: editable, scalable, selectable, accessible, searchable, translatable.” Text ≠ pictures of text.

Riffing on the concept of a traditional font essentially being a database, he covered newer technologies that expand the possibilities of what a font can be. In addition to variable fonts (which he aptly described as getting a whole family in a single font), there’s OpenType SVG, which adds color, transparency, and gradient possibilities. The progress enabled by these advances “will happen on the web before it happens on desktop,” a statement about typography no one could have made with a straight face even two years ago (although I took note when he said it a year ago). In case that wasn’t sufficient evidence that hell has frozen over, Adobe Type is getting into open source. The spirit of collaboration surrounding all of these advances in design technology is very encouraging!

Mark Porter: My Life in 10 Typefaces

Mark is the principle of Mark Porter Associates, perhaps most notable for his work with The Guardian. His talk bookended the day nicely with Michael’s, in that it was portfolio-focused. He went through decades of work by focusing on the typeface most emblematic (for him) of each period. I mostly just enjoyed his storytelling without taking many notes, but the 10 typefaces do make an interesting chronology all on their own: