responsive typography ii
TRANSCRIPT
Responsive Typography
https://flic.kr/p/2mjtwC
Clarissa Peterson
@clarissa
1em = default
2em = twice as big1em = default
2em = twice as big1em = 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; }span { font-size: 1.5em; }
<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; }
div { font-size: 1.1em; }
div { font-size: 1.2em; }
body { font-size: 100%; }
html { font-size: 100%; }
h1 { font-size: 32px; font-size: 2rem; }
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-width: 60em) { p { line-height: 1.5 }}
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
65586573686766
74726969
<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>
<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>
.testing { color: #f00; }
<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>
.testing { color: #f00; }
http://codepen.io/chriscoyier/pen/atebf
article p { line-height: 1.3; margin: 1.3em 0;}
article { width: 94%; margin: auto;}
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 auto; }}
@media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; }}
.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">
article p:first-of-type { font-size: 1.2em; }
#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 { font-size: 1.2em; font-family: Populaire, sans-serif; text-transform: uppercase; }}
Performance
@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;}
@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;}
@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;}
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 only screen and (min-width: 30em) { p { font-family: ExampleFont, Arial, sans-serif; }}
http://www.jordanm.co.uk/tinytype
http://www.jordanm.co.uk/tinytype
h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; }
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab&text=TitleofWebsite" rel="stylesheet" type="text/css">
https://flic.kr/p/cdVB9h
Clarissa PetersonPeterson/Kandy
clarissapeterson.com@clarissa