Typography Workshop

Typography is the art and technique of arranging type for legibility, readability, and beauty. While it sounds simple, like just choosing a font or two, there are typography rules, best practices, and subtle tricks professional designers know that elevates their work to a higher level. In this session, learn everything you need to know to master typography like a pro, including designer secrets to nail the little details of spectacular type for your WordPress site.

Transcript

1. 2
   Typography
   W O R K S H O P
   

   View Slide

2. Where to Get Fonts
   1
   

   View Slide

3. Hosted
   vs.
   Self-Hosted
   

   View Slide

4. HOSTED
   With a hosted license, you reference a CSS resource link
   in the body of your HTML (or CSS) and the font provider
   serve the fonts to your site from their content-delivery
   network.
   

   View Slide

5. SELF-HOSTED
   With a self-hosted license, you download the web font
   files from the font provider and host them on your
   servers.
   

   View Slide

6. HOSTED (SUBSCRIPTIONS)
   Google Fonts (free)
   Adobe Typekit (free & paid)
   Fonts.com (free & paid)
   Cloud.typography (paid)
   Type Network (paid)
   

   View Slide

7. SELF-HOSTED
   Google Fonts (free)
   Type Network (paid)
   MyFonts (free & paid)
   Linotype (paid)
   FontShop (free & paid)
   

   View Slide

8. Loading Fonts
   2
   

   View Slide

9. FONT FILE TYPES
   .eot (only for Internet Explorer)
   .svg (deprecated; no longer in use)
   .ttf (TrueType Font)
   .woff (2nd best option)
   .woff2 (1st best option)
   

   View Slide

10. LOADING FONTS
    Loading fonts from your server in CSS (self-hosted)
    @font-face {

    font-family: Elena, serif;

    src: url(elena-regular.woff2) format(“woff2”),

    url(elena-regular.woff) format(“woff”),

    url(elena-regular.otf) format(“opentype”);

    font-weight: normal;

    }
    

    View Slide

11. LOADING FONTS
    Another example:
    @font-face {

    font-family: ‘Fanwood Text’, serif;

    src: url(fanwood_text.woff2) format(“woff2”),

    url(fanwood_text.woff) format(“woff”),

    url(fanwood_text.otf) format(“opentype”);

    font-weight: normal;

    }
    

    View Slide

12. LOADING FONTS
    Italic font:
    @font-face {

    font-family: ‘Fanwood Text’, serif;

    src: url(fanwood_text_italic.woff2) format(“woff2”),

    url(fanwood_text_italic.woff) format(“woff”),

    url(fanwood_text_italic.otf) format(“opentype”);

    font-weight: normal;

    font-style: italic;

    }
    

    View Slide

13. LOADING FONTS
    Bold font:
    @font-face {

    font-family: ‘Open Sans’, serif;

    src: url(open_sans_bold.woff2) format(“woff2”),

    url(open_sans_bold.woff) format(“woff”),

    url(open_sans_bold.otf) format(“opentype”);

    font-weight: bold; /* Or use 700 */

    }
    

    View Slide

14. LOADING FONTS
    Conditional Loading (selecting characters):
    @font-face {

    font-family: Spumante;

    src: url(spumante.woff) format(“woff”)

    unicode-range: U+26; /* Only loads the ampersand ‘&’ */

    }
    U+26, U+23 (loads ‘&’ and ‘#’ characters)

    U+30-39 (all latin digits)

    U+2? (wildcard: selects the range U+20-2F)
    Other Unicode Examples:
    

    View Slide

15. GOOGLE FONTS
    

    View Slide

16. GOOGLE FONTS
    

    View Slide

17. GOOGLE FONTS
    

    View Slide

18. TYPEKIT
    

    View Slide

19. TYPEKIT
    

    View Slide

20. TYPEKIT
    

    View Slide

21. TYPEKIT
    Plugin: Typekit Fonts for WordPress
    

    View Slide

22. Using Fonts in CSS
    3
    

    View Slide

23. CSS FONT PROPERTIES
    font-family: Choosing a font (Helvetica, Open Sans)

    generic-family: serif, sans-serif, cursive, fantasy, monospace
    font-family: "Open Sans", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
    body { font-size: 18px; }
    p { font-size: 1em; }
    h1 { font-size: 2.75em; }
    font-size: The size of the font (px, em, rem)
    

    View Slide

24. CSS FONT PROPERTIES
    font-style: normal, italic, or oblique
    font-weight: The weight of the font 

    (e.g. normal, bold, 100-900)
    text-align: Aligning the text (left, center, right, justified)
    text-transform: Changing the case of your text
    (lowercase, uppercase, capitalize)
    

    View Slide

25. CSS FONT PROPERTIES
    text-shadow: Adding a shadow to your text
    .shadow { text-shadow: 2px 2px 6px rgba(50, 50, 80, 0.5); }
    

    View Slide

26. CSS FONT PROPERTIES
    line-height: The spacing between the lines of text (leading)
    p { line-height: 1.4em; }
    h1 { letter-spacing: 0.08em; }
    letter-spacing: The spacing between the letters 

    (kerning, tracking)
    

    View Slide

27. 1 Where to Get Fonts
    Loading Fonts
    Using Fonts in CSS
    2
    3
    

    View Slide

28. RESOURCES
    Better Web Typography (free email course)

    betterwebtype.com
    Webfont Handbook by Bram Stein

    abookapart.com/products/webfont-handbook
    HTML Arrows (Codes for special characters)

    htmlarrows.com
    Typewolf

    typewolf.com
    

    View Slide

29. RESOURCES
    Type Scale (Calculator for sizing headings)

    type-scale.com
    Typecast (test fonts for free)

    typecast.com
    WhatFont (Chrome extension for identifying fonts on websites)

    ambr.in/3ORKkk
    

    View Slide

30. Thank you!
    

    View Slide