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.

Ecf1ed72f102d378dfd3b426fad1f66b?s=128

Amber Hewitt

June 10, 2018
Tweet

Transcript

  1. 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.
  2. 5.

    SELF-HOSTED With a self-hosted license, you download the web font

    files from the font provider and host them on your servers.
  3. 6.

    HOSTED (SUBSCRIPTIONS) Google Fonts (free) Adobe Typekit (free & paid)

    Fonts.com (free & paid) Cloud.typography (paid) Type Network (paid)
  4. 7.

    SELF-HOSTED Google Fonts (free) Type Network (paid) MyFonts (free &

    paid) Linotype (paid) FontShop (free & paid)
  5. 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)
  6. 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;
 }
  7. 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;
 }
  8. 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;
 }
  9. 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 */
 }
  10. 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:
  11. 18.
  12. 19.
  13. 20.
  14. 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)
  15. 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)
  16. 25.

    CSS FONT PROPERTIES text-shadow: Adding a shadow to your text

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