Recently Heikki Lotvonen cooked up a very cool idea: what if the colorization of code output on the web could be handled by the font itself. Syntax highlighting, as it were. So rather than accomplish this with a heaping pile of <span>s with classes to colorize the text, the font file knows how to apply color directly.
This is actually possible (see a demo for yourself) because of OpenType fonts and the “color fonts” and “contextual alternates” feature.
I give this idea a 10/10. It’s amazing. It’s faster (particularly over client side syntax highlighting tools) with less DOM weight and is easier to use. It’s such a good idea I am really going to need font foundries to take hold of this and deliver us really nice fonts that do this job well. Mmmkay get on it now.
Fonts can do all sorts interesting things, many of which might be surprising. I enjoyed this little nugget from Roel Nieskens explaining how font-variant-numeric: tabular-nums is nice. Looks like Roel turned that into a whole talk showing off quite a few more Problems solved by OpenType. Here’s a whole big ol’ long list of features and example of what OpenType can do. Not all fonts support all these things of course, and if you’re unsure, the absolutely best way to know is to just straight up drop the font file on here and see.
It should be noted that with color fonts (part of what that whole syntax highlighting font trick was all about) doesn’t just mean that a glyph can be colorized with one color (like we typically think of with fonts) but can be totally wild.
Check out colorfonts.wtf for a bunch of information and examples, and How to use a color font for usage.
OK I guess while I have us on all this fancy typography stuff, lemme burn a few typography links I’ve got saved up:
- The Basics of Legibility by Niko Kitsakis — “A Short Guide for Non-Typographers”
llama.ttfby Søren Fuglede Jørgensen — “a font file which is also a large language model and an inference engine for that model.”- Departure Mono by Helena Zhang — “A monospaced pixel font”
- A font that is only 1px wide?!?!?
