Hacker News Reader

Comment by equil | Hacker News Reader

I hope this entices developers to reconsider the use of private use area (PUA) [0] based icon fonts for key navigational elements. I see them used time and again, and a slow connection or spotty CDN can render these sites unusable. [1]

If you absolutely have to use icon fonts, at least use ligatures instead of a PUA. That lets you fallback to a whole word if the specific font isn't present, or if the user relies on assistive technology like a screen reader.

[0] https://en.wikipedia.org/wiki/Private_Use_Areas

[1] http://i.imgur.com/GR9Jk2b.png

View on HN

There is even an actual Unicode symbol for the left-pointing magnifying glass ([1]) that they are using, yet they use the PUA anyways.

I use the [1] Unicode symbol semantically on my blog with a custom font at http://eligrey.com/blog/

1. Edit: Hacker News seems to have stripped the character from my message. I am referring to U+1F50D left-pointing magnifying glass.

NB I still get a broken character and not the magnifying glass on your site: https://imgur.com/a/3Rb7t

I've made a point of installing a variety of extra Unicode fonts like Symbola, and I still find sites with characters that don't render properly. I do see the magnifying glass on the parent comment's site though...

I think the main problem is that popular icon fonts like Font Awesome don't use ligatures.

Is there any reason why they don't? It seems it would indeed be much better.

Thanks for explaining the issue so clearly. I see this a lot after installing Privacy Badger and I wondered what it was called. In the rare instances that I needed one of these for page navigation, I've just hovered the mouse pointer over it and guessed at it's purpose by looking at the URL. It's one of those things that are an annoyance, but not quite a big enough issue to spend my time solving it or learning the cause.

Same here. I knew that something was broken, but meh ;)

Me too. I blocked web fonts in Firefox because a lot of them rendered text like trash when I had font anti-aliasing/sub-pixel rendering disabled (I prefer blocky-crispness to blurry-smoothness). Those stupid icon fonts have been the collateral damage.

And what's the point of sticking a handful of icons into a downloadable font rather than just downloading a few images?

> And what's the point of sticking a handful of icons into a downloadable font rather than just downloading a few images?

Some reasons:

* They are scalable vector images without the download bloat and processing load of rendering them with SVG.

* Raster icons need to closely match the screen DPI or they look awful - eg Retina displays made raster icons look like blocky pixellated afterthoughts.

* They inherit colors, sizes etc from CSS the same way as their surrounding elements.

Like this? http://fontello.com/

Reply on news.ycombinator.com