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.

Transcript

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:
15. GOOGLE FONTS
16. GOOGLE FONTS
17. GOOGLE FONTS
18. TYPEKIT
19. TYPEKIT
20. TYPEKIT
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
 typewolf.com
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
30. Thank you!