3 ms·

Using Unicode shapes and vector-based icons is a great step forward. They're not suitable for every use-case but for most purposes they work well. Lately I've b

Using Unicode shapes and vector-based icons is a great step forward. They're not suitable for every use-case but for most purposes they work well. Lately I've been using Font Awesome[1] to a great extent. Is there a tool that lets you simulate what a site would look like on a high-DPI/Retina display? Is it simply enough to zoom the page in to get a feel for it? [1] http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/

alx 14y ago
Could you give us some use-cases where it's not suitable? Thanks :)
- coderdude 14y ago
  When you want an icon that isn't one color (font-base icons like Font Awesome or using Unicode), or when you require a graphic with a high amount of detail. There isn't really a good, cross-browser solution for that that I'm aware of. SVG works to some extent but I don't think it's very easy to work with. Another instance where image-based icons win over font-based icons is when the icon has a lot of small detail. Like a shopping cart (that isn't just a solid, but has the little lines) or an icon representing a list. The lines look imbalanced or one will be thicker than the other. I'm sure this is different across operating systems and browsers but the problem exists. Though you can fix that by never using those icons at a small size. Edit: One thing I hadn't thought of that was brought up by another commenter is that some people override the fonts used in a site's stylesheets and force only their font preference to be used (mostly for readability). This would mess with font-based icons. I can't think of a way to detect this but it's something to consider when choosing font-based icons. Maybe JavaScript betrays the actual font being used and you can detect and patch it at run-time for those users.
  - JackC 14y ago
    You could potentially detect it in Javascript (if there's no better way) by measuring the width of an off-screen element -- especially if you added a ridiculously-wide glyph to your icon font. Like "if this div isn't at least 3 times as wide as it is tall, my icons aren't rendering properly."
- thristian 14y ago
  In addition to what coderdude said, not everybody has a browser that supports custom fonts, or has custom fonts enabled, so if your site depends on custom font glyphs for navigation you could be making it unusable. Sticking to glyphs that are part of standard Unicode should be fine - those should render no matter what font the browser happens to use by default.
  - Silhouette 14y ago
    Sticking to glyphs that are part of standard Unicode should be fine - those should render no matter what font the browser happens to use by default. As long as your font includes the entire Unicode character set, that is. It would be a good idea to check that any glyph you were going to rely on for a site like HN was universally supported among common system fonts. Different platforms provide different fonts as standard, and even the likes of Arial and Verdana don't have 100% coverage.
- deleted 14y ago
  [deleted]
iamben 14y ago
I've been using fontello.com to make custom icon font sets - it's great for keeping the bandwidth down.

alx 14y ago

Could you give us some use-cases where it's not suitable? Thanks :)

coderdude 14y ago
When you want an icon that isn't one color (font-base icons like Font Awesome or using Unicode), or when you require a graphic with a high amount of detail. There isn't really a good, cross-browser solution for that that I'm aware of. SVG works to some extent but I don't think it's very easy to work with. Another instance where image-based icons win over font-based icons is when the icon has a lot of small detail. Like a shopping cart (that isn't just a solid, but has the little lines) or an icon representing a list. The lines look imbalanced or one will be thicker than the other. I'm sure this is different across operating systems and browsers but the problem exists. Though you can fix that by never using those icons at a small size. Edit: One thing I hadn't thought of that was brought up by another commenter is that some people override the fonts used in a site's stylesheets and force only their font preference to be used (mostly for readability). This would mess with font-based icons. I can't think of a way to detect this but it's something to consider when choosing font-based icons. Maybe JavaScript betrays the actual font being used and you can detect and patch it at run-time for those users.
- JackC 14y ago
  You could potentially detect it in Javascript (if there's no better way) by measuring the width of an off-screen element -- especially if you added a ridiculously-wide glyph to your icon font. Like "if this div isn't at least 3 times as wide as it is tall, my icons aren't rendering properly."
thristian 14y ago
In addition to what coderdude said, not everybody has a browser that supports custom fonts, or has custom fonts enabled, so if your site depends on custom font glyphs for navigation you could be making it unusable. Sticking to glyphs that are part of standard Unicode should be fine - those should render no matter what font the browser happens to use by default.
- Silhouette 14y ago
  Sticking to glyphs that are part of standard Unicode should be fine - those should render no matter what font the browser happens to use by default. As long as your font includes the entire Unicode character set, that is. It would be a good idea to check that any glyph you were going to rely on for a site like HN was universally supported among common system fonts. Different platforms provide different fonts as standard, and even the likes of Arial and Verdana don't have 100% coverage.
deleted 14y ago
[deleted]

iamben 14y ago

I've been using fontello.com to make custom icon font sets - it's great for keeping the bandwidth down.