4 ms·

StateFace: A font you can use when you want tiny state shapes as design elements

33 points by pajtai 11y ago

loktarogar 11y ago
american states
moron4hire 11y ago
This sort of thing, minus the propensity for screwing up screen-reader progeams, is what SVG is for. Normally, I wouldn't complain about someone's project like this, but we as an industry really need to start treating the handicapped better.
- lanna 11y ago
  You are assuming the Web as the only medium. Content is also produced for other media, such as print.
  - moron4hire 11y ago
    It's a pretty good assumption, considering this is implemented in techs that are almost exclusively used on the Web and not in print. Regardless, SVG works in print, too. We have moved way past the period where printing required physically movable type. I mean, they even went so far as to create an SVG font. Why bother going through all that? Just make them icons.
  - benjohnson 11y ago
    Good point - I just checked and this font works well in Crystal Reports.
- Someone 11y ago
  And, even if they insist on using a font, they shouldn't have mapped the alphabet; they should have used a private use area (https://en.m.wikipedia.org/wiki/Private_Use_Areas https://en.m.wikipedia.org/wiki/Private_Use_Areas). If they nevertheless insist on keeping things easy to type (why? It is not as if people would write hundreds of these on a page (I hope)), they could have created ligatures, following the example set by Unicode regional indicator symbols (https://en.m.wikipedia.org/wiki/Regional_Indicator_Symbol https://en.m.wikipedia.org/wiki/Regional_Indicator_Symbol). That would make this more screen-reader friendly, too.
- rsoto 11y ago
  I agree, but am I the only one that has really big issues with SVG? Theoretically, you can embed a SVG with an <img>, <embed> or <object>, but each one of these has its own exceptions. Sometimes a 100x100 image takes more vertical space and it seems impossible to fix. Other times the stroke can't be modified. Personally, when I need vector graphics, I'll go with web fonts, since they actively work as sprites and their behavior is more stable. Whenever I need something a SVG is better (more colors, animated paths), I'll embed the SVG in the document, since it's not as straightforward as <img src="image.svg">
jlarocco 11y ago
This is over-engineering to use a specific technology even when it makes no sense what-so-ever. A bunch of small image files would have been easier to implement and easier to use, and wouldn't require a stupid letter -> state mapping like this has. <img src="new_york.svg"/> is obviously New York - <span class="state-font">h</span> is not.
- paulsmith 11y ago
  There is an alternate stylesheet that uses more semantic class names and allows for replacing text, so literal state names and abbreviations can be used in the markup. http://propublica.github.io/stateface/reference/cssclass.html http://propublica.github.io/stateface/reference/cssclass.htm...

33 points by pajtai 11y ago

american states

This sort of thing, minus the propensity for screwing up screen-reader progeams, is what SVG is for. Normally, I wouldn't complain about someone's project like this, but we as an industry really need to start treating the handicapped better.

lanna 11y ago
You are assuming the Web as the only medium. Content is also produced for other media, such as print.
- moron4hire 11y ago
  It's a pretty good assumption, considering this is implemented in techs that are almost exclusively used on the Web and not in print. Regardless, SVG works in print, too. We have moved way past the period where printing required physically movable type. I mean, they even went so far as to create an SVG font. Why bother going through all that? Just make them icons.
- benjohnson 11y ago
  Good point - I just checked and this font works well in Crystal Reports.
Someone 11y ago
And, even if they insist on using a font, they shouldn't have mapped the alphabet; they should have used a private use area (https://en.m.wikipedia.org/wiki/Private_Use_Areas https://en.m.wikipedia.org/wiki/Private_Use_Areas). If they nevertheless insist on keeping things easy to type (why? It is not as if people would write hundreds of these on a page (I hope)), they could have created ligatures, following the example set by Unicode regional indicator symbols (https://en.m.wikipedia.org/wiki/Regional_Indicator_Symbol https://en.m.wikipedia.org/wiki/Regional_Indicator_Symbol). That would make this more screen-reader friendly, too.
rsoto 11y ago
I agree, but am I the only one that has really big issues with SVG? Theoretically, you can embed a SVG with an <img>, <embed> or <object>, but each one of these has its own exceptions. Sometimes a 100x100 image takes more vertical space and it seems impossible to fix. Other times the stroke can't be modified. Personally, when I need vector graphics, I'll go with web fonts, since they actively work as sprites and their behavior is more stable. Whenever I need something a SVG is better (more colors, animated paths), I'll embed the SVG in the document, since it's not as straightforward as <img src="image.svg">

jlarocco 11y ago

This is over-engineering to use a specific technology even when it makes no sense what-so-ever. A bunch of small image files would have been easier to implement and easier to use, and wouldn't require a stupid letter -> state mapping like this has. <img src="new_york.svg"/> is obviously New York - <span class="state-font">h</span> is not.

paulsmith 11y ago
There is an alternate stylesheet that uses more semantic class names and allows for replacing text, so literal state names and abbreviations can be used in the markup. http://propublica.github.io/stateface/reference/cssclass.html http://propublica.github.io/stateface/reference/cssclass.htm...