Typography & WordPress

  • 8,217 views
Uploaded on

A quick overview of typography concepts and dynamic font usage.

A quick overview of typography concepts and dynamic font usage.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Awesome tips not only for working with Wordpress, but with typography as a whole!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,217
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
234
Comments
1
Likes
24

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Typography &WordPress by C H E L S E A O T A K A N
  • 2. Legibility vsReadability
  • 3. Theof Words
  • 4. Theshapeof Words
  • 5. Legibility the ability to recognize andunderstand individual letters
  • 6. Readabilitythe ease of reading and understanding text
  • 7. Readability This is the normal amount of tracking for this font. Tracking uniformly adjusts the spacing Tracking between letters.The amount of universal space between letters This is an example of positive tracking. This is an example of negative tracking. CSS Property Kerning, unlike tracking, is the amount of letter-spacing space between specific letters designed by the type designer. Kerning attempts to distribute whitespace evenly between letters.
  • 8. Readability This is a nice spacey amount of leading. The lines still read as the same paragraph, but do Leading not interfere with the shapes of the words.The amount of space Leading is set at 1.5. That’s halfway betweenbetween lines of text single and double spaced. CSS Property This is a very small amount of leading. The leading is set at 1.0, equivalent to single line-height spaced. At this point the descenders and ascenders begin running into each other, compromising word shapes.
  • 9. Readability This is a very large amount of leading. The Leading leading is set at 3.5, equivalent to tripleThe amount of spacebetween lines of text spaced. At this point the lines begin to look as CSS Property line-height if they are separate paragraphs is more difficult to read as a continuous block of text.
  • 10. Readability Not only is it a wholly remarkable book, it is also a highly successful one - more popular than the Celestial Home Care Omnibus, better selling than Fifty More Things to do in Zero Orphans Gravity, and more controversial than Oolonwords by themselves at Colluphids trilogy of philosophical blockbusters the end of a paragraph Where God Went Wrong, Some More of Gods Greatest Mistakes and Who is this God Person Anyway? Douglas Adams The Hitchhiker’s Guide to the Galaxy
  • 11. Readability Not only is it a wholly remarkable book, it is also a highly successful one - more popular than the Celestial Home Care Omnibus, better selling than Fifty More Things to do in Zero Orphans Gravity, and more controversial than Oolonwords by themselves at Colluphids trilogy of philosophical blockbusters the end of a paragraph Where God Went Wrong, Some More of Gods Greatest Mistakes and Who is this God Person Anyway? Douglas Adams The Hitchhiker’s Guide to the Galaxy
  • 12. Typography exists to honor content. Robert Bringhurst The Elements of Typographic Style
  • 13. Stop!
  • 14. 1 Get content first!2 Read and interpret meaning and tone.3 Determine content hierarchy and form.
  • 15. 1 Get content first!2 Read and interpret meaning and tone.3 Determine content hierarchy and form.
  • 16. 1 Get content first!2 Read and interpret meaning and tone.3 Determine content hierarchy and form.
  • 17. Transitional Handwritten Choosing Slab Serif TypefacesGeometric Humanist Sans Serif
  • 18. Respect your content via comicsanscriminal.com
  • 19. DEFIBRILLATOR
  • 20. D E F I B R I L L ATO R
  • 21. Combining Typefaces Vitesse This is Vitesse Sans. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium acSame Family magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus. Ut scelerisque imperdiet neque ac consectetur. Vivamus hendrerit, quam faucibus porttitor accumsan, ligula metus vulputate mi.
  • 22. Combining Typefaces This is St Transmission This is St Ryde. Both these fonts were designed by Sascha Timplan. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis Same vehicula mi, ac vestibulum ipsum viverra et. DonecDesigner libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
  • 23. Combining Typefaces This is Otari. This is PMN Caecelia. Both these typefaces are considered to be Humanist typefaces. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra Same convallis. Nam venenatis vehicula mi, ac vestibulumClassification ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
  • 24. Combining Typefaces THIS IS ARCHER SEMIBOLD This is Archer Book. The Archer typeface has several variations: book, light, thin, hairline, bold, semibold, medium, and italic styles. In eu leo neque, ut porta ipsum. Same Integer congue nibh sed eros viverra convallis. NamTypeface venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie.
  • 25. Combining Typefaces This is Times New Roman This is Century Schoolbook. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulumToo similar ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
  • 26. Dynamic Type on the Web
  • 27. Embedding Fonts Bulletproof Syntax @font-face @font-face {Uses CSS to load font font-family: StRyde;files for display in the src: url(fonts/stryde-webfont.eot); end-user’s browser src: local(?), url(fonts/stryde-webfont.woff) format(woff), url(fonts/stryde-webfont.ttf) format Compatibility (truetype), url(fonts/stryde- webfont.svg#webfontFGe3Ckun) format(svg);IE4+ Firefox 3.5+ Safari 3.1+ font-weight: normal; Opera 10+ Chrome 4.0+ font-style: normal; }
  • 28. Embedding Fonts @font-faceUses CSS to load font FontSquirrel @font-face generatorfiles for display in the fontsquirrel.com/fontface/generator end-user’s browser Compatibility FontSquirrel @font-face KitsIE4+ Firefox 3.5+ Safari 3.1+ fontsquirrel.com/fontface Opera 10+ Chrome 4.0+
  • 29. Embedding Fonts Hosted Google Font Directory Services code.google.com/webfontsUses CSS or JavaScriptto load font files hosted TypeKit by a service typekit.com Compatibility IE6+ Firefox 3.5+ Safari 3.1+ Fonts.com Opera 10+ Chrome 4.0+ fonts.com
  • 30. Embedding Fonts cufónUses JavaScript to replace text with canvas or vml rendering of a font github.com/sorccu/cufon/wiki/about Compatibility IE6+ Firefox 1.5+ Safari 3+ Opera 9.5+ Chrome 1.0+
  • 31. FOUT flash of Google WebFont Loaderunstyled text google.com/apis/webfonts/docs/webfont_loader.html when the browsershows the web-safe fontfor a split second before Adds javascript events and CSS classes for loading the external different stages in the loading process. font file
  • 32. Font Hinting
  • 33. Font HintingOld WindowsWindows 98 ClearType DirectWrite More on font hinting damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x
  • 34. Bring on Retina Displays!Displays that have more pixels per inch than the human eye can perceive will make font-hinting obselete
  • 35. Useful WP Stuff
  • 36. wp_enqueue_script<?phpwp_register_script(‘cufon’, bloginfo(‘template_directory’) .‘/scripts/cufon.js’);wp_enqueue_script(‘cufon’);wp_enqueue_script(‘jquery’);?> via codex.wordpress.org/Function_Reference/wp_enqueue_script
  • 37. wp_enqueue_style<?phpwp_register_style(‘mycss’, bloginfo(‘template_directory’) .‘/styles/mycss.css’);wp_enqueue_style(‘mycss’);?> via codex.wordpress.org/Function_Reference/wp_enqueue_script
  • 38. wp-typography wordpress.org/extend/plugins/wp-typography protects against orphansadds CSS classes to &,uppercase words, numbers, forces wrapping of long,and quotations unbroken lines of textsmart replacement for marks, supports over 40 languagesquotes, dashes, elipses,fractions, ordinal suffixes,mathetmatical symbols etc.
  • 39. WP Google Fontswordpress.org/extend/plugins/wp-google-fonts
  • 40. TypeKit Fonts for WordPresswordpress.org/extend/plugins/typekit-fonts-for-wordpress
  • 41. @chexee chelsea@livelylabs.comDON’TPANIC