Webfonts_BarCampHBG

1,698 views

Published on

Published in: Design
1 Comment
0 Likes
Statistics
Notes
  • 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

No Downloads
Views
Total views
1,698
On SlideShare
0
From Embeds
0
Number of Embeds
1,155
Actions
Shares
0
Downloads
2
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

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

×