Pro Yearly is on sale from $80 to $50! »

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


  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) (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) Webfont Handbook

    by Bram Stein HTML Arrows (Codes for special characters) Typewolf
  29. RESOURCES Type Scale (Calculator for sizing headings) Typecast (test

    fonts for free) WhatFont (Chrome extension for identifying fonts on websites)
  30. Thank you!