Hacker News new | comments | ask | show | jobs | submit login
Font that creates charts (fontfont.com)
321 points by gbvb on Aug 16, 2012 | hide | past | web | favorite | 61 comments

This is really quite genius. It uses ligatures (normally used to replace multiple letters by a single, nicer glyph, such as fi fl ae etc.) to replace "55+24+31" with a chart. You could theoretically use this on the web, and people who use screen readers or text-based browsers can still see the data. Cool!

Why do people still insist on doing this? I prefer to remap all fonts to two (a serif and a sans) that are much easier for me to read. When people use these silly font+glyph combos I never use their software. The one rare exception is GitHub. I still wish people would just use SVG.

Edit: Why was this down-voted? Is this not a legitimate concern? It is worth mentioning that I remap my fonts to help my dyslexic brain keep track of the baseline.

Edit2: It is also worth noting that this font does degrade quite gracefully and my problem lies more with the paradigm than this particular font.

"Insist"? Because it's fun, and useful. "When people use these silly font+glyph combos I never use their software." That's fine. Don't.

I was just thinking, " Hacker News".

When did we lose our interest in and support for hacking ?

It doesn't have to be "practical" nor "broadly applicable" to remain interesting and perhaps even a bit inspiring. And, as often as not, it's the thought of "What happens when I mash these things together?" that produces some real innovation.

As a community, we should continue to support such exploration.

People here do startups and businesses, but the community was never solely, nor perhaps even primarily, about that. Which comes first, the hack or the business?

You are aware it breaks accessibility, right?

I'd argue it's one of the better options from an accessibility viewpoint - from a screen reader perspective, you'll get the raw numbers. If the chart was an image, you'd get nothing.

That is a good point. This font does degrade gracefully.

It doesn't. If you remap your fonts, you get numbers.

How is it worse than SVG?

When I remap my fonts for accessibility reasons I can still see an SVG. However I'm left with tons of little boxes on Github's website where the buttons belong. SVG could be used for those buttons and they would get the same result.

I imagine this is primarily meant for creating static content such as print posters.

(I see that they are working on a web version, and regarding that I have to say I agree.)

This. What a silly thread. You probably couldn't lawfully use this on a web page even if you wanted to.

Yeah I saw this Asa tool for those interested in doing infographic type art.

Should we stop using green because some people are color blind?

That is a false analogy. There are no other ways to represent green that works for color blind people and is still green for everyone else. Using SVG for a button and using a Font for that button are completely interchangeable, visually.

I totally agree. It's a cool proof-of-concept but shouldn't be used beyond that IMHO. I think that just as CSS should only be used for presentation, fonts should only be used to render text.

Not only does it create accessibility and cross-platform issues but there are already dozens of other and cheaper ways to create nice looking graphs.

    >Why do people still insist on doing this?
HTTP requests. 'silly font+glyph combo' is the vector version of sprites.

And it's also nice to be able to change the colour of your monochrome vector graphics.

Except that this font doesn't appear to work on the web, it's only for use in software that supports higher typography features, such as Adobe applications.

Even browsers support have supported alternate font styles for years now. http://hacks.mozilla.org/2010/11/firefox-4-font-feature-supp...

In the part i was replying to the parent was not referring to this font specifically, but the font-graphics concept.

    >my problem lies more with the paradigm than this particular font

I'm using it in MOAI with harfbuzz. Its a brilliant font and makes adding simple HUD-style GUI's to my app very fun, indeed (hint: using a "printf" to get -> a graph == fun!!)

Yes, the main use of this will probably be to create graphs in adobe applications.

Also, being able to add css shadows. You can make shadows in SVG, but they will be different than the css shadows on the rest off the page, and generally a PITA

I see this as a designer-friendly graphing library. In the video he demonstrates how to use the font using InDesign. And last I checked InDesign doesn't have graphing tools that are this simple.

R -> C -> P -- this isn't for publishing but as a way to avoid drawing graphs in InDesign/Photoshop/Illustrator.


I love this set--we've been using them at Loudpixel for quite some time (even before they were bought by FontFont). I use them primarily in Illustrator for our custom research reports and publications: http://loudpixel.com/sugarfree/

I'm also a fan .. so much so, that I'm mid-way integrating harfbuzz into MOAI so that I can use Chartwell in games with ease and pleasure ..

What is the license like? It looked like per-user. Does this mean they do not wish it to be embedded on a web page? Can web browsers parse these OTF ligatures? Anybody have any experience here?

It would probably be a bad idea to embed this in a web page just for technical reasons, but for avoidance of doubt: fonts that you have to buy licenses for are virtually never embeddable directly. As a rule of thumb, if a technically capable person could in a short amount of time recover the original font from your web page and use it in their own work, you're materially violating the font's license.

