Responsive Typography II
May. 2, 2014•0 likes•46,818 views
Download to read offline
Report
Design
Technology
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.
Clarissa PetersonFollow
Recommended
Responsive Web Design & TypographyDanny Calders
Designing Responsive WebsitesClarissa Peterson
UX & Responsive DesignClarissa Peterson
Responsive Design Tools & ResourcesClarissa Peterson
Class 4 handout w css3 using j fiddleErin M. Kidwell
Class 4 handout two column layout w mobile web designErin M. Kidwell
More Related Content
What's hot
BrightonSEO April 2019 - Tom Pool - Chrome Puppeteer, Fake Googlebot & Monito...Tom Pool
Class 3 create an absolute layout with css abs position (aptana)Erin M. Kidwell
Css for nondesignersIgnacio Coloma
Cascading Style SpeelgoedStijn Vogels
Css3 101Ignacio Coloma
Don't scrape, Glean!tommorris
Viewers also liked
Type on the Web (with WordPress)Tadpole Collective
Web Typography Fundamentals: From Gutenberg to Google v1billcenglish
A crash course in typographyMigle Migle
The Power of Typography[x]cube LABS
Web TypographyMatthew Buchanan
Webfonts: DemystifiedMel Choyce
Similar to Responsive Typography II
How do speed up web pages? CSS & HTML TricksCompare Infobase Limited
Bioinformatica p4-ioProf. Wim Van Criekinge
Code For Every Librariancmawolfe
Qt TranslationsJussi Pohjolainen
basic knowledge abot htmlAnkit Dubey
Perl.Hacks.On.Vim Perlchinaguestcf9240
More from Clarissa Peterson
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
Making the Web EasyClarissa Peterson
Responsive Design EssentialsClarissa Peterson
Content Strategy for Responsive WebsitesClarissa Peterson
UX & Responsive DesignClarissa Peterson
Responsive Design Tools & ResourcesClarissa Peterson
Recently uploaded
ANÁLISIS URBANO Y MULTIESCALAR.pdfSofiaHernandezdeAlba
designers-part1.pptxCharlesYuen7
EXHAUST EMISSION CALIBRATION OF TWO J-58AFTERBURNING TURBOJET ENGINES AT SIMU...ssuser5cb52c
Are designers ready for a product-first process?Remy Rey De Barros
Martha Schwartz.pptxAjman University
661C 6.pdfNicholas Gioia
Responsive Typography II
- 1. Responsive Typography https://flic.kr/p/2mjtwC Clarissa Peterson @clarissa
- 7. 2em = twice as big 1em = default
- 8. 2em = twice as big 1em = default .5em = half as big
- 9. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } p { font-size: 1em; }
- 10. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
- 11. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
- 12. <p>This is 1 em.</p> <div>This is 2 ems <span>(and 1.5 ems) </span>.</div>
- 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. <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; }
- 17. div { font-size: 1.1em; }
- 18. div { font-size: 1.2em; }
- 19. body { font-size: 100%; }
- 30. html { font-size: 100%; }
- 32. h1 { font-size: 32px; font-size: 2rem; }
- 34. Line Height (Leading) https://flic.kr/p/4EDFYF
- 37. p { line-height: 1; } p { line-height: 2; }
- 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 } }
- 48. p { line-height: 1.5; margin-top: 1.5em; margin-bottom: 1.5em; }
- 49. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
- 52. 45-75 Characters
- 53. 74 72 69 69 65 58 65 73 68 67 66
- 55. <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>
- 56. <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; }
- 57. <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; }
- 66. article p { line-height: 1.3; margin: 1.3em 0; } article { width: 94%; margin: auto; }
- 70. article { max-width: 28em; }
- 71. article { max-width: 28em; }
- 73. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 76. @media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
- 79. Alignment & Hyphenation https://flic.kr/p/8veLPW
- 82. .hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
- 83. @media only screen and (max-width: 40em) { .hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } }
- 84. <html lang="en">
- 85. Easy to read https://flic.kr/p/8iCtLv
- 86. article p:first-of-type { font-size: 1.2em; }
- 90. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
- 91. #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; } }
- 92. Performance
- 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. @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; }
- 96. @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; }
- 97. Use fewer fonts
- 98. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); }
- 99. @font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); } p { font-family: Arial, sans-serif; }
- 100. @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; } }
- 103. h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; } http://www.jordanm.co.uk/tinytype
- 104. <link href="http://fonts.googleapis.com/ css?family=Josefin+Slab &text=TitleofWebsite" rel="stylesheet" type="text/css">
- 106. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa