Creating Beautiful Type (On the Web)

3,587 views

Published on

"Creating Beautiful Type (On the Web)". Delivered by Kyle Fiedler of ThoughtBot, on November 10th, 2010 at Lamont Library, Forum Room.

Published in: Design, Technology, Art & Photos
2 Comments
3 Likes
Statistics
Notes
  • Great presentation. Great that you included typeface you used cause I was going to ask!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The slides look awesome! Did you know we’re currently running a competition to win a 3M PocketProjector MP180? This fits perfectly in the ‘3MGenius’ category. To enter, simply tag your presentation with ‘3MGenius’ to be entered. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,587
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
34
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Creating Beautiful Type (On the Web)

  1. 1. Creating beautiful type (on the web)
  2. 2. Who here is a typographer?
  3. 3. Mind your P’s and Q’s
  4. 4. Use real quotes and hang ‘em too
  5. 5. “”Yes ‘’ ” “ ‘’ " "No ' '
  6. 6. The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. “ Well hung quotes blockquote {text-indent: -0.5em}
  7. 7. Use hyphens, em dashes & en dashes properly! - –—
  8. 8. Hyphen (-) • Justification • Prefix, Suffix (co, pre, mid, etc.) • Spelling (H-A-R-V-A-R-D) • Joining modifiers (two or more words that modify the meaning of another) • Compound names
  9. 9. em dash (—) • A pause in thought • Indicate a sentence is unfinished
  10. 10. en dash (—) • Ranges of values (30–40) • Relationships (mother–daughter) • Compound adjectives (adjective– adjective) • Used to emphasize connection
  11. 11. Please stop putting two spaces at the end of a sentence.
  12. 12. Use your ligatures text-rendering: optimizeLegibility;
  13. 13. Remove all widows jQwidont — widows b’gone
  14. 14. The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. Harvard University is made up of 11 principal academic units — ten faculties and the Radcliffe Institute for Advanced Study. The ten faculties oversee schools and divisions that offer courses and award academic degrees.
  15. 15. Use proper spacing
  16. 16. line-height The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. Yes No No
  17. 17. letter-spacing The name Harvard comes from the college’s first benefactor. The name Harvard comes from the college’s first benefactor. The name Harvard comes from the college’s first benefactor.Yes No No
  18. 18. Create rhythm
  19. 19. Baseline grid & font-size Traditional sizes: 10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 28px, 30px, 32px, 36px, 44px, 48px, 60px, 72px alistapart.com/articles/settingtypeontheweb/
  20. 20. Create hierarchy and emphasis
  21. 21. Hierarchy Vary size, color, weight, and space
  22. 22. Emphasis The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony. Yes No
  23. 23. The web font revolution
  24. 24. @font-face is supported in 95.6% of current desktop browsers.
  25. 25. More choice, style & character
  26. 26. This is not a free pass.
  27. 27. The web font revolution Font delivery
  28. 28. Use Font Squirrels @font-face generator
  29. 29. @font-face { font-family: 'PTSans'; src: url('/fonts/PTS55F-webfont.eot'); src: local('☺'), url('/fonts/PTS55F-webfont.woff') format('woff'), url('/fonts/PTS55F-webfont.ttf') format('truetype'), url('/fonts/ PTS55F-webfont.svg#webfontmBFaK3EM') format('svg'); font-weight: normal; font-style: normal; }
  30. 30. You still need a good font stack
  31. 31. Be mindful of file size & FoUT
  32. 32. Font rendering can be a pain
  33. 33. Font delivery as a service
  34. 34. The web font revolution Making the right choice
  35. 35. Web safe fonts are still the workhorses
  36. 36. Balance style and legibility
  37. 37. Making a great pair
  38. 38. Sans-serif + Serif
  39. 39. Avoid similar styles/ classifications
  40. 40. Match personalities
  41. 41. What to look for in a screen typeface
  42. 42. High x-height
  43. 43. Large counters
  44. 44. Read the about and see what other designers have done
  45. 45. Finding a typeface with the right license
  46. 46. Problems with free
  47. 47. Variety of quality
  48. 48. Unknown rendering
  49. 49. Poorly drawn
  50. 50. Poorly kerned
  51. 51. Test your type: Read, re-read, and have someone else read
  52. 52. The web font revolutionWell, it’s been fun
  53. 53. thoughtbot.com
  54. 54. atedrake.com
  55. 55. Inspiration: dribbble.com ffffound.com siteinspire.com, cssmaina.com & other css galleries Resources: ilovetypography.com typedia.com webfonts.info nicewebtype.com readableweb.com Elements of Typographic Style–Robert Bringhurst
  56. 56. Typeface used in presentation: Meta by Erik Spiekermann Websites used in presentation: wilsonminer.com blackestate.co.nz blakeallendesign.com sxswdesign.com oldguard.co.uk
  57. 57. Kyle Fiedler @kylefiedler kyle@kylefiedler.com kylefiedler.com

×