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

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

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

    paid) Linotype (paid) FontShop (free & paid)
  5. 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)
  6. 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;
  7. 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;
  8. 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;
  9. 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 */
  10. 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:
  11. 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)
  12. 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)
  13. CSS FONT PROPERTIES text-shadow: Adding a shadow to your text

    .shadow { text-shadow: 2px 2px 6px rgba(50, 50, 80, 0.5); }
  14. 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)
  15. 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
  16. 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)