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

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

More Decks by Amber Hewitt

Other Decks in Design


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

  2. Where to Get Fonts 1

  3. Hosted vs. Self-Hosted

  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.
  5. SELF-HOSTED With a self-hosted license, you download the web font

    files from the font provider and host them on your servers.
  6. HOSTED (SUBSCRIPTIONS) Google Fonts (free) Adobe Typekit (free & paid)

    Fonts.com (free & paid) Cloud.typography (paid) Type Network (paid)
  7. SELF-HOSTED Google Fonts (free) Type Network (paid) MyFonts (free &

    paid) Linotype (paid) FontShop (free & paid)
  8. Loading Fonts 2

  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)
  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;
  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;
  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;
  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 */
  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:






  21. TYPEKIT Plugin: Typekit Fonts for WordPress

  22. Using Fonts in CSS 3

  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)
  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)
  25. CSS FONT PROPERTIES text-shadow: Adding a shadow to your text

    .shadow { text-shadow: 2px 2px 6px rgba(50, 50, 80, 0.5); }
  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)
  27. 1 Where to Get Fonts Loading Fonts Using Fonts in

    CSS 2 3
  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
  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)
  30. Thank you!