Responsive Typography

https://flic.kr/p/2mjtwC

Clarissa Peterson

@clarissa

Communication

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

Default Font Sizehttps://flic.kr/p/4r1D8w

body { font-size: 100%; }

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

Scale

https://flic.kr/p/dhufQk

http://skinnyties.com/

http://skinnyties.com/

http://www.linksture.com/

http://www.linksture.com/

http://www.brandaiddesignco.com

http://www.brandaiddesignco.com

http://www.tilde.io/

http://www.tilde.io/

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

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

https://flic.kr/p/eYEFGY

Ems

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; }

Thoughtful CSS

https://flic.kr/p/bUxzCm

div { font-size: 1.1em; }

div { font-size: 1.2em; }

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

Rems

html { font-size: 100%; }

Pixel 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-width: 60em) {p { line-height: 1.5 }}

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

65586573686766

74726969

.testing { color: #f00; }

.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>

.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>

http://codepen.io/chriscoyier/pen/atebf

http://trentwalton.com

http://trentwalton.com

http://trentwalton.com

http://trentwalton.com

http://trentwalton.com

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

article { width: 94%; margin: auto;}

max-widthhttps://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 auto; }}

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 auto; }}

Media Queries

https://flic.kr/p/ajTNcB

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

Alignment & Hyphenationhttps://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; }}

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 { font-size: 1.2em; font-family: Populaire, sans-serif; text-transform: uppercase; }}

Performance

Web Fonts

https://flic.kr/p/51wXrK

@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; }}

System Fonts

https://flic.kr/p/eiyWiy

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">

Communication

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

https://flic.kr/p/cdVB9h

Clarissa PetersonPeterson/Kandy

clarissapeterson.com@clarissa