3 ms·
Hey, a topic I know something about! I've done something similar to this: "tightening" text to resist wrapping but not prevent it. I'll describe: A subtle feat
by exogen 4y ago
Hey, a topic I know something about! I've done something similar to this: "tightening" text to resist wrapping but not prevent it. I'll describe:
A subtle feature of OS X since its early days (but possibly not anymore) is that if you had something like a window title or a filename in Finder's column view, and you made the window or column smaller, before cutting off the text, OS X would shrink the letter spacing (and possibly other metrics) by a barely perceptible amount, so that the text could still fit. I always thought that was brilliant.
One day I was working on a very design-forward web project and wanted the same thing. Occasionally, text would wrap when it really only needed a few pixels of wiggle room to stay on one line. Thus, react-typesetting and a <TightenText> component were born: https://exogen.github.io/react-typesetting/ https://exogen.github.io/react-typesetting/
Eventually I realized it would be neat to make work with variable fonts (and their arbitrary axes) as well. Check out this demo: https://react-typesetting-alpha.surge.sh https://react-typesetting-alpha.surge.sh
I haven't touched or thought about this in a while, but I still think there's an interesting blog post to be made there about how it's done!
An interesting fact I learned about professional typesetting (and justification) is that, in order to justify lines, books don't just shrink the letter and word spacing: they also squish the characters themselves (in CSS this can be done with a scaleX transform). I guess my eyes have actually noticed this when reading books before, but I found it surprising because I always thought of the letterforms themselves as sacrosanct, and any distortion would be unacceptable. But it turns out, in almost every book you've ever read, 2–3% squishiness is perfectly acceptable.
- exogen 4y agoAnd while the folks who are interested in web typography are here: here's another neat experimental demo: river detection in JavaScript: https://twitter.com/ua6oxa/status/1256734388072574976 https://twitter.com/ua6oxa/status/1256734388072574976