Ben Dunkle

Watch a video explaining my process for making hand drawn fonts with Adobe Illustrator CS6, Glyphs Mini and my bamboo tablet:

The finished product:

You can download the font here:

https://github.com/field2/quickworms

The dashicons font created for the mp6 plugin has pretty much taken up all of my time the last few weeks. This even with help from Mel Choyce, Joen Asmussen and the rest of the WP design team.

There are quite a few resources on how to do this, but most of the ones I’ve read, although I’m sure worked for some, went against a few of my own design principals. So I set out to find the perfect workflow for me, and here it is.

When I design icons in Photoshop (AP),  the end goal is a png sprite. Using a split window, I can zoom in on one window and see the actual size icon in the other. I can click on an anchor point and nudge it with the arrow keys, getting sub-pixel placement just right and having absolute control over the end product.

The move to vector as the final source has been really weird and challenging. In Illustrator, vectors don’t anti-alias the same was as they do in Photoshop. That is, if you draw a rectangle with the edges half-way between the edges of a pixel, in Photoshop, you might get a different grey value than if you did that in Illustrator (AI). And pixel snapping is inconsistent. I would copy/paste a shape from AP to AI, and  my perfectly sharp edges would become fuzzy, even though the paths were exactly in the same place. If I click/dragged an anchor over a pixel, then dragged it back, it would become sharp again. Very weird.

The tutorials I read through, https://github.com/blog/1135-the-making-of-octicons and http://glyphsapp.com/blog/importing-from-illustrator/ were really helpful, but as I said earlier, there are fundamental flaws with those workflows, at least as far as I’m able to incorporate them into mine. For some reason, 16×16 is this imposing number that icon designers hold sacred. It’s a good target, but it really does overly constrain design. I decided 20×20 was a much easier canvas to work within, and as long as I left a pixel or two breathing room around the icons, they look great in a 16×16 space-not too big, but not leaving out important details in the name of absolute limits. I also got nervous when scanning through the article at all the weird numbers: 2048, 2052, -17something. Do we really need all those complex numbers? As for the glyphsapp.com article, while trying to draw directly in Glyphs may be the best way, it’s gonna be tough to put aside my AI experience to learn a new method for drawing vectors until I have lots of time on my hands.

After trying all sorts of settings, I came to the conclusion that 20x20pixel icons should be designed in a 2000×2000 upm font. The glyphs article points out that 1 ai point=1 glyphs unit. So I worked in points.

Another oddity was the Glyphs vs Glyphs Mini (GM) inconstancies. Joen Asmussen, who I can’t thank enough for all his help on this, designed the icon font you see at WordPress.com, using GM and following the octicons article pretty closely. I had a trial version of Glyphs, but decided to spring for GM for the sake of consistency. Although I started the font in Glyphs, bringing it into GM was an eye opener. The major issue was that GM doesn’t allow you to change the font’s UPM settings; so when I opened the .glyphs file I created in Glyphs, I was stuck with the 1000 upm I was originally working with. When I decided to try 2000 upm, so that it mapped more (theoretically) naturally with the 20pt x 20pt AI designs, my glyphs all got cut to 50% of their size. Resizing in glyphs was not something I wanted to learn how to do, so I returned my workflow to Glyphs.

Screenshots:

You can download the glyphs file, AI source file, and .otf here. Stay tuned for a video post.

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…

Looks like some of my ideas got implemented in the latest version of codekit. Not as crisp and clear as the ones I did though:

Here’s the latest:

icon files are here

codekit-icons

PSD here

icons

I really like CodeKit, but the icons leave a bit to be desires. So I fixed it up.

http://www.lacie.com/download/images/LaCie_logo_blue.jpg

ugh

Why does everything have to be a theme?

I’m nearsighted and when I take my glasses off I can see pixels on a “retina” display clear as day.

Here’s two versions of the WordPress home icon that you see in the dashboard. Click here for demo

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 going to be talking a lot about a concept that’s been brewing in my head lately: “Inside out learning”…stay tuned…

Most people love restaurants. I’m gonna go on record and state affirmatively that I hate them. I hate being seated, being served (no one should ever be “served” in this world), trying to get the attention of the waiter when something inevitably gets f’d up, looking around at the piles of wasted food everywhere, trying to figure out what the tip is, trying to figure out who owes what, waiting for the bill. Give me local street vendor food and quick/over the counter service, or let me cook it myself.

I saw Eli playing with toy guys today-Batman, Frodo, the Mask. I glimpsed him doing it in the front room, in our CA cottage. Probably the last time I’ll ever see it. There is nothing more magical than watching your son play with toy guys; the way their hands and fingers connect with the toy and animate it. I’ll write a book about it someday.

So last month I spent a bunch of time working on a logo design in response to Uncle Sam’s RFP: http://artsbeat.blogs.nytimes.com/2010/02/01/wholl-design-the-new-nea-logo-it-could-be-you/
. Regardless of what I think of spec work, I love high scale design competitions. Too much design is born from who-you-know and schmoozing.
Here’s my submission:

I’m at the ft Erie town meeting and 2 hours into it were hearing the same pro-condo heads go on and on. Were all in agreement on this point- the town needs more people, more business.
The people you’re gonna get are not what you want. You want people to fix the cottages and build new ones. Most are gonna be summer residents. Sorry, anyone who thinks CB is gonna turn into year round destination is nuts. We need to maximize what we have.