A Crash Course in Typography — WordCamp Baroda 2014

67975d5fca1c85d9222b57258d938d88?s=47 King Sidharth
January 26, 2014

A Crash Course in Typography — WordCamp Baroda 2014

Improved slides from my talk at WordCamp Baroda, 2014 — are about basics of typography, trends, best / recommended practices and related WordPress tools.

67975d5fca1c85d9222b57258d938d88?s=128

King Sidharth

January 26, 2014
Tweet

Transcript

  1. g A Crash Course ! Typography by @kingsidharth for WordCamp

    Baroda 2014 #WCBaroda | 26th January, 2014 in fi &
  2. More than 90%* of the communication on the web is

    text. So making that text work is important. Very important. Seriously! * You might’ve other numbers; but you know what I mean.
  3. A History of Typography from Print & Graphic Design +

    font vs. typeface
  4. Fonts have feelings too! Do you love me? Tell me

    you love me!
  5. None
  6. None
  7. None
  8. None
  9. Shut up!

  10. Shut up!

  11. Shut up!

  12. Classification ! Choosing a Typeface &

  13. Classy, Authority, Timeless, and Old.

  14. Sans-Serif New, Young, Fresh, Clean, and Modern

  15. Geometric Humanist Display Slab Serif Fixed Width

  16. ! Basic Typesetting

  17. Size Does Matter font-size: 16px; Keep it 14px to 18px

    for general content website
  18. None
  19. None
  20. Alignment text-align: left; .alignleft .alignright .aligncenter

  21. None
  22. Repeat After Me: “I will not justify align the text!”

  23. Words Per Line width & font-size Keep it 70-80 words

    per line. Google: Golden Ratio Typography
  24. None
  25. None
  26. L e t t e r S p a c

    i n g letter-spacing: 1px; Play around. For highlights, headlines.
  27. None
  28. None
  29. None
  30. None
  31. Line Height line-height: 1.6em; Keep it between 1.5em to 1.6em

    Google: Golden Ratio Typography
  32. None
  33. None
  34. None
  35. None
  36. None
  37. Web Specific Tech

  38. @font-face Open Sans, Ubuntu, Roboto, etc. Use them wisely.

  39. WordPress now uses Open Sans for the backend.

  40. Responsive Typography

  41. None
  42. WordPress Specific Tools for styling & typography

  43. .format-text .entry-title .entry-content Control styling of the of post/page headline(s)

    Control the styling of the main body of post/page Control the styling of a text post. (Multiple post type exist in WP) Most good themes use these classes.
  44. Body Classes to Control Typography of Post/Page Types <body class=“

    <?php if(is_single()) { echo ‘single’; } ?> ”> Most good themes have this in place.
  45. .single .entry-title { // Style Rules for Headline } !

    .single .entry-content p { // Paragraph Rules for Main Content of Your Post }
  46. is_single() //single post/page is_page() //single page is_post() //single post is_front_page()

    //front page. duh! is_archive() //month, year, tax, category is_category() //month, year, tax, category
  47. .page, #page-<id> //single page .post, #post-<id> //single post .home //homepage!

    .search //search result page .tag, .category, .author
  48. Millions of Plugins, Themes & Resources from the WordPress community

  49. Questions? @kingsidharth www.kingsidharth.com king@kingsidharth.com 22-year old Designer & Entrepreneur @

    Instamojo Been taught by WordPress since high-school