Icon fonts sallee design

Webfonts

22 Responses

  1. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    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.

    likes

    over 1 year ago

  2. Eli Schiff Eli Schiff

    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!

    likes

    over 1 year ago

  3. Andrey Maxim Andrey Maxim

    Very cool!!

    likes

    over 1 year ago

  4. Lewis Braid Lewis Braid

    Great to see icon font talk! Definitely the future, and when done correctly like you have, they work tremendously!

    likes

    over 1 year ago

  5. Joel Reid Joel Reid

    Super good.

    likes

    over 1 year ago

  6. Daniel Duke Daniel Duke

    Couldn't agree more that icon fonts are becoming very important in web design. Well said. Also love those staches. :)

    likes

    over 1 year ago

  7. Andrés Botero Andrés Botero

    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.

    likes

    over 1 year ago

  8. Norm Norm

    Looks great!

    likes

    over 1 year ago

  9. Jee Jee

    love it!

    likes

    over 1 year ago

  10. Sophie Clark Sophie Clark

    sexy site, sexy header, sexy icons, sexy designer. YES!!

    likes

    over 1 year ago

  11. Aurélien Foutoyet Aurélien Foutoyet

    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 ?

    likes

    over 1 year ago

  12. Iconfinder Iconfinder

    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.

    likes

    over 1 year ago

  13. thinkcear thinkcear

    Love your job!

    likes

    over 1 year ago

  14. Salto Salto

    Cool, man!

    likes

    over 1 year ago

  15. albert barroso albert barroso

    as always, good work @Jeremy Sallée ✦✦✦ ! Hope all is well in the bay. Keep up the good work man!

    likes

    over 1 year ago

  16. Dmitry Tsozik Dmitry Tsozik

    Looking forward for the tut!

    likes

    over 1 year ago

  17. Bilal Bilal

    Mustaches Icon font :D !!!! can't wait

    likes

    over 1 year ago

  18. Nick Quebbeman Nick Quebbeman

    @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

    likes

    over 1 year ago

  19. Cage Cage

    Nice.

    likes

    over 1 year ago

  20. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @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...

    likes

    over 1 year ago

  21. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

    @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.

    over 1 year ago

  22. Andrés Botero Andrés Botero

    @Jeremy Sallée ✦✦✦ Thanks for the insight on your process, I guess this is what I have to learn next, creating icon fonts.

    likes

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like