Genericons Neue

One Automattic "hack day" many years ago, I released Genericons, a font containing a bunch of little icons useful for blogs and websites. For this years hack day, I created a new version, Genericons Neue. It's visually more coherent and icons are better weighted against each other. The set comes with minified SVG files ready for use, as well as an icon font if you want to use that (buyer beware). If you're a fan of Node, there's a module you can install. It's super easy to use, and I encourage you to use the set, fork it, customize it, and bundle it with your themes.

The original Genericons set was created for the WordPress Twenty Thirteen theme. A goal for that theme was to be colorful, and in order for that to work, icons for tags, categories and comments had to be easily re-colored using only CSS, something which PNGs did not allow. SVG support wasn't impressive at the time, and so Genericons became an icon font. Inspired by The Making of Octicons, Genericons were pixel-perfectly drawn in Glyphs Mini. It was quite an arduous process.

Genericons Neue is focused fully on icons, so all logos have been removed — more on that in a bit. The set now use grunt to build everything from the minified SVGs to the icon font. The build process is like a black box: you feed it a folder of SVG icons you drew, and it outputs formats ready to be used in your themes and web projects.

If you're coming from Genericons, do note that there are no logos in Genericons Neue. Because Genericons was so early to the icon-font game, it more or less became a kitchen-sink for icons and logos. First just a few logos — "the most important ones" — then slowly it grew into too many. There were a bunch of little dingbats and one-offs, like triangles for CSS speech-bubbles today better done using just CSS alone. It was useful at the time, but it diluted the focus on being a great and consistent set of icons. On top of that, logos present unique challenges. Aside from having to be kept up-to-date with rebrandings, how should they be sized? Every logo is drawn on a unique grid, they don't all fit well on a tiny pixel-perfect grid.

If you would like to upgrade from Genericons to Genericons Neue, you can use logos from a different set, such as Social Logos. If you are only using the icons also present in Neue, it's a drop-in replacement as the icon font will map to the same codepoints.

I hope that you'll like Genericons Neue!

Font Smoothing

If you're really into icon fonts, which I have recently become, you may have noticed a tiny storm brewing in the suburbs of the internet. It's about CSS-specified font smoothing. Quite a nichy topic, one you can live a perfectly good life without ever knowing all about. You may in fact sleep better by not reading on.

Still here? Alright, here's the deal. WebKit — born of Safari, engine of Chrome — allows webdevelopers to specify how the edges of fonts are smoothed. The modern default font smoothing method is called subpixel antialiasing. It smoothes font edges using quite impressive means, and in nearly all cases it drastically improves the rendering of letters. If you look at the text in a magnifying glass, though, you'll notice a nearly imperceptible blue haze on the left side of each letter, and a red haze on the right side. WebKit provides a means for webdevelopers to pick which type of font smoothing is applied: subpixel-antialiasing, antialiasing, or none. Handy. Right?

The controversy is the fact that a number of people — smart people — feel that this CSS property is damaging to the readability of text on the web. There are very long articles on the topic. In fact quite recently a Google employee removed the CSS property from Chrome, citing the notion that the browser should render text according to the operating system. There's just one problem: icon fonts.

Icon fonts are custom-made webfonts that contain no letters, only icons. The purpose is to have fast access to a bunch of icons in a very lightweight and easy way in your webdesigns. Other benefits include the fact that the icons are infinitely scalable because they're vector graphics, and you can easily apply any color, drop-shadow or even a gradient to each icon using plain CSS. Sounds brilliant, doesn't it?

The only downside is that an icon font is still technically a font, so the computer thinks each icon is actually a letter, and by default will try to subpixel antialias it. While subpixel antialiasing does wonders to letters, it'll fuzzy up your icons and make them look blurry. Which is why the -webkit-font-smoothing property was so welcome. Here's an icon font without and with subpixel antialiasing:

As you can imagine, I'm strongly in favor of not only keeping the font-smoothing property, but in fact expanding it beyond WebKit to both Firefox and Internet Explorer. Icon fonts won't be a truly viable webdesign technique until every icon looks great on all the platforms.

"But SVG is the future of vector graphics on the web, surely you know that!" — Yes I do. But pragmatically speaking, that future is not here yet. SVG support is still lacklustre, especially when used as CSS backgrounds. More importantly, you can't easily change the color of an SVG icon using CSS only, or apply a drop-shadow. Yes, drop-shadows are on the road map for SVG, but the way it'll happen is not pretty. Icon fonts, on the other hand, provide a real-world solution today, which is both flexible and infinitely scalable. So next time you see someone bad-mouthing -webkit-font-smoothing, pat them on the head and mention icon fonts. The more you know.