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
   

   View Slide

2. Web design is 95%
   typography
   Oliver Reichenstein
   

   View Slide

3. Typography must often
   draw attention to itself
   before it will be read.
   

   View Slide

4. Yet in order to be read,

   it must relinquish

   the attention it has drawn.
   

   View Slide

5. Legibility doesn’t
   equal readability
   

   View Slide

6. Just because you can read
   the text doesn’t mean
   your readers can.
   

   View Slide

7. Common Classifications
   

   View Slide

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?
   

   View Slide

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?
   

   View Slide

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)
    

    View Slide

11. Setting Your Type
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    

    View Slide

12. Headings
    Use a modular scale
    

    View Slide

13. Where to Get Web Fonts
    Subscription Services
    Adobe Typekit
    Fonts.com
    Type Network
    Cloud.typography
    

    View Slide

14. Where to Get Web Fonts
    Download Web Fonts
    Most sites that sell desktop fonts 

    have web fonts as well
    

    View Slide

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
    

    View Slide

16. Using Google Fonts
    Google hosts the font files for you.
    

    View Slide

17. Using Google Fonts
    Google hosts the font files for you.
    

    View Slide

18. Using Typekit
    

    View Slide

19. Using Typekit
    Typekit Fonts for WordPress

    https://wordpress.org/plugins/typekit-fonts-for-
    wordpress/
    

    View Slide

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:
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. WhatFont
    Chrome extension for identifying fonts
    on websites
    

    View Slide

24. Inspiration
    Fonts In Use

    fontsinuse.com
    I Love Typography

    ilovetypography.com
    Typewolf

    typewolf.com
    

    View Slide

25. Amber Hewitt
    amberhewitt.com
    @amberrhewitt
    Thank you!
    

    View Slide