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

Ecf1ed72f102d378dfd3b426fad1f66b?s=47 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.

Ecf1ed72f102d378dfd3b426fad1f66b?s=128

Amber Hewitt

November 10, 2019
Tweet

Transcript

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

    Website
  2. Typography

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

  4. Typography Basics 1

  5. Web design is 95% typography Oliver Reichenstein

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

    be read.
  7. Yet in order to be read,
 it must relinquish
 the

    attention it has drawn.
  8. Legibility doesn’t equal readability

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

    readers can.
  10. Common Classifications

  11. Tracking (Letter Spacing) Hamburge Hamburge Hamburge

  12. Kerning (Space Between Letters) Hamburge H amburge

  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.
  14. Italic & Oblique regular italic oblique (faux italic)

  15. Choosing the Right Fonts Know your context…

  16. None
  17. None
  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?
  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?
  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)
  21. Setting Your Type Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge

    Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge
  22. Headings Use a modular scale

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

  24. Too busy

  25. None
  26. Just right

  27. None
  28. None
  29. None
  30. Don’t be afraid to experiment

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

  32. SANS-SERIF Open Sans Proxima Nova Lato Avenir Brandon Grotesque Fira

    Sans SERIF Garamond Georgia Freight Text Merriweather Kepler Libre Baskerville
  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
  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
  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
  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
  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
  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.
  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
  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!
  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!
  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
  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
  44. None
  45. None
  46. None
  47. Where to Get Fonts 2

  48. Hosted vs. Self-Hosted

  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.
  50. Self-Hosted With a self-hosted license, you download the web font

    files from the font provider and host them on your servers.
  51. Hosted (Subscriptions) Google Fonts (free) Adobe Typekit (free & paid)

    Fonts.com (free & paid) Cloud.typography (paid) Type Network (paid)
  52. Self-Hosted Google Fonts (free) Type Network (paid) MyFonts (free &

    paid) Linotype (paid) FontShop (free & paid)
  53. Loading Fonts 3

  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)
  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;
 }
  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;
 }
  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;
 }
  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 */
 }
  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:
  60. Google Fonts

  61. None
  62. None
  63. None
  64. Adobe Fonts (formerly Typekit)

  65. None
  66. None
  67. None
  68. None
  69. Adobe Fonts (formerly Typekit) Plugin: Custom Adobe Fonts (Typekit)

  70. Using Fonts in CSS 4

  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)
  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)
  73. CSS Font Properties text-shadow: Adding a shadow to your text

    .shadow { text-shadow: 2px 2px 6px rgba(50, 50, 80, 0.5); }
  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)
  75. 1 Typography Basics Where to Get Fonts Loading Fonts Using

    Fonts in CSS 2 3 4
  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
  77. Resources Typewolf
 typewolf.com Type Scale (Calculator for sizing headings)
 type-scale.com

    WhatFont (Chrome extension for identifying fonts)
 ambr.in/3ORKkk
  78. Thank you!

  79. Amber Hewitt amberhewitt.com @amberrhewitt