SlideShare a Scribd company logo
WELCOME TO

                        TYPOGRAPHERS
                            ANONYMOUS




Saturday, April 6, 13
THE 12 STEP PROGRAM
                            FOR ICON WEBFONT DESIGNERS




Saturday, April 6, 13
Hello, my name is

                        TOBIAS
                        & I am a web-fontoholic

                             @tobystereo


Saturday, April 6, 13
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
                                use with JS-fallback

Saturday, April 6, 13
ASCII Art 2.0




Saturday, April 6, 13
Saturday, April 6, 13
Saturday, April 6, 13
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 shape

Saturday, April 6, 13
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-generator

Saturday, April 6, 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 use


Saturday, April 6, 13
Thanks.
                        follow me @tobystereo




Saturday, April 6, 13

More Related Content

Similar to Webfonts_BarCampHBG

Build Your Mobile App Quality and Test Strategy
Build Your Mobile App Quality and Test StrategyBuild Your Mobile App Quality and Test Strategy
Build Your Mobile App Quality and Test Strategy
TechWell
 
Edted 2010 Dicas de Web
Edted 2010 Dicas de WebEdted 2010 Dicas de Web
Edted 2010 Dicas de Web
Fabio Akita
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
Stephen Hay
 
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Christian Heilmann
 
Fel presentation
Fel presentationFel presentation
Fel presentation
ianfeather
 
Designing with Web Fonts: Type, Responsively
Designing with Web Fonts: Type, ResponsivelyDesigning with Web Fonts: Type, Responsively
Designing with Web Fonts: Type, Responsively
Jason Pamental
 
Exploring Our Front-End Workflows
Exploring Our Front-End WorkflowsExploring Our Front-End Workflows
Exploring Our Front-End Workflows
nolly00
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
Building Axure Icon Widget Libraries Using Web Fonts
Building Axure Icon Widget Libraries Using Web FontsBuilding Axure Icon Widget Libraries Using Web Fonts
Building Axure Icon Widget Libraries Using Web Fonts
Svetlin Denkov
 
Top 6 iOS Libraries Every iOS Developer Should Use In The Project.pptx
Top 6 iOS Libraries Every iOS Developer Should Use In The Project.pptxTop 6 iOS Libraries Every iOS Developer Should Use In The Project.pptx
Top 6 iOS Libraries Every iOS Developer Should Use In The Project.pptx
OliviaManek
 
Making ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCoreMaking ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCore
Christian Heilmann
 
MW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your ImagesMW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your Images
Cogapp
 
Web or SDK Development
Web or SDK DevelopmentWeb or SDK Development
Web or SDK Development
John Wilker
 
Java to scala
Java to scalaJava to scala
Java to scala
Skills Matter
 
Practical Semantic Web and Why You Should Care - DrupalCon DC 2009
Practical Semantic Web and Why You Should Care - DrupalCon DC 2009Practical Semantic Web and Why You Should Care - DrupalCon DC 2009
Practical Semantic Web and Why You Should Care - DrupalCon DC 2009
Boris Mann
 

Similar to Webfonts_BarCampHBG (16)

Build Your Mobile App Quality and Test Strategy
Build Your Mobile App Quality and Test StrategyBuild Your Mobile App Quality and Test Strategy
Build Your Mobile App Quality and Test Strategy
 
Edted 2010 Dicas de Web
Edted 2010 Dicas de WebEdted 2010 Dicas de Web
Edted 2010 Dicas de Web
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
 
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
 
Fel presentation
Fel presentationFel presentation
Fel presentation
 
Designing with Web Fonts: Type, Responsively
Designing with Web Fonts: Type, ResponsivelyDesigning with Web Fonts: Type, Responsively
Designing with Web Fonts: Type, Responsively
 
Exploring Our Front-End Workflows
Exploring Our Front-End WorkflowsExploring Our Front-End Workflows
Exploring Our Front-End Workflows
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Building Axure Icon Widget Libraries Using Web Fonts
Building Axure Icon Widget Libraries Using Web FontsBuilding Axure Icon Widget Libraries Using Web Fonts
Building Axure Icon Widget Libraries Using Web Fonts
 
Top 6 iOS Libraries Every iOS Developer Should Use In The Project.pptx
Top 6 iOS Libraries Every iOS Developer Should Use In The Project.pptxTop 6 iOS Libraries Every iOS Developer Should Use In The Project.pptx
Top 6 iOS Libraries Every iOS Developer Should Use In The Project.pptx
 
Making ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCoreMaking ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCore
 
MW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your ImagesMW16 IIIF: Unshackle Your Images
MW16 IIIF: Unshackle Your Images
 
Web or SDK Development
Web or SDK DevelopmentWeb or SDK Development
Web or SDK Development
 
Java to scala
Java to scalaJava to scala
Java to scala
 
Practical Semantic Web and Why You Should Care - DrupalCon DC 2009
Practical Semantic Web and Why You Should Care - DrupalCon DC 2009Practical Semantic Web and Why You Should Care - DrupalCon DC 2009
Practical Semantic Web and Why You Should Care - DrupalCon DC 2009
 

Recently uploaded

一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
10h6bbc4
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
tobbk6s8
 
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
bljeremy734
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 

Recently uploaded (20)

一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
一比一原版澳洲莫纳什大学毕业证(Monash学位证)如何办理
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
 
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
欧洲杯足彩-欧洲杯足彩比赛投注-欧洲杯足彩比赛投注官网|【​网址​🎉ac10.net🎉​】
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 

Webfonts_BarCampHBG

  • 1. WELCOME TO TYPOGRAPHERS ANONYMOUS Saturday, April 6, 13
  • 2. THE 12 STEP PROGRAM FOR ICON WEBFONT DESIGNERS Saturday, April 6, 13
  • 3. Hello, my name is TOBIAS & I am a web-fontoholic @tobystereo Saturday, April 6, 13
  • 7. A Ligature of it’s own “RSS” good for accessibility & SEO use with JS-fallback 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 shape Saturday, 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-generator Saturday, 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 use Saturday, April 6, 13
  • 14. Thanks. follow me @tobystereo Saturday, April 6, 13