01Width, font size, tracking: who really does the fitting?
Hi.I’m Quinn Keaveney,speaking to you from Vancouver.At Overpunch we make fitWidth,a small library that fits a headline to its box.This talk is what we foundwhen we measured how it does that.
02Change the width, not the size.
A variable font is one filethat holds a range of designs.Some have a width axis:a setting that makes the letters themselvesnarrower or wider.That suggests a way to fit a headline:leave the size alone,add no spacing of your own,and change the width. The OpenType spec suggests it too,for small adjustments.Laurence Penney showed it working in twenty sixteen.
0397 of 1,950 families have a width axis.
We counted.Google Fonts has just under two thousand families. Five hundred and sixty-one are variable. Ninety-seven have a width axis. In forty-nine of those,the axis stops at a hundred,the normal width.It can narrow a headline.It can’t widen one.Most of those forty-nine are Noto.
04Half can’t go below 80%. Half can’t go past 113%.
We measured twenty-one of them in Chrome,across the range fitWidth searches by default. Half couldn’t take a headlinebelow eighty percent of its width.Half couldn’t take itpast a hundred and thirteen.These are free fonts,and we picked the twenty-one by hand.
05In Roboto Flex, the reach shrinks with size.
In one font it also depends on size.This is Roboto Flex,which redraws itself as it gets smaller.At a hundred and forty-four pixels,its narrow end takes twenty percent off a headline. At thirty-six pixels,a phone headline,eleven.At fourteen,less than four.
06Some families have a long width range.
Some families go much further.This is Anybody.Across its whole axisit goes from under forty percentto over a hundred and sixty.If that’s the look you want,choose a family like this.A script can’t add range the designer didn’t draw.
07One headline, 336 boxes.
Then we ran fitWidth on all twenty-one.One headline,and sixteen boxes for each font,from half the headline’s width to double.Three hundred and thirty-six tries. The width axis alonefitted seventy-five. Our default adds letter-spacing,and fitted two hundred and ninety-four. Font size,a new option,fitted all of them.That last number flatters us:the widest box we testedis exactly as far as we let the size grow.
08Tracking fits by pulling the letters apart.
Most of those fits came from letter-spacing,which typographers call tracking.This headline is tracked out to fit its box. This is the same headline in the same box,fitted by size.Matthew Butterick’s ruleis that lowercase doesn’t ordinarily need letter-spacing.Our default was adding a lot.
09The last letter misses the edge.
Testing this,we measured something we’d missed.Chrome adds the spacing after the last letter too,and fitWidth counts that gap as text. A tracked headlinetypically stops eight or nine pixels from the edge of its box.There’s now an option that trims it.
10The same headline, fitted four ways.
This is the demo on fitwidth.com. Each row is one way of fitting.Here the width axis is at its limit,and it’s a hundred and twenty-nine pixels short.Narrow the box,and the axis manages alone.Widen it,and the rows run out one at a time.When a row can’t fit,it stops,and says how far off it is.
11Axis, then size, then very little tracking.
This is the order we’d use now.The width axis first,for the last ten or twenty percent. Then font size,inside limits you set. Then tracking,and very little of it.The size step is new,and you have to turn it on.It is not our default.
12Size costs height, and stops at half and double.
It has costs.A bigger headline is a taller line,and whatever sits under it moves. And it stops at half size.In a very narrow box it overflows,where our default would crush the letters togetherand call that a fit.
13CSS is getting text-fit. It scales the text.
CSS is getting its own answer.A new property,text-fit,scales the text to fill the line. The Chrome team looked at the width axisand left it out of the first version.In Chrome it’s still an experimental setting.If it ships,and a full box is all you want,use it.
14Measure the axis before you promise the fit.
So before you tell anyonea font will stretch to fit,measure how far its width axis goes.Put your headline and your font into fitwidth.com,and it shows you.Whatever the axis can’t coverwill come from size or from spacing,and you should be the one who decides which.
15We’re Overpunch.
We’re Overpunch.We’ve built websites for type foundries for fifteen years.fitWidth is one of our type tools,and we’re now building Typetin,a storefront for independent foundries.The demo,the paperand the dataare at fitwidth.com.Thank you.