Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Finding Your Type: Using The Right Fonts For Your WordPress Website

Amber Hewitt
November 10, 2019

Finding Your Type: Using The Right Fonts For Your WordPress Website

Readability is a very important part to every website and yet it is taken for granted. Choosing the right font can make all the difference in any design. Learn how to select the right type, design your fonts correctly, and add them to your WordPress website.

Amber Hewitt

November 10, 2019
Tweet

More Decks by Amber Hewitt

Other Decks in Design

Transcript

  1. Finding Your Type
    Using The Right Fonts
    For Your WordPress Website

    View Slide

  2. Typography

    View Slide

  3. Typography Demo Code:
    https://codepen.io/amberrhewitt

    View Slide

  4. Typography Basics
    1

    View Slide

  5. Web design is
    95% typography
    Oliver Reichenstein

    View Slide

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

    View Slide

  7. Yet in order to be read,

    it must relinquish

    the attention it has drawn.

    View Slide

  8. Legibility doesn’t
    equal readability

    View Slide

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

    View Slide

  10. Common Classifications

    View Slide

  11. Tracking (Letter Spacing)
    Hamburge
    Hamburge
    Hamburge

    View Slide

  12. Kerning (Space Between Letters)
    Hamburge
    H amburge

    View Slide

  13. Leading (Line Height)
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. In in tempus metus, sit
    amet aliquam nunc. Ut pharetra
    condimentum diam quis eleifend. Nunc
    fringilla quam magna, sit amet gravida
    elit malesuada varius.
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. In in tempus metus, sit
    amet aliquam nunc. Ut pharetra
    condimentum diam quis eleifend. Nunc
    fringilla quam magna, sit amet gravida
    elit malesuada varius.

    View Slide

  14. Italic & Oblique
    regular
    italic
    oblique (faux italic)

    View Slide

  15. Choosing the Right Fonts
    Know your context…

    View Slide

  16. View Slide

  17. View Slide

  18. Choosing the Right Fonts
    • 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

  19. 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

  20. 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

  21. Setting Your Type
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge
    Hamburge

    View Slide

  22. Headings
    Use a modular scale

    View Slide

  23. Breathing room
    (a.k.a. white space)

    View Slide

  24. Too busy

    View Slide

  25. View Slide

  26. Just right

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. Don’t be afraid
    to experiment

    View Slide

  31. …but make sure
    there’s a logical reason
    for your design.

    View Slide

  32. SANS-SERIF
    Open Sans
    Proxima Nova
    Lato
    Avenir
    Brandon Grotesque
    Fira Sans
    SERIF
    Garamond
    Georgia
    Freight Text
    Merriweather
    Kepler
    Libre Baskerville

    View Slide

  33. The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    #000 #FFF

    View Slide

  34. The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    #333 #CCC

    View Slide

  35. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tempus metus, sit amet aliquam nunc. Ut pharetra condimentum diam quis
    eleifend. Nunc fringilla quam magna, sit amet gravida elit malesuada varius. Aenean justo neque, lobortis at nisi id, cursus dapibus odio. Nunc
    sed fermentum elit, nec pharetra sapien. Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem. Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    Vivamus pharetra facilisis congue. Etiam sit amet felis placerat, vehicula nibh ut, blandit eros. Phasellus malesuada elementum diam et
    commodo.
    Text is too small

    View Slide

  36. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tempus metus, sit amet aliquam nunc. Ut
    pharetra condimentum diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit malesuada varius.
    Aenean justo neque, lobortis at nisi id, cursus dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem. Aenean eleifend arcu vitae varius pretium.
    Proin ac tempor purus. Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada elementum diam et commodo.
    Line length is too long

    View Slide

  37. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Line height is too close

    View Slide

  38. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.

    View Slide

  39. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Aligned Center - Too Hard To Read

    View Slide

  40. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Never Justify!

    View Slide

  41. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Never Indent!

    View Slide

  42. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Hello World

    View Slide

  43. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend.
    • Nunc fringilla quam magna, sit amet malesuada varius.
    • Aenean justo neque, lobortis at nisi id, cursus dapibus odio.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Vivamus pharetra facilisis congue. Etiam sit
    amet felis placerat, vehicula nibh ut, blandit eros. Phasellus
    malesuada elementum diam et commodo.
    Hello World

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. Where to Get Fonts
    2

    View Slide

  48. Hosted
    vs.
    Self-Hosted

    View Slide

  49. 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.

    View Slide

  50. Self-Hosted
    With a self-hosted license, you download the web font
    files from the font provider and host them on your
    servers.

    View Slide

  51. Hosted (Subscriptions)
    Google Fonts (free)
    Adobe Typekit (free & paid)
    Fonts.com (free & paid)
    Cloud.typography (paid)
    Type Network (paid)

    View Slide

  52. Self-Hosted
    Google Fonts (free)
    Type Network (paid)
    MyFonts (free & paid)
    Linotype (paid)
    FontShop (free & paid)

    View Slide

  53. Loading Fonts
    3

    View Slide

  54. 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)

    View Slide

  55. 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;

    }

    View Slide

  56. 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;

    }

    View Slide

  57. 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;

    }

    View Slide

  58. 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 */

    }

    View Slide

  59. 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:

    View Slide

  60. Google Fonts

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. Adobe Fonts (formerly Typekit)

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. Adobe Fonts (formerly Typekit)
    Plugin: Custom Adobe Fonts (Typekit)

    View Slide

  70. Using Fonts in CSS
    4

    View Slide

  71. 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)

    View Slide

  72. 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)

    View Slide

  73. CSS Font Properties
    text-shadow: Adding a shadow to your text
    .shadow { text-shadow: 2px 2px 6px rgba(50, 50, 80, 0.5); }

    View Slide

  74. 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)

    View Slide

  75. 1 Typography Basics
    Where to Get Fonts
    Loading Fonts
    Using Fonts in CSS
    2
    3
    4

    View Slide

  76. 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

    View Slide

  77. Resources
    Typewolf

    typewolf.com
    Type Scale (Calculator for sizing headings)

    type-scale.com
    WhatFont (Chrome extension for identifying fonts)

    ambr.in/3ORKkk

    View Slide

  78. Thank you!

    View Slide

  79. Amber Hewitt
    amberhewitt.com
    @amberrhewitt

    View Slide