Type on the Web (with WordPress)
-
Upload
tadpole-collective -
Category
Technology
-
view
102 -
download
0
description
Transcript of Type on the Web (with WordPress)
![Page 1: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/1.jpg)
TYPE on the web
andy christian@andrew_cpht
andywashere.comtadpole.cc
slides @ andywashere.com/wcchi
![Page 2: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/2.jpg)
I have a question!
![Page 3: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/3.jpg)
![Page 4: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/4.jpg)
![Page 5: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/5.jpg)
![Page 6: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/6.jpg)
"Typography is what language looks like."
- Ellen Lupton
![Page 7: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/7.jpg)
![Page 8: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/8.jpg)
Ya
![Page 9: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/9.jpg)
![Page 10: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/10.jpg)
K
![Page 11: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/11.jpg)
GooGLe!
![Page 12: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/12.jpg)
![Page 13: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/13.jpg)
Lucida Console
Tahoma
Times New RomanTrebuchet MS
Verdana ( Webdings )
ArialArial BlackComic SansCourier New
GeorgiaImpact
![Page 14: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/14.jpg)
![Page 15: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/15.jpg)
use imagesinstead
dynamic imagereplacement
javascript-basedfont replacement
![Page 16: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/16.jpg)
@font - face
![Page 17: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/17.jpg)
![Page 18: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/18.jpg)
![Page 19: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/19.jpg)
![Page 20: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/20.jpg)
![Page 21: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/21.jpg)
![Page 22: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/22.jpg)
![Page 23: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/23.jpg)
![Page 24: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/24.jpg)
![Page 25: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/25.jpg)
Futura
![Page 26: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/26.jpg)
12 Point (pt)1pt = 1/72 in.
16 Pixels (px)
1 EmRatio to base/parent size
100%
![Page 27: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/27.jpg)
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
![Page 28: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/28.jpg)
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
Wolf put a bird on it cred church-key photo booth, pork belly vinyl Terry Richardson accusamus pitchfork artisan consectetur veniam swag skateboard.
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
![Page 29: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/29.jpg)
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.
![Page 30: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/30.jpg)
![Page 31: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/31.jpg)
![Page 32: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/32.jpg)
Love
![Page 33: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/33.jpg)
![Page 34: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/34.jpg)
totally serious
![Page 35: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/35.jpg)
Serif Sans Serif
Slab Serif
Script/HandwritingBlackletter
Monospace
and much more...
![Page 36: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/36.jpg)
Sans Serif & Serif
HelveticaThis 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.
![Page 37: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/37.jpg)
CallunaThis 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
![Page 38: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/38.jpg)
Museo SlabThis 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
![Page 39: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/39.jpg)
DE L I C I OU S ROMANThis 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
![Page 40: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/40.jpg)
Times New RomanThis 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
![Page 41: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/41.jpg)
slides @ andywashere.com/wcchi
![Page 42: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/42.jpg)
EOT - Embedded Open Type
TTF - TrueType Font
OTF - OpenType Font
WOFF - Web Open Font Format
SVG - Scalable Vector Graphics
![Page 43: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/43.jpg)
>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
![Page 44: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/44.jpg)
![Page 45: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/45.jpg)
![Page 46: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/46.jpg)
![Page 47: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/47.jpg)
@font-face { font-family: 'Web Font'; src: url('webfont.ttf');}
h1 { font-family: ‘Web Font’;}
slides @ andywashere.com/wcchi
![Page 48: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/48.jpg)
@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
![Page 49: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/49.jpg)
ResourcesFree Fonts
google.com/webfonts/fontsquirrel.comfontspace.com
Free/Paid Fontsmyfonts.com
Subscription Fonts Servicestypekit.comfontdeck.comwebink.comwebtype.comkernest.com
Pay Per Font Servicesfonts.comtypotheque.comfontspring.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
![Page 50: Type on the Web (with WordPress)](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c784094a7959a04b8b459e/html5/thumbnails/50.jpg)
andywashere.com@andrew_cpht
tandy christian
slides available at
andywashere.com/wcchi
tadpole.cc