$30 off During Our Annual Pro Sale. View Details »

Typography Workshop

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.

Amber Hewitt

June 10, 2018
Tweet

More Decks by Amber Hewitt

Other Decks in Design

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