This isn't just how this graphing font works; it's how virtually all professional typefaces work.

I'm not sure about embedding per their license, but I was also curious about whether or not ligatures will render in browsers. Apparently it's hit-and-miss:

Firefox has supported this since version 4, and but until recently it was the only browser do so. Now Microsoft has joined the party by announcing OpenType support in Internet Explorer 10, along with Chrome on Windows (not Mac yet).

(per http://blog.fontdeck.com/post/15777165734/opentype-1 with Chrome 16+ mentioned for Windows support. I haven't verified this.)

This is a really cute hack.

That said, the pricing is absurd. There are numerous data analysis and graphing programs that produce better looking, more customizable charts and graphs with a simpler UI, most of which cost significantly less than $129 despite being much more powerful.

It's not really about producing charts, it's about putting charts where you normally couldn't. World primary energy use by %: Oil 34.77, Coal 29.36, NG 23.76, Nuke 5.47, Hydro 6.63 █▇▅▁▂

There isn't anywhere this lets me put a chart that I can't today. Computers are capable of rendering non-font content, even if it sometimes seems otherwise.

how did you do that?

The black rectangles are just Unicode characters – for example, “▅” is character U+2585 LOWER FIVE EIGHTHS BLOCK. sp332 probably either used https://github.com/holman/spark or manually copied and pasted those characters.

That's how we used to make GUIs. Miss those days.

Close :) That was http://en.wikipedia.org/wiki/Code_page_437 (or the Unix equivalent I guess). I used the Unicode symbols that roryokane mentioned above, because it has more options for the height of a block (not just half-blocks). You can get Unicode versions of the older drawing symbols from this page http://en.wikipedia.org/wiki/Western_Latin_character_sets_%2...

The pricing is completely in line with what professional typefaces cost.

I agree. I never said that it wasn't.

This isn't a typical font, however. This is a font that serves a single specialized purpose, which is better served by existing non-font tools that are also cheaper. An exceptionally difficult sales proposition if one wants to get beyond font geeks who buy it simply because it's cool (not that there's anything wrong with that; I certainly considered buying it simply because it was a cool hack).

The value of a product isn't based on what it is, it's based on how it's used.

FontFont is going to have no trouble selling this to the market they normally sell things to: independent and corporate professional design shops that have no qualms at all spending (relatively) trivial amounts of money for typefaces.

Could you list some of these?

DataGraph (http://www.visualdatatools.com/DataGraph/) is my personal favorite.

The examples on the website don't necessarily do the tool justice, but it produces really beautiful output if you take the time to learn to use it, produces good output even if you don't, scales well to huge data sets, and the guy who writes it is incredibly sensitive to user feedback; when I've requested features, they've usually been available in a new beta inside of two days.

I thought this was really cool, until I saw that it cost $129.... Realistically, who would buy this? I'm assuming that because it is proprietary, it can not be used on the Internet, and if you don't have to cater to arbitrary OSes, why not use grh software?

$129 is actually very reasonable for a font. I've seen individual fonts several times that and you could only use them in print.

I am a type nerd; I've bought my share of typefaces in my time. This offers no discernable advantage over traditional chart generation. It only makes sense as a web font, and even then, it's a hack. I just don't see it worth the money.

What software aside from Adobe products would allow me to use the font like this?

TextEdit has great support for OpenType

Is there any particular reason the link is HTTPS, especially considering that the page contains no sensitive content, and a warning about non-SSL content when it's loaded?

Because it's on a site that accepts credit cards and has a prominent "Buy" link on the page itself.

I guess that makes sense, but doesn't the mixed content warning make it moot? Doesn't that mean unauthenticated javascript can be inserted?

They should fix that, yes.

What an interesting idea. Surely this must take advantage of some in-font scripting… if I remember correctly there is some type of ECMAScript variant inside OpenType.

Cool idea, but should offer a free version to spread the adoption. The premium version could offer more chart styles.


This is really nice! Any case studies, preferably HTML, where I can see this in work? :)

This isn't a web font and is mostly used in print (InDesign, Illustrator, etc...). Not sure if it's even licensed for the web.

Something I do not understand. Is Photoshop/Illustrator needed for this?

The chart items are implemented in the font as ligatures, which are (in a nutshell) elements that can be overlaid over other fonts in order to give them special inflection/meaning .. instead of a carat or so on, the ligature elements of the font file are filled with perfectly scaled graph figures, per datum, so that you can address the values for the graph in ligature terms .. +20+10+30+20, etc.

When you do that, and select Chartwell as the font, you get a working font - in Illustrator, or any font-display program that supports setting the Text style for .ttf fonts ..

This is rad!

I wish it was free :(

Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact