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.

Transcript

1. g
   A
   Crash Course
   !
   Typography
   by @kingsidharth
   for WordCamp Baroda 2014
   #WCBaroda | 26th January, 2014
   in
   fi
   &
   

   View Slide

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.
   

   View Slide

3. A History of Typography from
   Print & Graphic Design
   + font vs. typeface
   

   View Slide

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

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Shut up!
   

   View Slide

10. Shut up!
    

    View Slide

11. Shut up!
    

    View Slide

12. Classification
    !
    Choosing a Typeface
    &
    

    View Slide

13. Classy, Authority, Timeless, and Old.
    

    View Slide

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

    View Slide

15. Geometric
    Humanist
    Display
    Slab Serif
    Fixed Width
    

    View Slide

16. !
    Basic
    Typesetting
    

    View Slide

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

    View Slide

18. View Slide

19. View Slide

20. Alignment
    text-align: left;
    .alignleft
    .alignright
    .aligncenter
    

    View Slide

21. View Slide

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

    View Slide

23. Words Per Line
    width & font-size
    Keep it 70-80 words per line.
    Google: Golden Ratio Typography
    

    View Slide

24. View Slide

25. View Slide

26. L e t t e r S p a c i n g
    letter-spacing: 1px;
    Play around. For highlights, headlines.
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. Line Height
    line-height: 1.6em;
    Keep it between 1.5em to 1.6em
    Google: Golden Ratio Typography
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. Web Specific Tech
    

    View Slide

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

    View Slide

39. WordPress
    now uses
    Open Sans
    for the backend.
    

    View Slide

40. Responsive Typography
    

    View Slide

41. View Slide

42. WordPress Specific Tools
    for styling & typography
    

    View Slide

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.
    

    View Slide

44. Body Classes to Control Typography
    of Post/Page Types
    {
    echo ‘single’;
    }
    ?>
    ”>
    Most good themes have this in place.
    

    View Slide

45. .single .entry-title {
    // Style Rules for Headline
    }
    !
    .single .entry-content p {
    // Paragraph Rules for Main Content of Your Post
    }
    

    View Slide

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
    

    View Slide

47. .page, #page- //single page
    .post, #post- //single post
    .home //homepage!
    .search //search result page
    .tag, .category, .author
    

    View Slide

48. Millions
    of
    Plugins, Themes & Resources
    from the
    WordPress
    community
    

    View Slide

49. Questions?
    @kingsidharth
    www.kingsidharth.com
    king@kingsidharth.com
    22-year old
    Designer & Entrepreneur @ Instamojo
    Been taught by WordPress since high-school
    

    View Slide