SlideShare a Scribd company logo

Type on the Web (with WordPress)

Until fairly recently, a sixth-grader doing a book report had more typographic choice than CNN had for their (very expensive) website. With the advent of the CSS @font-face, web designers have more choice than ever before. This presentation covers the basics of typographic theory for the web, as well as how to embed web fonts in your WordPress site.

1 of 50
Download to read offline
TYPEon the
web
andy christian
@andrew_cpht
andywashere.com
tadpole.cc
slides @ andywashere.com/wcchi
I have a
question!
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
"Typography is what
language looks like."
- Ellen Lupton

Recommended

Green lantern.pt.5
Green lantern.pt.5Green lantern.pt.5
Green lantern.pt.5Aalifa
 
Angry birds eğitimi (son hali)
Angry birds eğitimi (son hali)Angry birds eğitimi (son hali)
Angry birds eğitimi (son hali)İbrahim Sigirci
 
Angry birds son_hali_
Angry birds son_hali_Angry birds son_hali_
Angry birds son_hali_kck31
 
Angry birds eğitimi
Angry birds eğitimiAngry birds eğitimi
Angry birds eğitimiSevgi Türedi
 
Daily Update Free Porn Passwords 100% Working
Daily Update Free Porn Passwords 100% WorkingDaily Update Free Porn Passwords 100% Working
Daily Update Free Porn Passwords 100% WorkingRishika Roy
 

More Related Content

What's hot

Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...
Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...
Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...Rishika Roy
 
Wildest Dreams- Taylor Swift Guitar Chords by Zager Reviews
Wildest Dreams- Taylor Swift Guitar Chords by Zager ReviewsWildest Dreams- Taylor Swift Guitar Chords by Zager Reviews
Wildest Dreams- Taylor Swift Guitar Chords by Zager ReviewsZager Guitar | Zager Reviews
 
Jamie Tancowny, James Hardy, and Guest Editorial
Jamie Tancowny, James Hardy, and Guest EditorialJamie Tancowny, James Hardy, and Guest Editorial
Jamie Tancowny, James Hardy, and Guest EditorialGreg Robinson
 
My favorite music_of_all_time
My favorite music_of_all_timeMy favorite music_of_all_time
My favorite music_of_all_timeBrittany Briganti
 

What's hot (6)

Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...
Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...
Daily Free Porn Passwords, Free Porn Accounts, Free Premium Porn, Xxx Passwor...
 
Pitch
PitchPitch
Pitch
 
Wildest Dreams- Taylor Swift Guitar Chords by Zager Reviews
Wildest Dreams- Taylor Swift Guitar Chords by Zager ReviewsWildest Dreams- Taylor Swift Guitar Chords by Zager Reviews
Wildest Dreams- Taylor Swift Guitar Chords by Zager Reviews
 
Tabel
Tabel Tabel
Tabel
 
Jamie Tancowny, James Hardy, and Guest Editorial
Jamie Tancowny, James Hardy, and Guest EditorialJamie Tancowny, James Hardy, and Guest Editorial
Jamie Tancowny, James Hardy, and Guest Editorial
 
My favorite music_of_all_time
My favorite music_of_all_timeMy favorite music_of_all_time
My favorite music_of_all_time
 

Viewers also liked

Web Typography Fundamentals: From Gutenberg to Google v1
Web Typography Fundamentals: From Gutenberg to Google  v1Web Typography Fundamentals: From Gutenberg to Google  v1
Web Typography Fundamentals: From Gutenberg to Google v1billcenglish
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typographyMigle Migle
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography[x]cube LABS
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: DemystifiedMel Choyce
 
Web Typography: A (Brief) Review
Web Typography: A (Brief) ReviewWeb Typography: A (Brief) Review
Web Typography: A (Brief) ReviewDan Rubin
 
Beautiful Layouts Through Beautiful Type
Beautiful Layouts Through Beautiful TypeBeautiful Layouts Through Beautiful Type
Beautiful Layouts Through Beautiful Typejeff_croft
 
Modernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo GiannascaModernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo GiannascaFrostSydney
 
Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1Jennifer Janviere
 

Viewers also liked (10)

Web Typography Fundamentals: From Gutenberg to Google v1
Web Typography Fundamentals: From Gutenberg to Google  v1Web Typography Fundamentals: From Gutenberg to Google  v1
Web Typography Fundamentals: From Gutenberg to Google v1
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typography
 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: Demystified
 
Web Typography: A (Brief) Review
Web Typography: A (Brief) ReviewWeb Typography: A (Brief) Review
Web Typography: A (Brief) Review
 
Beautiful Layouts Through Beautiful Type
Beautiful Layouts Through Beautiful TypeBeautiful Layouts Through Beautiful Type
Beautiful Layouts Through Beautiful Type
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
Modernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo GiannascaModernist Typography and the Swiss grid - Carlo Giannasca
Modernist Typography and the Swiss grid - Carlo Giannasca
 
Typography Essentials: Part 1
Typography Essentials: Part 1Typography Essentials: Part 1
Typography Essentials: Part 1
 

More from Tadpole Collective

Troubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-ProblemsTroubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-ProblemsTadpole Collective
 
An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014Tadpole Collective
 
WordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 ConferenceWordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 ConferenceTadpole Collective
 
Getting on the web with WordPress
Getting on the web with WordPressGetting on the web with WordPress
Getting on the web with WordPressTadpole Collective
 
CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!Tadpole Collective
 
WordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMWordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMTadpole Collective
 

More from Tadpole Collective (8)

Troubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-ProblemsTroubleshooting Common WordPress-Problems
Troubleshooting Common WordPress-Problems
 
An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014An Intro: WordPress with CiviCRM at Civicon 2014
An Intro: WordPress with CiviCRM at Civicon 2014
 
WordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 ConferenceWordPress Workshop with Tadpole, SATW 2013 Conference
WordPress Workshop with Tadpole, SATW 2013 Conference
 
Getting on the web with WordPress
Getting on the web with WordPressGetting on the web with WordPress
Getting on the web with WordPress
 
CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!CiviCRM with WordPress: A Dynamic Duo!
CiviCRM with WordPress: A Dynamic Duo!
 
Using Web Fonts in WordPress
Using Web Fonts in WordPress Using Web Fonts in WordPress
Using Web Fonts in WordPress
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
WordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRMWordPress for Nonprofits Using CiviCRM
WordPress for Nonprofits Using CiviCRM
 

Recently uploaded

Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Huntly presentation deck design for Behance
Huntly presentation deck design for BehanceHuntly presentation deck design for Behance
Huntly presentation deck design for Behancewhalesdesign
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationAppsthentic Technology
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfRodneyThomas28
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentThorsten Huelsmann
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 

Recently uploaded (20)

Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Huntly presentation deck design for Behance
Huntly presentation deck design for BehanceHuntly presentation deck design for Behance
Huntly presentation deck design for Behance
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and Optimization
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdf
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry development
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 

Type on the Web (with WordPress)

  • 6. "Typography is what language looks like." - Ellen Lupton
  • 8. Ya
  • 10. K
  • 13. Lucida Console Tahoma Times New Roman Trebuchet MS Verdana  (Webdings) Arial Arial Black Comic Sans Courier New Georgia Impact
  • 26. 12 Point (pt) 1pt = 1/72 in. 16 Pixels (px) 1 Em Ratio to base/parent size 100%
  • 27. Squid Pinterest Williamsburg, laborum cupidatat +1 iPhone polaroid direct trade nisi cardigan tattooed placeat. Butcher fanny Squid Pinterest Williamsburg, laborum cupidatat +1 iPhone polaroid direct trade nisi cardigan tattooed placeat. Butcher fanny Squid Pinterest Williamsburg, laborum cupidatat +1 iPhone polaroid direct trade nisi cardigan tattooed placeat. Butcher fanny CSS Property: line-height Leading
  • 28. W o l f p u t a b i r d o n i t c r e d c h u r c h - k e y p h o t o b o o t h , p o r k b e l l y v i n y l T e r r y R i c h a r d s o n a c c u s a m u s p i t c h f o r k . Tracking/Kerning Wolfputabirdonitcredchurch-keyphotobooth,porkbelly vinylTerryRichardsonaccusamuspitchforkartisanconsectetur veniamswagskateboard. Wolf put a bird on it cred church-key photo booth, pork belly vinyl Terry Richardson accusamus pitchfork artisan consectetur veniam swag skateboard. CSS Property: letter-spacing
  • 29. Measure Proident swag viral, beard artisan ullamco enim plaid placeat freegan culpa qui scenester cornhole. Beard ennui nesciunt consequat jean shorts trust fund. Messenger bag fingerstache ut, High Life shoreditch. Banh mi brunch. Echo Park next level mumblecore trust fund PBR. Carles master cleanse salvia Wes Anderson, minim farm. Proident swag viral, beard artisan ullamco enim plaid placeat freegan culpa qui scenester cornhole. Beard ennui nesciunt. Consequat jean shorts trust fund. Messenger bag fingerstache ut, High Life shoreditch. Banh mi brunch. Echo Park next level mumblecore trust fund PBR. Carles master cleanse salvia Wes Anderson, minim farm-to-table cray occupy tousled. Proident swag viral, beard artisan ullamco enim plaid. Placeat freegan culpa qui scenester.
  • 32. Love
  • 35. Serif Sans Serif Slab Serif Script/HandwritingBlackletter Monospace and much more...
  • 36. Sans Serif & Serif Helvetica This is Garamond. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church- key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx.
  • 37. Calluna This is Delicious. Both typefaces are by Exljbris. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx. Same Designer
  • 38. Museo Slab This is Museo Sans. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx. Same Family
  • 39. DELICIOUS ROMAN This is also Delicious Roman. The heading is all caps and bold with extra letter-spacing. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx, lorem ipsum dolor. Same Font
  • 40. Times New Roman This is Garamond. These typefaces are too similar to use together. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx, lorem ipsum dolor sit. Avoid too much similarity
  • 42. EOT - Embedded Open Type TTF - TrueType Font OTF - OpenType Font WOFF - Web Open Font Format SVG - Scalable Vector Graphics
  • 43. >9 EOT; 9+ EOT, WOFF, OTF WOFF, TTF, and SVG WOFF, OTF, and TTF Mobile Safari <4.2, only SVG WOFF, OTF, TTF, and SVG
  • 47. @font-face { font-family: 'Web Font'; src: url('webfont.ttf'); } h1 { font-family: ‘Web Font’; } slides @ andywashere.com/wcchi
  • 48. @font-face { font-family: 'Web Font'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-opentype'), url('webfont.woff') format('woff'), url('webfont.ttf') format('truetype'), url('webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } h1 { font-family: ‘Web Font’, Helvetica, Arial, sans-serif; font-size: 1.75em; letter-spacing: 0.2em; text-transform: uppercase; } p { font-family: ‘Web Font’, Helvetica, Arial, sans-serif; line-height: 1.5em; } slides @ andywashere.com/wcchi
  • 49. Resources Free Fonts google.com/webfonts/ fontsquirrel.com fontspace.com Free/Paid Fonts myfonts.com Subscription Fonts Services typekit.com fontdeck.com webink.com webtype.com kernest.com Pay Per Font Services fonts.com typotheque.com fontspring.com More Free Fonts http://www.creativebloq.com/graphic-design-tips/best- free-fonts-for-designers-1233380 http://www.designyourway.net/blog/resources/60- fresh-free-fonts-youd-consider-using-in-your-projects/ http://sixrevisions.com/resources/free-icon-fonts/ Blogs, Tutorials and other resources http://nicewebtype.com/ http://ilovetypography.com/ http://www.1stwebdesigner.com/css/css3-text-effects- typography/ http://www.fontsquirrel.com/tools/webfont-generator/ http://www.slideshare.net/jeff_croft/elegant-web- typography-presentation http://www.slideshare.net/klepas/beautiful-web- typography-5 slides @ andywashere.com/wcchi