A Font that Renders 14 types of Charts | Hacker News Reader

A Font that Renders 14 types of Charts

vectrotype.com

150 pointssummarity28 comments

One might be interested in “Font for rendering line chart data” that was on the homepage a few weeks back https://news.ycombinator.com/item?id=39173438

Although the big problem here is one of accessibility. With traditional graphics, you can use alt text to provide information for low/no-vision users. The plain-text rendition of the input ends up not being particularly helpful.

This is part of why Github moved to SVG icons from its font-based icons. The former is more easily made accessible.

the chart type is the font, and the data is literally the text you type, so the chart itself is alt text

this is like, maximally accessible

The data is not necessarily same as what you type because it has to be normalized first. And it will lack any labels.

They show the input. I would not consider that to be usable for a human reader. Add in that you’re relying on visual cues to connect the numbers to the legend and it’s even less useful to the human reader.

Consider the simple case of a two-item pie chart which would be, say, 40+60</blue> followed by somewhere else lemurs and cows.

That doesn’t seem very accessible compared to an alt text on an image that reads “pie chart showing fraction of lemurs (40) and cows (60).”

What is the standard screen reader rendering of a line chart? (Now realizing I’ve made a lot of inaccessible charts in my life…oops.)

It will just give whatever is in the alt text for the image.

Yes, but what should be in the alt text for the image? Your pie chart example makes sense (“pie chart showing fraction of lemurs (40) and cows (60)”) because there are only two data points, but what should it say for a line chart showing the GDP yearly since 1900? A huge list of numbers? An overall interpretation of some sort?

It would be context dependent. For automatically-generated alt-text you’d likely see some human-understandable representation of the text which would likely be something like, “… 1919 GDP up to 4 million, 1920 GDP down to 3.9 million, …” On my own personal site when I’ve presented charts, I usually give an overall interpretation of the data, see, e.g., https://www.dahosek.com/2023-in-rejections-and-acceptances/ or https://www.dahosek.com/writerly-resolutions-november-status... (I just realized, looking at these pages that I need to do some fiddling with WP templates to get rid of the big ugly display of the featured image at the top of the page which doesn’t include any alt text at all). But the point is that just throwing unlabeled numbers at the user is not an acceptable presentation for accessibility.

(since I posted this, I’ve done some clean-up, although I also noticed that MarsEdit likes to put meaningless stuff into the “title” param of the img tag)

Tangent: It seems that multimodal LLMs are going to be great for accessibility. "What is on this document? What does the chart show?"

We might not be there just yet, but it sure isn't far away.

Fun, if you leave the website open but have focus elsewhere for a minute or two, a screen saver pops up!

neato! Should this more properly be called a canvas saver?

Is there interesting use cases, or is more of a fun hack?

I had the same question, as my first reaction was "this looks like such a hack, I am sure there are better tools for this," so I poked into the user manual[0] and found this quote:

> Driven by the frustration of creating charts within design applications and inspired by typefaces such as Beowolf and PicLig, Travis Kochel saw an opportunity to take advantage of OpenType technology to simplify the process.

Reading between the lines, "design applications" is very likely referring mostly to Adobe InDesign and Illustrator. I can see it being useful for the (somewhat niche?) use case that the creator had, which is quickly creating simple charts within Adobe products.

[0] https://assets.vectrotype.com/specimens/Chartwell-Manual-24-...

That's very ingenious. I wonder how bad performance is though.

This is the opposite of what you think. This is probably 10x faster to render than a traditional image chart. Font rendering engines are extremely well optimized.

The downside is not going to be poor performance but lack of flexibility. You want borders around pie chart slices? Not possible.

(2011)

this is so sick

Incredibly cool, how is this even possible?

A font is basically arbitrary vector graphics, and ligatures expand the available number of those graphics to as many as you want (ligatures can be whole words, not just letter pairs)

Ummm cool, but if browsers support dlig, and the font does what it says why are all the graphs on the page pictures instead of ... demos?

It's a commercial font, they don't want to make it so anyone can trivially grab it for free. Yes, you could find a site that actually uses the font for real, but it's much less obvious, so it still deters casual copying. You'd think they could at least show a few demos with a cut-down build, but ¯\_(ツ)_/¯

Hmm, maybe a demo font with watermark.

Lol, I haven’t seen that tried.

One nice strategy these days is having downloadable trial fonts with limited character sets. Get to use it locally as much as you want, until you need a quotation mark or a dash, etc.

Works great IMO—wish all foundries did so!

I've also seen them flip certain symbols so you still get to experience the full font but it's still fundamentally "broken," for example the slashes might be flipped.

That might be a feature ... http colon backslash backslash

That was my immediate first question as well when visiting their site. "Where are the web fonts examples?" The PDF manual has the font embedded and it appears to render well. This is super cool! But I'm a bit stumped on the use case and intended audience.

Reply on news.ycombinator.com