Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Web Designers should all be using this idea by now: Font Icons.

somerandomdude.com

Post reply on HN
Print view View original

21–30 of 78 posts

Re: Web Designers should all be using this idea by now: Font Icons.

#21

Post by fourspace »

Leynos wrote: post #13

They missed one obvious disadvantage - it doesn't work where users force their browser to use a specific font. All I see are letters instead of icons. That said, would it not also make more sense to use codepoints within the "Miscellaneous Symbols And Pictographs" range where possible ( http://unicode.org/charts/PDF/U1F300.pdf ), where you'll find things like volume icons, padlocks, pins, etc. These are missing from…

Trying to introduce a design compatible with a user that specifically overrides your design seems like a losing battle, not one that should even be waged.

Re: Web Designers should all be using this idea by now: Font Icons.

#22

Post by tantalor »

Disqus uses this technique to inherit the font color of the embedding page,

  To accommodate this wide range of design scenarios, we decided to use our own
  custom web font via @font-face instead of traditional raster-based icons. This
  provides us with the flexibility of inheriting font color and size from a site’s
  existing aesthetic at an incredibly small file size (5kb). Since font-faces are
  vector-based, we are able to serve these icons at any size without consequence.
http://blog.disqus.com/post/2944356158/introducing-houdini-t...

Re: Web Designers should all be using this idea by now: Font Icons.

#23

Post by jonathanmoore »

I have been using this method for nearly a year on various projects and theme designs. The font icon method is incredibly useful when you want to give user the flexibility to change up the color of the icons. Plus, as mentioned using CSS pseudo elements with content should not effect modern screen readers.

One of the disadvantages mentioned in the article is the file size, but it can be drastically optimized. My favorite icon font is Pictos by Drew Wilson (http://pictos.drewwilson.com/). When I use it in a site design I will actually recreate the font file with just the few icons I need, usually 6-8 characters.

To reduce the font file size just load up the icon font in Font Squirrel's font-face generator (http://www.fontsquirrel.com/fontface/generator) and use custom subsetting to specify the needed characters.

Full Pictos Font EOT (19 KB), WOFF (13 KB), TTF (18 KB), SVG (41 KB) Total - 91 KB

Optimized Pictos Font (8 characters/icons required) EOT (6 KB), WOFF (4 KB), TTF (5 KB), SVG (5 KB) Total - 20 KB

Re: Web Designers should all be using this idea by now: Font Icons.

#24

Post by estel »

typicalrunt wrote: post #17

What about browser compatibility? The article doesn't mention how well font icons hold up against different versions of IE. Does anyone know?

CSS Web fonts have been in IE since (essentially) forever, and the :before / :after pseudo-element since IE8.

Re: Web Designers should all be using this idea by now: Font Icons.

#27

Post by kevinpet »

Always amused when I am unable to read an article about the new best practices in web design because the page renders with strange overlapping text. I think the table of short terms near the top is supposed to be an example of icons, but I see nothing in Linux Chrome.

Re: Web Designers should all be using this idea by now: Font Icons.

#28

Post by DanBC »

fourspace wrote: post #21
Leynos wrote: post #13

They missed one obvious disadvantage - it doesn't work where users force their browser to use a specific font. All I see are letters instead of icons. That said, would it not also make more sense to use codepoints within the "Miscellaneous Symbols And Pictographs" range where possible ( http://unicode.org/charts/PDF/U1F300.pdf ), where you'll find things like volume icons, padlocks, pins, etc. These are missing from…

Trying to introduce a design compatible with a user that specifically overrides your design seems like a losing battle, not one that should even be waged.

But re-inventing things that already exist is also sub-optimal. Why create a font, why not use an existing standard?

Also, having a list of the icons together with their labels made it easy for me to know what they meant. Some of those icons would be baffling to me if they didn't have a label. I could be convinced that extra visual clutter is a good thing, but some designer is going to have to give a nice example.

Re: Web Designers should all be using this idea by now: Font Icons.

#29

Post by metageek »

garrettdimon wrote: post #8

I can't find the information, but my understanding is that this approach isn't good from an accessibility standpoint because a screenreader still interprets the icons as their corresponding character and reads that character. As a result, instead of ignoring a checkmark icon, it would try to pronounce it as a single letter. UPDATE: Further digging seems to validate that most modern screen readers do ignore pseudo ele…

What happens if you use a nonstandard Unicode character, something from the one of the private use areas? Will screen readers ignore it?

Re: Web Designers should all be using this idea by now: Font Icons.

#30

Post by MartinCron »

morpher wrote: post #20

To me this seems like an ugly hack to get around flaws in the HTTP protocol. There was an article on HN yesterday about SPDY ( http://www.chromium.org/spdy/spdy-whitepaper ), a transfer protocol that allows multiple concurrent requests over a single TCP connection. This seems like the proper solution to the primary issue (requesting several small files is slower than requesting one large one). Also, as the design goa…

It's also an ugly hack to get around the fact that making production graphics for every single icon in every single size/color you may need introduces some serious friction to the development process.
Post reply on HN