Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WELCOME TO                        TYPOGRAPHERS                            ANONYMOUSSaturday, April 6, 13
THE 12 STEP PROGRAM                            FOR ICON WEBFONT DESIGNERSSaturday, April 6, 13
Hello, my name is                        TOBIAS                        & I am a web-fontoholic                            ...
Why webfonts?Saturday, April 6, 13
That’s it?Saturday, April 6, 13
NO!Saturday, April 6, 13
A Ligature of it’s own                                          “RSS”                         good for accessibility & SEO...
ASCII Art 2.0Saturday, April 6, 13
Saturday, April 6, 13
Saturday, April 6, 13
The 12 Steps                        1. Create your icons                        2. Open Font Template in Inkscape         ...
7. select “Edit paths by nodes” tool                        8. select the shape(s) to add to the character                ...
The new 4 Steps                        1. Create icons                        2. import icons to http://icomoon.io/app (tw...
Thanks.                        follow me @tobystereoSaturday, April 6, 13
Upcoming SlideShare
Loading in …5
×

Webfonts_BarCampHBG

1,878 views

Published on

Published in: Design
  • Slide 3:
    CSS control — Easily style icon color, size, shadow & anything possible with CSS.
Infinite scalability — vector graphics means every icon looks awesome at any size.
Perfect on Retina Displays — no need for 2x graphics and retina detection attempts
Cross-browser support — widely supported (unless you use Opera mobile or Android 2.1), even in older browsers and significantly better than SVG support (Android 2.x)
    source: http://caniuse.com/fontface

    Best practice:
    Use the unassigned UTF characters for your icons, don't use regular letters in a font for an icon.


    Slide 5:
    Use ligature 'Keywords' for increased accessibility and SEO value.
    Ligature browser support is almost as good as general webfont support:

    Keywords (with optional Javascript support):
    Firefox 3.5+, Safari 2+, Chrome 1+, IE 7+, Opera 10.5+

    Keywords (without Javascript):
    Firefox 3.5+, Safari 5+, Chrome 11+, IE 10+
    (source: http://blog.symbolset.com/browser-support/)

    Solution: Create the same icon twice and assign it to a UTF character once and also to a Keyword ligature ('RSS' for an RSS icon).

    An example of Keyword Ligatures:
    http://www.symbolset.com/

    Slide 6:
    You can take it a step further by using web fonts to create custom graphics, a little like ASCII art back in the day.
    Create Maps, Graphs, Charts, you name it.

    Interesting Icon Font Projects:
    Super Simple Charts by FF Chartwell
    https://www.fontfont.com/how-to-use-ff-chartwell#chartwell-web

    Fonts as maps
    States of Germany: http://germafont.tobystereo.com/
    States of the USA: http://intridea.github.io/stately/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Webfonts_BarCampHBG

  1. 1. WELCOME TO TYPOGRAPHERS ANONYMOUSSaturday, April 6, 13
  2. 2. THE 12 STEP PROGRAM FOR ICON WEBFONT DESIGNERSSaturday, April 6, 13
  3. 3. Hello, my name is TOBIAS & I am a web-fontoholic @tobystereoSaturday, April 6, 13
  4. 4. Why webfonts?Saturday, April 6, 13
  5. 5. That’s it?Saturday, April 6, 13
  6. 6. NO!Saturday, April 6, 13
  7. 7. A Ligature of it’s own “RSS” good for accessibility & SEO use with JS-fallbackSaturday, April 6, 13
  8. 8. ASCII Art 2.0Saturday, April 6, 13
  9. 9. Saturday, April 6, 13
  10. 10. Saturday, April 6, 13
  11. 11. The 12 Steps 1. Create your icons 2. Open Font Template in Inkscape 3. Select Text>SVG Font Editor and set font & font family names 4. In Font Editor, select Glyphs > add Glyph 5. set name “Shape 1” and matching string “a” 6. Create or import shapeSaturday, April 6, 13
  12. 12. 7. select “Edit paths by nodes” tool 8. select the shape(s) to add to the character 9. Path > Union & Path > Object to Path 10.SVG Font Editor > Glyphs > select the newly created glyph and click “Get curves from selection” 11.convert .svg file to .ttf at http://www.freefontconverter.com/ 12.convert to a webfont at http://www.fontsquirrel.com/tools/ webfont-generatorSaturday, April 6, 13
  13. 13. The new 4 Steps 1. Create icons 2. import icons to http://icomoon.io/app (twice) 3. enable ligatures and assign ligature keyword to icon and unassigned UTF character for JS fallback 4. Export and useSaturday, April 6, 13
  14. 14. Thanks. follow me @tobystereoSaturday, April 6, 13

×