• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Type on the Web (with WordPress)
 

Type on the Web (with WordPress)

on

  • 3,054 views

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 ...

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.

Statistics

Views

Total Views
3,054
Views on SlideShare
868
Embed Views
2,186

Actions

Likes
2
Downloads
6
Comments
1

11 Embeds 2,186

http://andywashere.com 1688
http://www.designmantic.com 397
http://tadpole.cc 45
http://storify.com 38
http://digg.com 5
http://plus.url.google.com 5
http://feedly.com 3
http://localhost 2
http://2013.chicago.wordcamp.org 1
https://translate.googleusercontent.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Type on the Web (with WordPress) Type on the Web (with WordPress) Presentation Transcript

    • 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 Georgia Impact
    • 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 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 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
    • 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 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.
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • andywashere.com@andrew_cpht t andy christian slides available at andywashere.com/wcchi tadpole.cc