Próximos SlideShares
Licença: CC Attribution-NonCommercial License
Responsive Typography II
- 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; } 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; }
- 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-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
- 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 places, the animals in this book were all real characters.</p>
- <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> .testing { color: #f00; }
- 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 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; } }
- 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 { 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
- 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
Entre para ver os comentários