0
TYPEon the
web
andy christian
@andrew_cpht
andywashere.com
tadpole.cc
slides @ andywashere.com/wcchi
I have a
question!
"Typography is what
language looks like."
- Ellen Lupton
Ya
K
Go oGLe!
Lucida Console
Tahoma
Times New Roman
Trebuchet MS
Verdana

(Webdings)
Arial
Arial Black
Comic Sans
Courier New
Ge...
use images
instead
dynamic image
replacement
javascript-based
font replacement
@font-face
Futura
12 Point (pt)
1pt = 1/72 in.
16 Pixels (px)
1 Em
Ratio to base/parent size
100%
Squid Pinterest Williamsburg, laborum
cupidatat +1 iPhone polaroid direct trade
nisi cardigan tattooed placeat. Butcher fa...
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 ...
Measure
Proident swag viral, beard artisan ullamco enim plaid
placeat freegan culpa qui scenester cornhole. Beard
ennui ne...
Love
totally
serious
Serif Sans Serif
Slab Serif
Script/HandwritingBlackletter
Monospace
and much more...
Sans Serif & Serif
Helvetica
This is Garamond. Freegan veniam laborum, magna
do quis locavore Godard actually Pinterest. F...
Calluna
This is Delicious. Both typefaces are by Exljbris.
Freegan veniam laborum, magna do quis locavore
Godard actually ...
Museo Slab
This is Museo Sans. Freegan veniam laborum, magna
do quis locavore Godard actually Pinterest. Fixie est
chillwa...
DELICIOUS ROMAN
This is also Delicious Roman. The heading is all
caps and bold with extra letter-spacing. Freegan
veniam l...
Times New Roman
This is Garamond. These typefaces are too similar to
use together. Freegan veniam laborum, magna do quis
l...
slides @ andywashere.com/wcchi
EOT - Embedded Open Type
TTF - TrueType Font
OTF - OpenType Font
WOFF - Web Open Font Format
SVG - Scalable Vector Graphics
>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
@font-face {
font-family: 'Web Font';
src: url('webfont.ttf');
}
h1 {
font-family: ‘Web Font’;
}
slides @ andywashere.com/...
@font-face {
font-family: 'Web Font';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),...
Resources
Free Fonts
google.com/webfonts/
fontsquirrel.com
fontspace.com
Free/Paid Fonts
myfonts.com
Subscription Fonts Se...
andywashere.com@andrew_cpht
t
andy christian
slides available at
andywashere.com/wcchi
tadpole.cc
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Type on the Web (with WordPress)
Upcoming SlideShare
Loading in...5
×

Type on the Web (with WordPress)

4,185

Published on

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.

Published in: Technology, Art & Photos
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,185
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Type on the Web (with WordPress)"

  1. 1. TYPEon the web andy christian @andrew_cpht andywashere.com tadpole.cc slides @ andywashere.com/wcchi
  2. 2. I have a question!
  3. 3. "Typography is what language looks like." - Ellen Lupton
  4. 4. Ya
  5. 5. K
  6. 6. Go oGLe!
  7. 7. Lucida Console Tahoma Times New Roman Trebuchet MS Verdana  (Webdings) Arial Arial Black Comic Sans Courier New Georgia Impact
  8. 8. use images instead dynamic image replacement javascript-based font replacement
  9. 9. @font-face
  10. 10. Futura
  11. 11. 12 Point (pt) 1pt = 1/72 in. 16 Pixels (px) 1 Em Ratio to base/parent size 100%
  12. 12. 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
  13. 13. 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
  14. 14. 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.
  15. 15. Love
  16. 16. totally serious
  17. 17. Serif Sans Serif Slab Serif Script/HandwritingBlackletter Monospace and much more...
  18. 18. 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.
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. slides @ andywashere.com/wcchi
  24. 24. EOT - Embedded Open Type TTF - TrueType Font OTF - OpenType Font WOFF - Web Open Font Format SVG - Scalable Vector Graphics
  25. 25. >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
  26. 26. @font-face { font-family: 'Web Font'; src: url('webfont.ttf'); } h1 { font-family: ‘Web Font’; } slides @ andywashere.com/wcchi
  27. 27. @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
  28. 28. 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
  29. 29. andywashere.com@andrew_cpht t andy christian slides available at andywashere.com/wcchi tadpole.cc
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×