$30 off During Our Annual Pro Sale. View Details »

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

Amber Hewitt
September 16, 2017

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

Amber Hewitt

September 16, 2017
Tweet

More Decks by Amber Hewitt

Other Decks in Design

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