Type on the Web (with WordPress)
50
TYPE on the web andy christian @andrew_cpht andywashere.com tadpole.cc slides @ andywashere.com/wcchi
-
Upload
tadpole-collective -
Category
Technology
-
view
103 -
download
0
description
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.
Transcript of Type on the Web (with WordPress)
TYPE on the web
andy christian@andrew_cpht
andywashere.comtadpole.cc
slides @ andywashere.com/wcchi
I have a question!
"Typography is what language looks like."
- Ellen Lupton
Ya
K
GooGLe!
Lucida Console
Tahoma
Times New RomanTrebuchet MS
Verdana ( Webdings )
ArialArial BlackComic SansCourier New
GeorgiaImpact
use imagesinstead
dynamic imagereplacement
javascript-basedfont replacement
@font - face
Futura
12 Point (pt)1pt = 1/72 in.
16 Pixels (px)
1 EmRatio to base/parent size
100%
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
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
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.
Love
totally serious
Serif Sans Serif
Slab Serif
Script/HandwritingBlackletter
Monospace
and much more...
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.
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
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
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
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
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/wcchi
@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
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
andywashere.com@andrew_cpht
tandy christian
slides available at
andywashere.com/wcchi
tadpole.cc
