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

71–78 of 78 posts

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

#71

Post by Dylan16807 »

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 not even a solution to that problem. If you're willing to compile your icons into a single file you can spend half the effort on a sprite sheet, which is also one request.

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

#72

Post by DLWormwood »

flixic wrote: post #36

It misses one huge disadvantage: lack of pixel-level control. There is no way to have really sharp and nice edges on TTF icons, they look all smudgy and just not up to good designer's standards, especially at small sizes.

Wrong; TTF (and most other vector typeface formats) support "hinting," which provides metrics to handle glyph appearances at small sizes on low resolution displays.

The problem, however, is that hinting fonts takes extra work many designers don't bother with, and even if they did, rendering engines may ignore them due to a nasty thicket of patents related to font hinting. (Though I've read that the main ones have expired recently.)

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

#73

Post by alwillis »

JoelSutherland wrote: post #32
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…

You're describing a weird place where you want to display a semantic document (the html) using some non-semantic style rules (css, specifically :before and :after) and not others (@font-face) and then interpret the result as a whole semantically. If you want to browser-set font colors, you're going to have a hard time when they match CSS set background colors.

Sometimes we take the whole semantics thing to a point where it's counterproductive. Not every single selector has to be semantic. That's how get into situations like the ones that lead to Nicole Sullivan writing "Our best practices are killing us":http://www.stubbornella.org/content/2011/04/28/our-best-prac...

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

#75

Post by eli »

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…

There's a rather large gap between what the accessibility standards say you should do and the way actual screen readers work.

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

#76

Post by nickzoic »

lparry wrote: post #59
mrb wrote: post #49

I like this idea, for simple icons. Standard Unicode code points for symbols could be used to even allow screen readers to read them! Another alternative for pages with simple icons is to use the Data URI scheme: This compresses very well with HTTP content encoding when the same icon is repeated in multiple places in the page: http://en.wikipedia.org/wiki/Data_URI_scheme

And if your user visits more than one page on your site, you've successfully killed asset caching. More data for your server to send _and_ a slower experience for the user, losses all round

Not if you put the data URIs in a stylesheet shared across all pages: that gets cached nicely.

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

#77

Post by jonathanmoore »

dreamdu5t wrote: post #46
jonathanmoore wrote: post #23

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 favo…

Why don't you use SVG in your case?

I would love to, but in our case the two limitations are Internet Explorer 8 (and below) and cross domain limitations for the IE work arounds. The specific projects we're using the Pictos icon font on are being served up from a secondary asset server were we have no ability to add cross-domain policies or .htaccess modifications required for SVG or the .htc fixes.

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

#78

Post by BerislavLopac »

erikpukinskis wrote: post #44
BerislavLopac wrote: post #34

There is another disadvantage of this approach: many times, icons carry no semantic information at all, just being a design thing. Therefore they are most often (and most correctly) implemented as a background image on a certain HTML element which does carry semantic meaning, like a link or a button. This approach introduces icons within the semantic markup and/or content, unless they're added by some script, which k…

Not true. You can use :before and :after pseudo-elements.

That's a good point, true. But I never really liked content injection, via CSS or Javascript, anyway. :)
Post reply on HN