Responsive Typography II

13,378
-1

Published on

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 and Albany UX. 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.

Published in: Design, Technology
1 Comment
128 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,378
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
283
Comments
1
Likes
128
Embeds 0
No embeds

No notes for slide

Responsive Typography II

  1. Responsive Typography https://flic.kr/p/2mjtwC Clarissa Peterson @clarissa
  2. Communication https://flic.kr/p/6xyFnt
  3. Font Size https://flic.kr/p/4r1D8w
  4. https://flic.kr/p/eYEFGY Ems
  5. 1em = default
  6. 2em = twice as big 1em = default
  7. 2em = twice as big 1em = default .5em = half as big
  8. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } p { font-size: 1em; }
  9. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
  10. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
  11. <p>This is 1 em.</p> <div>This is 2 ems <span>(and 1.5 ems) </span>.</div>
  12. <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; }
  13. <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; }
  14. Thoughtful CSS https://flic.kr/p/bUxzCm
  15. div { font-size: 1.1em; }
  16. div { font-size: 1.2em; }
  17. body { font-size: 100%; }
  18. http://alistapart.com
  19. https://flic.kr/p/8iNCNU
  20. Scale https://flic.kr/p/dhufQk
  21. http://www.oliverharvey.co.uk/
  22. http://www.oliverharvey.co.uk/
  23. http://www.linksture.com/
  24. http://www.linksture.com/
  25. http://skinnyties.com/
  26. http://skinnyties.com/
  27. https://flic.kr/p/5a4L3p Rems
  28. html { font-size: 100%; }
  29. Fallback https://flic.kr/p/GedyD
  30. h1 { font-size: 32px; font-size: 2rem; }
  31. Line Height (Leading) https://flic.kr/p/4EDFYF
  32. p { line-height: 1; } p { line-height: 2; }
  33. p { line-height: 1; }
  34. p { line-height: 2; }
  35. p { line-height: 1.4; }
  36. p { line-height: 1.3 }
  37. p { line-height: 1.3 } @media only screen and (min-width: 30em) { p { line-height: 1.4 } }
  38. 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 } }
  39. Vertical Margins https://flic.kr/p/4qc5EB
  40. p { line-height: 1.5; margin-top: 1.5em; margin-bottom: 1.5em; }
  41. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
  42. 45-75 Characters
  43. 74 72 69 69 65 58 65 73 68 67 66
  44. <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>
  45. <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> .testing { color: #f00; }
  46. <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> .testing { color: #f00; }
  47. http://codepen.io/chriscoyier/pen/atebf
  48. Media Queries https://flic.kr/p/ajTNcB
  49. https://flic.kr/p/8U1KwJ
  50. article p { line-height: 1.3; margin: 1.3em 0; } article { width: 94%; margin: auto; }
  51. max-width https://flic.kr/p/7nCGk3
  52. article { max-width: 28em; }
  53. article { max-width: 28em; }
  54. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  55. http://www.mqtest.io
  56. @media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
  57. Alignment & Hyphenation https://flic.kr/p/8veLPW
  58. .hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
  59. @media only screen and (max-width: 40em) { .hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } }
  60. <html lang="en">
  61. Easy to read https://flic.kr/p/8iCtLv
  62. article p:first-of-type { font-size: 1.2em; }
  63. Typeface https://flic.kr/p/5q1Qj1
  64. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
  65. #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; } }
  66. Performance
  67. Web Fonts https://flic.kr/p/51wXrK
  68. @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; }
  69. @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; }
  70. @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; }
  71. Use fewer fonts
  72. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); }
  73. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); } p { font-family: Arial, sans-serif; }
  74. @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; } }
  75. System Fonts https://flic.kr/p/eiyWiy
  76. http://www.jordanm.co.uk/tinytype
  77. h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; } http://www.jordanm.co.uk/tinytype
  78. <link href="http://fonts.googleapis.com/ css?family=Josefin+Slab &text=TitleofWebsite" rel="stylesheet" type="text/css">
  79. Communication https://flic.kr/p/6xyFnt
  80. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×