Because it looks bad. When someone builds your house, they don’t put “built by houses-r-us™”. When someone replaces your roof, maybe they’ll stick a sign in your lawn saying “Roof by roofs-r-us™”, but you’re gonna yank that thing out pretty quickly.
If people want to know who built my site, they’ll contact the site owner.
So I’m trying to see if it’s possible to use a font for icons on a site, as has been attempted by the likes of fontawesome and probably many others.
Prognosis to date: it doesn’t look good.
I drew a 16×16 pixel box in Illustrator CS6.
Copy/pasted it into the lower-case “a” glyph in Fontlab 5 (with metrics set to 800 upm).
Exported otf, css3’d it into a basic html file, typed a single “a” on the page, loaded the page in Chrome and Safari, and was disappointed.
Here’s what I wanted to see: A perfect, 16×16 pixel black square, no anti-aliasing, in all major browsers.
Here’s what I got:
Those ain’t perfect squares. They’re close, and the main dark part of the square is 16x16px, but there’s some major anti-aliasing going on.
It’s also funny to note how Chrome tints the edges with a more reddish hue than safari.
I’ll keep playing around, but webfonts for iconography aren’t looking very promising, at least as long as low-dpi screens are around.
[UPDATE 1-26-13] I’ll post on the effects of webkit font smoothing shortly, how that impacts this experiment, and what it means for other browsers…
She’s the only one on the field without an “uh” sound at the end of her name. The coaches are playing with them in a little scrimmage, and they keep kicking the balls at the girls.
Icons are everywhere. As the contexts within which we interpret content become more unpredictable, so does our reliance on iconography to communicate ideas and messages. The use of iconography has exploded as dissemination of information must reach a multitude of user contexts. Icons can summarize universal ideas and complex actions with a few shapes.
Icons undergo intense scrutiny. They clearly “work” or “don’t work”. If someone is confused by a message, icons are often to blame. An icon which is not understood may be assigned the undesirable label of “mystery meat”; the stuff found in the lore of public institutions tasked with filling countless sandwiches to feed cretinous populations.
What we are experiencing is the construction of a new, universal language. But instead of taking millennia to evolve, it’s happening as you read this post. Symbols that best express universal messages are hotly debated, not only regarding what index they carry (see Meggs’ History of Graphic Design), but on whether the style they carry is appropriate (google skeuomorphic design for more on this).
My question is, who has the loudest voice as this language is constructed? The answer may carry insights about who determines what, as well as how, we communicate.
Pixels are dying. Or rather, they’re riding off into the sunset. Retinal display is the thing, and today’s 1080p is tomorrow’s 640×480.
So as designers, we should stop designing in pixels, completely. We should start using points instead.
% and em are great, but they’re relative. So if you tell me something is 1 em wide, I have no idea how big that is. That’s why pixels are popular; they’re absolute. I have a clear idea as to how big a website is if it’s 960 px wide.
Or do I? In fact, px is a relative unit of measurement. It’s relative to the pixel density on the screen. And on a retinal display, pixels are theoretically invisible.
Print never had to deal with all this. Printers have always been able to render insanely small dots-much finer than the latest retinal screens can. Which is why points, or 1/72 of an inch, have always held sway. That and their older siblings, picas, or 12 points, or 1/6″ of an inch.
A point is a point is a point. If a website is 720 points wide, it’s 10″ wide. Period. And any device that renders it can check with its own screen density settings to figure out how many pixels it should use to render that site.
It would be great to see more designers using points and picas in their css. Of course, basing those units on a percentage of a centimeter instead of an inch would make even more sense, but it’s probably too late for that.
I’m a professor, which I suppose makes me a professional teacher. I instead like to think of myself as a professional learner. I believe that teaching is an extension of learning. It enhances learning. If I can teach you how to do something, it means I have learned it myself. There are other ways to prove this to myself; if someone is paying me to do something, there’s a pretty good chance I know how to do it. But if I can observe you doing it, as a consequence of my having taught it to you, that’s exponentially better proof that I’ve learned it.
I have the app, I’ve played with it, made some icons, and I still don’t get it.
I think folks who use it a lot aren’t fluent html/css coders. For me, it’s a lot easier to do the things people say Sketch shines at directly in code.
Do you use Sketch? Do you consider yourself a fluent front-end coder? I’d love to know if I’m just doing it wrong.