3 ms·

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 agai

by equil 11y ago

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 https://en.wikipedia.org/wiki/Private_Use_Areas [1] http://i.imgur.com/GR9Jk2b.png http://i.imgur.com/GR9Jk2b.png

gherkin0 11y ago
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?
- antod 11y ago
  > 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.
tombrossman 11y ago
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.
- mirimir 11y ago
  Same here. I knew that something was broken, but meh ;)
Sephr 11y ago
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/ 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.
- tombrossman 11y ago
  NB I still get a broken character and not the magnifying glass on your site: https://imgur.com/a/3Rb7t https://imgur.com/a/3Rb7t
  - ChrisGranger 11y ago
    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...
devit 11y ago
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.
godDLL 11y ago
Like this? http://fontello.com/ http://fontello.com/

by equil 11y ago

gherkin0 11y ago

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?

antod 11y ago
> 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.

tombrossman 11y ago

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.

mirimir 11y ago
Same here. I knew that something was broken, but meh ;)

Sephr 11y ago

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/ 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.

tombrossman 11y ago
NB I still get a broken character and not the magnifying glass on your site: https://imgur.com/a/3Rb7t https://imgur.com/a/3Rb7t
- ChrisGranger 11y ago
  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...

devit 11y ago

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.

godDLL 11y ago

Like this? http://fontello.com/ http://fontello.com/