0
Responsive Typography 
https://flic.kr/p/2mjtwC 
Clarissa Peterson 
@clarissa
Communication 
https://flic.kr/p/6xyFnt
Font Size 
https://flic.kr/p/4r1D8w
https://flic.kr/p/eYEFGY 
Ems
1em = default
2em = twice as big 
1em = default
2em = twice as big 
1em = default 
.5em = half as big
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; } 
p { font-size: 1em; }
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; }
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; }
<p>This is 1 em.</p> 
<div>This is 2 ems <span>(and 1.5 ems) 
</span>.</div>
<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;...
<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;...
Thoughtful CSS 
https://flic.kr/p/bUxzCm
div { font-size: 1.1em; }
div { font-size: 1.2em; }
body { font-size: 100%; }
http://alistapart.com
https://flic.kr/p/8iNCNU
Scale 
https://flic.kr/p/dhufQk
http://www.oliverharvey.co.uk/
http://www.oliverharvey.co.uk/
http://www.linksture.com/
http://www.linksture.com/
http://skinnyties.com/
http://skinnyties.com/
https://flic.kr/p/5a4L3p 
Rems
html { font-size: 100%; }
Fallback 
https://flic.kr/p/GedyD
h1 { font-size: 32px; font-size: 2rem; }
Line Height (Leading) 
https://flic.kr/p/4EDFYF
p { line-height: 1; } 
p { line-height: 2; }
p { line-height: 1; }
p { line-height: 2; }
p { line-height: 1.4; }
p { line-height: 1.3 }
p { line-height: 1.3 } 
@media only screen and (min-width: 30em) { 
p { line-height: 1.4 } 
}
p { line-height: 1.3 } 
@media only screen and (min-width: 30em) { 
p { line-height: 1.4 } 
} 
@media only screen and (min...
Vertical Margins 
https://flic.kr/p/4qc5EB
p { 
line-height: 1.5; 
margin-top: 1.5em; 
margin-bottom: 1.5em; 
}
Line Length (Measure) 
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
45-75 Characters
74 
72 
69 
69 
65 
58 
65 
73 
68 
67 
66
<p>These stories are true. Although I have 
left <span class=”testing”>the strict line 
of historical</span> truth in many...
<p>These stories are true. Although I have 
left <span class=”testing”>the strict line 
of historical</span> truth in many...
<p>These stories are true. Although I have 
left <span class=”testing”>the strict line 
of historical</span> truth in many...
http://codepen.io/chriscoyier/pen/atebf
Media Queries 
https://flic.kr/p/ajTNcB
https://flic.kr/p/8U1KwJ
article p { 
line-height: 1.3; 
margin: 1.3em 0; 
} 
article { 
width: 94%; 
margin: auto; 
}
max-width 
https://flic.kr/p/7nCGk3
article { max-width: 28em; }
article { max-width: 28em; }
@media only screen and (min-width:48em) { 
article { font-size: 1.1em; } 
article p { line-height: 1.4; 
margin: 1.4em aut...
http://www.mqtest.io
@media only screen and (min-width:60em) { 
article { font-size: 1.2em; } 
article p { line-height: 1.5; 
margin: 1.5em aut...
Alignment & Hyphenation 
https://flic.kr/p/8veLPW
.hyphenate { 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto; 
}
@media only screen and (max-width: 40em) { 
.hyphenate { 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto; 
} 
...
<html lang="en">
Easy to read 
https://flic.kr/p/8iCtLv
article p:first-of-type { 
font-size: 1.2em; 
}
Typeface 
https://flic.kr/p/5q1Qj1
#intro { 
font-size: 1em; 
font-family: Helvetica, sans-serif; 
}
#intro { 
font-size: 1em; 
font-family: Helvetica, sans-serif; 
} 
@media only screen and (min-width:30em) { 
#intro { 
fo...
Performance
Web Fonts 
https://flic.kr/p/51wXrK
@font-face { 
font-family: ExampleFont; 
src: url('ExampleFont.eot'); 
src: local('Example Font'), 
url('ExampleFont.eot?#...
@font-face { 
font-family: ExampleFont; 
src: url('ExampleFont.eot'); 
src: local('Example Font'), 
url('ExampleFont.eot?#...
@font-face { 
font-family: ExampleFont; 
src: url('ExampleFont.eot'); 
src: local('Example Font'), 
url('ExampleFont.eot?#...
Use fewer fonts
@font-face { 
font-family: ExampleFont; 
src: url('ExampleFont.eot'); 
}
@font-face { 
font-family: ExampleFont; 
src: url('ExampleFont.eot'); 
} 
p { font-family: Arial, sans-serif; }
@font-face { 
font-family: ExampleFont; 
src: url('ExampleFont.eot'); 
} 
p { font-family: Arial, sans-serif; } 
@media on...
System Fonts 
https://flic.kr/p/eiyWiy
http://www.jordanm.co.uk/tinytype
h1 { font-family: Helvetica, Arial, 'Droid 
Sans', sans-serif; } 
http://www.jordanm.co.uk/tinytype
<link href="http://fonts.googleapis.com/ 
css?family=Josefin+Slab 
&text=TitleofWebsite" rel="stylesheet" 
type="text/css"...
Communication 
https://flic.kr/p/6xyFnt
https://flic.kr/p/cdVB9h 
Clarissa Peterson 
Peterson/Kandy 
clarissapeterson.com 
@clarissa
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Responsive Typography II
Upcoming SlideShare
Loading in...5
×

Responsive Typography II

9,747

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
129 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,747
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
279
Comments
1
Likes
129
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Typography II"

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

×