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.

genericons-neue

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!

Do's and Don'ts of Icon Fonts

Having worked on icon fonts a lot in this past year, I’ve learned many things about them I did not know before. In some ways they’re more useful than I thought (yes, icons can actually be pixel-perfect), in other ways less so (pretend Firefox doesn’t exist until it reaches version 25). Since icon fonts are booming these days, I thought it useful to share some do’s and don’ts that I’ve picked up over the course.

An icon font is a font that contains symbols and graphics instead of letters and numbers. Remember Wingdings? These symbol fonts are incredibly useful because they allow webdesigners to do things they can’t do with PNG or GIF graphics:

  • it’s HiDPI out of the box
  • they scale well (more on that later)
  • it’s easy to pick colors using only CSS

They’re so pleasant to work with that it’s easy to get carried away by the obvious benefits over PNGs. Unfortunately there are a number of limitations to be mindful of. Most of these can be mitigated by using icon fonts properly.

Scalability at small sizes

Just because icon fonts are technically vector graphics, doesn’t mean they all look great at any size shown. Especially at small sizes, icon fonts start falling apart. This is why good icon fonts are designed according to a pixel grid.

A pixel grid is a minimum resolution at which embedded icons show up crisp. Typically such a resolution is 16x16px (which translates to font-size: 16px) or 20x20px (which translates to font-size: 20px;). If you use the icons outside of their intended grid, the icons will get blurred and details become fuzzy. If you show an icon intended for 16px at 17px, it will look positively atrocious.

We’re used to this from the Nintendo 8-bit days: there’s only so much resolution to work with. Unless you place your pixels precisely, your graphics won’t be clear. Being vector graphics doesn’t change this one bit: at 16x16px it doesn’t matter how scalable your icon is.

Remember, even if you’re used to being able to use many different font sizes for actual fonts, icons are a different thing. Not only are our brains trained to recognize letters, but fonts themselves are designed to render letters for maximum legibility. Fonts rely on the fact that we read horisontally, and hints letters so that subpixel antialiasing ensures horisontal crispness at many arbitrary sizes. This subpixel antialasing does not translate to icons. Icon fonts won’t ever look as good as normal fonts do at arbitrary sizes.

Let there be no doubt in anyones mind: using icon fonts for web graphics is a hack!

It is a glorious, wonderful hack. But it is a hack. We have to be mindful how we use it.

Crossdomain fonts

Firefox blocks a stylesheet from example.com from loading a font hosted on cdn.example.com. It is an intended font piracy/hotlinking measure. The workaround is simple, but easy to forget when you’re pounding your head against the desk unsure why icons show up fine in Chrome but not Firefox.

The easiest workaround is to base64 encode the font file itself and embed it in the stylesheet. By being embedded directly in the stylesheet, no domain hops are necessary, and Firefox loads the font. Most icon font bundles (such as Genericons) come with base64 in tow, but if you’re making your own icon fonts, I recommend using FontSquirrel’s Webfont Generator which will optionally base64 encode for you.

Inserting icons

Because icon fonts are hacks, most icon font packs been through a rather lengthy process to make them as easy to use in webdesigns as possible. Ideally it’s a matter of referencing a stylesheet and copy/pasting a snippet of code.

But don’t get carried away. Behind the scenes numerous decisions have been made in order to make your icon fonts that simple to use. Some of those decisions have consequences outside of just the icons.

This is going to vary from icon font to icon font, but let me go through how the Genericons copy/paste tool works.

Glyphs

Right on the Genericons homepage, the third copy option next to the big icon preview is “Copy Glyph”. This is intended only for use in your Photoshop mockups. You download the icon font and install it on your system. Now in Photoshop you can paste the glyph in a textarea, set it to the Genericons font and the icon will show up.

It is not intended to paste in your actual HTML. Remember, icon fonts is a hack, and a screen-reader wouldn’t know what to do with a weird unicode symbol. Incidentally that means we can only rely on using CSS’s :before selector to insert the glyphs. That means using icon fonts in an accessible manner can never work on IE7.

Copy HTML

For casual users who want to insert Genericons as they would smileys, the “Copy HTML” feature is provided. In effort to make it as easy as possible to get the ball rolling and an icon showing, some helper CSS is provided with Genericons where every icon is mapped to a preset of named classes, for example:

<div class="genericon genericon-calendar"></div>

That’s a lot of CSS classes inside a redundant empty div, don’t you think? Yep. It’s not great code. But it’s really easy to insert, so the casual user doesn’t have to worry about the CSS. It’s perfect if you mean to insert a star icon in the middle of that article you’re writing in your CMS of choice.

Copy CSS

This is the option non-casual webdesigners should use. While also the least easy way to insert an icon (since you’ll effectively be re-writing some of the bundled helper CSS), it’s not actually as hard as I may be presenting it here. You should be using this method because:

  • it’s the most accessible — screen readers don’t even attempt to read the icons aloud because they’re inserted using only CSS
  • it’s the cleanest — there are no extra CSS classes and no redundant markup
  • you have the most control: since you write all the CSS, you don’t have to unstyle some of the bundled Genericons helper CSS you don’t need

The process is to essentially manually attach the icons to the :before selector of the class needed:

.my-element:before {
	content: 'f408';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 16px/1 'Genericons';
	vertical-align: top;
}

The content: 'f408'; part is what you get from the “Copy CSS” tool. You can structure your own CSS as you wish to minimize code duplication.

In summary

Using icon fonts is a wonderful hack that brings many convenient features, but unless you’re using them right, you’ll end up with fuzzy graphics. Knowing is half the battle, and here are the rules:

Rule #1: When showing icons small, do not stray from the font pixel-grid (unless you have a good reason). If the grid is 16×16, show the font at font-size: 16px exactly.

Rule #2: Don’t rely too heavily on the helper CSS, that is intended only for casual use.

Now go use some icon fonts.

Genericons

An Automattic 20% project of mine just graduated. Genericons is an icon font with emphasis on blogging. It’s GPL, so you can bundle it with WordPress themes. What makes Genericons special is that, like its inspiration: Githubs Octicons, the font was designed with a precise pixel grid in mind. That means if the icons are shown at appropriate font sizes (in this case, 16px, 32px, and similar multiples), the icons will render perfectly crisply. Thanks to Sheri and Takashi for contributions.