I truly believe icon fonts are the future. Even if they have a couple of cons (sharpness, style), they are gona make their way (they did already) into the web and will become an important part of a designers job.
It's been a while I wanted to try to make my own icon font. Now it's done. I spent a good amount of time working and figuring the pixel hinting. After tedious hours I finally found an effective workflow to optimize icons to a 16px grid.
Here's a font I'm developping for my own website sallledesign. i've decided to include even my logo in there (the staches). The set is not complete but on a good way since i've got everything for my header and footer.
I will surelly write a "tutorial" to help you folks get an effective workflow and make your own sharp icon fonts.
What you're seeing there is straight up the font at 32 and 16px sizes.
about 1 year ago
Nicely done. Very much looking forward to the tutorial!
It seems to me that it's up in the air as to whether SVG, icon fonts, or pure CSS icons will be king, but I think each will have its place. Still, the pixel perfection of size-optimized raster is my favorite!
Great to see icon font talk! Definitely the future, and when done correctly like you have, they work tremendously!
Couldn't agree more that icon fonts are becoming very important in web design. Well said. Also love those staches. :)
What software did you use for the font conversion? Glyphs? I'm really interested in this part of the process. Great icon set by the way.
sexy site, sexy header, sexy icons, sexy designer. YES!!
I'm following you on that point. I've also switched to icon font on my next portfolio redesign.
On my side here is how I proceed :
1/ Use Photoshop to draw the icons with vector shapes.
2/ Import the .psd into Fireworks in order to save the icon with .svg format.
3/ Make a custom webfont with all my .svg icons with http://icomoon.io/app/.
Note : I've noticed some rendering issue at small size depending on browsers (Chrome : Light shapes, crisp // Firefox : bolder shapes.) What about you ? Any rendering troubles depending on browsers ?
I don't believe icon fonts are the future - the SVG format is. But until it's fully supported in browsers, icon fonts are a great alternative.
Love your job!
as always, good work @Jeremy Sallée ✦✦✦ ! Hope all is well in the bay. Keep up the good work man!
Looking forward for the tut!
Mustaches Icon font :D !!!! can't wait
@Martin LeBlanc - Personally I'd still opt for a font over svg icons even when it is more widely supported in newer browsers. Save http requests and get better support for older browsers
@Suzie Creamcheese lol, thx :)
@Aurélien Foutoyet @Andrés Botero Keyamoon seems to fail on applying pixel hinting to the font. So if you give him a svg, even if you snap to grid and have shape positioning as precise as possible, there is hight chances the icons won't snap perfectly to the pixel and wll have blurry edges (antialias!!!!!). So the process of making a shape (doesn't matter if it's on photoshop or ai or fireworks) and save it as an svg and import it to Keya moon is not perfect.
This is the process I've been using. You will need Glyphs Light App (around 50$ in app store).
Create a 2048x2048px square in ai and work your shape there. Keep in mind you will need an optimized 16px icon. For that you want to have a 128px grid on your 2048px square and try to snap as much as you want your icon shape to that grid (nothing is perfect so you won't be abble 100% to acheive this, but try your best). Then follow follow this acticle to configure your Glyphs font to fit for your AI shapes. Remember, when copy pasting from AI (or photoshop) to Glyphs, this one will remember the X,Y position of the incoming shape. So you need to prepare a SEPARATE ai file (2048x2048) for each icon of your set and center them there.
Now you need to optimize the shapes in Glyphs so they are PERFECTLY on the 128px grid and export it as otf (keeping the pixel hinting option on).
Then you have many option. You might just need that only font file you created. Then simply go to font-squirel font-face generator and generate your file for the web.
If you have more than one font file and you wish to use a couple of icons from each font file to create a new font file, then I wouldn't advice you to do everything in glyphs. As your other font files may already be optimized for 16px grids (with pixel hinting and all), but not with my dimentions, and you don't want to pass through the hassle of adapting your other fonts to your 2048pts one. it's long and tedious and they are already optimized. So in this case, just go to keyamoon, import your 3 font files, and select the icons you want an generate a new font. you don't care keyamoon will not optimize your icons with pixel hinting as your fonts are already optimozed for it.
ufff, welcome to the tedious world of icon font creation. But it's worth it. I will make a tutorial for what I just explained you with already prepared svg and otf files for my mimi glyph icon pack. Tp be continued...
@Martin LeBlanc @Nick Quebbeman Can't you make just one svg file and give position for it through code. That will be one http request too.
The main reason I opted for fonts is firstly because they are better documented on how to make them throught the web. SVG is less. Also because I find it so convenient to be adding an icon by behing highly straightforward and semantic on my code. If I want an icon it will be as simple as adding text! Finally I like the flexibility of them. they're not only resizable (like svg) but changing their color and style (for the moment 3 options, color, text-shadow and image-clipping) is very convenient for big websites.
@Jeremy Sallée ✦✦✦ Thanks for the insight on your process, I guess this is what I have to learn next, creating icon fonts.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter