Fun with Fonts: Using The Right Fonts For Your WordPress Website

Readability is an important part to any website. Choosing the right font can make all the difference in any design. Discover where you can get web fonts (free, subscription, or download and install yourself). Learn how to select the right fonts, size your fonts correctly, and add them to your WordPress website without slowing it down.

Presented at WordCamp Sacramento 2017 // September 16, 2017

Transcript

1. Using the Right Fonts for Your WordPress Website WITH FONTS Fun
2. Web design is 95% typography Oliver Reichenstein
3. Typography must often draw attention to itself before it will be read.
4. Yet in order to be read,
 it must relinquish
 the attention it has drawn.
5. Legibility doesn’t equal readability
6. Just because you can read the text doesn’t mean your readers can.
7. Common Classifications
8. Choosing the Right Fonts Know your context • What are you trying to convey? • Is it long-form reading or short bursts of text? • Use word association: powerful, playful, innocent, handmade, industrial, etc. • Is it appropriate?
9. Pairing Fonts • Look for distinction • Look for harmony • Some fonts have a sans and serif 
 (Freight Sans Pro & Freight Text Pro) • Look at other websites for good 
 font pairings • Do you need more than one font?
10. Setting Your Type • Type Size
 (16px for mobile, 18-22px for desktop) • Line-width
 (45-75 characters wide) • Line-height
 (for reading comfort) • Type color & contrast
 (for readability and accessibility)
11. Setting Your Type Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge
12. Headings Use a modular scale
13. Where to Get Web Fonts Subscription Services Adobe Typekit Fonts.com Type Network Cloud.typography
14. Where to Get Web Fonts Download Web Fonts Most sites that sell desktop fonts 
 have web fonts as well
15. Loading Fonts @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;
 } Loading fonts from your server in CSS
16. Using Google Fonts Google hosts the font files for you.
17. Using Google Fonts Google hosts the font files for you.
18. Using Typekit
19. Using Typekit Typekit Fonts for WordPress
 https://wordpress.org/plugins/typekit-fonts-for- wordpress/
20. Using Fonts in CSS h1 {
 font-family: Whitney, Georgia, serif;
 font-size: 72px;
 font-weight: bold;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 } HAMBURGE Result:
21. Resources Better Web Typography (free email course)
 betterwebtype.com Combining Typefaces (free PDF)
 https://typekit.files.wordpress.com/2016/04/ combiningtypefaces.pdf Webfont Handbook by Bram Stein
 https://abookapart.com/products/webfont- handbook
22. Resources Typecast (test fonts for free)
 typecast.com HTML Arrows (Codes for special characters)
 htmlarrows.com Type Scale (Calculator for sizing headings)
 type-scale.com
23. WhatFont Chrome extension for identifying fonts on websites
24. Inspiration Fonts In Use
 fontsinuse.com I Love Typography
 ilovetypography.com Typewolf
 typewolf.com
25. Amber Hewitt amberhewitt.com @amberrhewitt Thank you!