Your SlideShare is downloading. ×
0
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Webfonts_BarCampHBG
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webfonts_BarCampHBG

1,049

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,049
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WELCOME TO TYPOGRAPHERS ANONYMOUSSaturday, April 6, 13
  • 2. THE 12 STEP PROGRAM FOR ICON WEBFONT DESIGNERSSaturday, April 6, 13
  • 3. Hello, my name is TOBIAS & I am a web-fontoholic @tobystereoSaturday, April 6, 13
  • 4. Why webfonts?Saturday, April 6, 13
  • 5. That’s it?Saturday, April 6, 13
  • 6. NO!Saturday, April 6, 13
  • 7. A Ligature of it’s own “RSS” good for accessibility & SEO use with JS-fallbackSaturday, April 6, 13
  • 8. ASCII Art 2.0Saturday, April 6, 13
  • 9. Saturday, April 6, 13
  • 10. Saturday, April 6, 13
  • 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. 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. 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. Thanks. follow me @tobystereoSaturday, April 6, 13

×