Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Crash Course in Typography — WordCamp Baroda 2014

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.

King Sidharth

January 26, 2014
Tweet

More Decks by King Sidharth

Other Decks in Design

Transcript

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

    &

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Classification
    !
    Choosing a Typeface
    &

    View full-size slide

  6. Classy, Authority, Timeless, and Old.

    View full-size slide

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

    View full-size slide

  8. Geometric
    Humanist
    Display
    Slab Serif
    Fixed Width

    View full-size slide

  9. !
    Basic
    Typesetting

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Web Specific Tech

    View full-size slide

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

    View full-size slide

  18. WordPress
    now uses
    Open Sans
    for the backend.

    View full-size slide

  19. Responsive Typography

    View full-size slide

  20. WordPress Specific Tools
    for styling & typography

    View full-size slide

  21. .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 full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Questions?
    @kingsidharth
    www.kingsidharth.com
    [email protected]
    22-year old
    Designer & Entrepreneur @ Instamojo
    Been taught by WordPress since high-school

    View full-size slide