Responsive Typography

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=47 Clarissa Peterson
February 18, 2015

Responsive Typography

Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size. Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices. You'll also find out how typography affects the loading time of your website, and what you can do to improve performance.

Presented in 2015 at ConFoo. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

February 18, 2015
Tweet

Transcript

  1. Responsive Typography https://flic.kr/p/2mjtwC Clarissa Peterson @clarissa

  2. Communication https://flic.kr/p/6xyFnt

  3. Default Font Size https://flic.kr/p/4r1D8w

  4. body { font-size: 100%; }

  5. https://flic.kr/p/8iNCNU

  6. Scale https://flic.kr/p/dhufQk

  7. http://skinnyties.com/

  8. http://skinnyties.com/

  9. http://www.linksture.com/

  10. http://www.linksture.com/

  11. http://www.brandaiddesignco.com

  12. http://www.brandaiddesignco.com

  13. http://www.tilde.io/

  14. http://www.tilde.io/

  15. http://www.oliverharvey.co.uk/

  16. http://www.oliverharvey.co.uk/

  17. https://flic.kr/p/eYEFGY Ems

  18. None
  19. 1em = default

  20. 2em = twice as big 1em = default

  21. 2em = twice as big 1em = default .5em =

    half as big
  22. h1 { font-size: 3em; } h2 { font-size: 2em; }

    h3 { font-size: 1.5em; } p { font-size: 1em; }
  23. h1 { font-size: 3em; } h2 { font-size: 2em; }

    h3 { font-size: 1.5em; }
  24. h1 { font-size: 3em; } h2 { font-size: 2em; }

    h3 { font-size: 1.5em; }
  25. <p>This is 1 em.</p> <div>This is 2 ems <span>(and 1.5

    ems) </span>.</div>
  26. <p>This is 1 em.</p> <div>This is 2 ems <span>(and 1.5

    ems) </span>.</div> p { font-size: 1em; } div { font-size: 2em; } span { font-size: 1.5em; }
  27. <p>This is 1 em.</p> <div>This is 2 ems <span>(and 1.5

    ems) </span>.</div> p { font-size: 1em; } div { font-size: 2em; } span { font-size: 1.5em; }
  28. Thoughtful CSS https://flic.kr/p/bUxzCm

  29. None
  30. div { font-size: 1.1em; }

  31. div { font-size: 1.2em; }

  32. https://flic.kr/p/5a4L3p Rems

  33. html { font-size: 100%; }

  34. Pixel Fallback https://flic.kr/p/GedyD

  35. h1 { font-size: 32px; font-size: 2rem; }

  36. Line Height (Leading) https://flic.kr/p/4EDFYF

  37. p { line-height: 1; } p { line-height: 2; }

  38. None
  39. None
  40. p { line-height: 1; }

  41. p { line-height: 2; }

  42. p { line-height: 1.4; }

  43. p { line-height: 1.3 }

  44. p { line-height: 1.3 } @media only screen and (min-width:

    30em) { p { line-height: 1.4 } }
  45. p { line-height: 1.3 } @media only screen and (min-width:

    30em) { p { line-height: 1.4 } } @media only screen and (min-width: 60em) { p { line-height: 1.5 } }
  46. Vertical Margins https://flic.kr/p/4qc5EB

  47. p { line-height: 1.5; margin-top: 1.5em; margin-bottom: 1.5em; }

  48. None
  49. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

  50. None
  51. None
  52. 45-75 Characters

  53. 65 58 65 73 68 67 66 74 72 69

    69
  54. None
  55. .testing { color: #f00; }

  56. .testing { color: #f00; } <p>These stories are true. Although

    I have left <span class=”testing”>the strict line of historical</span> truth in many places, the animals in this book were all real characters.</p>
  57. .testing { color: #f00; } <p>These stories are true. Although

    I have left <span class=”testing”>the strict line of historical</span> truth in many places, the animals in this book were all real characters.</p>
  58. http://codepen.io/chriscoyier/pen/atebf

  59. http://trentwalton.com

  60. http://trentwalton.com

  61. http://trentwalton.com

  62. http://trentwalton.com

  63. http://trentwalton.com

  64. article p { line-height: 1.3; margin: 1.3em 0; } article

    { width: 94%; margin: auto; }
  65. None
  66. max-width https://flic.kr/p/7nCGk3

  67. None
  68. article { max-width: 28em; }

  69. article { max-width: 28em; }

  70. None
  71. @media only screen and (min-width:48em) { article { font-size: 1.1em;

    } article p { line-height: 1.4; margin: 1.4em auto; } }
  72. http://www.mqtest.io

  73. None
  74. @media only screen and (min-width:60em) { article { font-size: 1.2em;

    } article p { line-height: 1.5; margin: 1.5em auto; } }
  75. None
  76. None
  77. Media Queries https://flic.kr/p/ajTNcB

  78. https://flic.kr/p/8U1KwJ

  79. Alignment & Hyphenation https://flic.kr/p/8veLPW

  80. None
  81. .hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

  82. @media only screen and (max-width: 40em) { .hyphenate { -webkit-hyphens:

    auto; -moz-hyphens: auto; hyphens: auto; } }
  83. Easy to read https://flic.kr/p/8iCtLv

  84. article p:first-of-type { font-size: 1.2em; }

  85. Typeface https://flic.kr/p/5q1Qj1

  86. None
  87. None
  88. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }

  89. #intro { font-size: 1em; font-family: Helvetica, sans-serif; } @media only

    screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; text-transform: uppercase; } }
  90. Performance

  91. Web Fonts https://flic.kr/p/51wXrK

  92. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); src: local('Example Font'), url('ExampleFont.eot?#iefix')

    format('embedded-opentype'), url('ExampleFont.woff') format('woff'), url('ExampleFont.ttf') format('truetype'), url('ExampleFont.svg') format('svg'); font-style: normal; font-weight: 400; }
  93. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); src: local('Example Font'), url('ExampleFont.eot?#iefix')

    format('embedded-opentype'), url('ExampleFont.woff') format('woff'), url('ExampleFont.ttf') format('truetype'), url('ExampleFont.svg') format('svg'); font-style: normal; font-weight: 400; }
  94. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); src: local('Example Font'), url('ExampleFont.eot?#iefix')

    format('embedded-opentype'), url('ExampleFont.woff') format('woff'), url('ExampleFont.ttf') format('truetype'), url('ExampleFont.svg') format('svg'); font-style: normal; font-weight: 400; }
  95. Use fewer fonts

  96. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); }

  97. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); } p { font-family:

    Arial, sans-serif; }
  98. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); } p { font-family:

    Arial, sans-serif; } @media only screen and (min-width: 30em) { p { font-family: ExampleFont, Arial, sans-serif; } }
  99. System Fonts https://flic.kr/p/eiyWiy

  100. http://www.jordanm.co.uk/tinytype

  101. http://www.jordanm.co.uk/tinytype h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; }

  102. <link href="http://fonts.googleapis.com/ css?family=Josefin+Slab &text=TitleofWebsite" rel="stylesheet" type="text/css">

  103. Communication https://flic.kr/p/6xyFnt

  104. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa