Your SlideShare is downloading. ×
Responsive Web Design & Typography
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design & Typography

1,291
views

Published on

My presentation about typography and responsive web design for Fronteers Belgium at Inventis, April 2012

My presentation about typography and responsive web design for Fronteers Belgium at Inventis, April 2012

Published in: Design

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,291
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Responsive Web Design and Typography Fronteers meeting @ Inventis, 10 april 2012
    • 2. 2011. This is how it all started...
    • 3. www.alistapart.com/articles/responsive-web-design/
    • 4. Responsive web design+ fluid grids+ media queries+ flexible imagesI won’t be talking about flexible media today.
    • 5. Back to 1994. This early website was completely fluid ( we might even say responsive? ).
    • 6. This is what a 640px wide window looks like today (on a 13” MacBook Air)
    • 7. 1997
    • 8. “The web’s content must be build to travelacross vast networks to unknown devices andbrowsers.” - Jeffrey Veen, Hotwired Style, 1997
    • 9. www.alistapart.com/articles/dao/ 2000
    • 10. “Make pages which are adaptable. Make pageswhich are accessible, regardless of the browser,platform or screen that your reader chooses ormust use to access your pages.” - John Allsopp, A List Apart, 2000
    • 11. clagnut.com/blog/1663/ 2006
    • 12. “There’s an different approach to web pagelayout which is gradually getting some traction.The idea is that the layout is changed to bestaccommodate the window size.” - Richard Rutter, own blog, 2006
    • 13. www.jrvelasco.com Example: when the screen was wide enough, a third column was shown
    • 14. This was done with javascript, measuring the viewport width.
    • 15. Also in 2006. A smart man wrote a smart book.
    • 16. “... increasing a page’s flexibility and takingnecessary steps to ensure that it’s readable in asmany circumstances as possible...” - Dan Cederholm, Bulletproof Web Design, 2006 This time focusing on readability instead of layout.
    • 17. www.simplebits.com/publications/bulletproof
    • 18. This is the book’s example site.
    • 19. Bulletproof test: increase the font size by a few notches
    • 20. The latest release of the book incorporates responsive web design principles.
    • 21. So what happened between 2006 and 2010?
    • 22. I truely believe that we would not be were we are today if it weren’t for the iPhone.
    • 23. How do we keep our texts readable in such a flexible environment?
    • 24. Responsive Web Design and Typography
    • 25. Typography readability + characterCharacter: does it represent the client or message?
    • 26. A great example of readability.
    • 27. If people need this to be able to read your website...
    • 28. ...you did something wrong. (example: 11px grey Arial body text)
    • 29. How do we know it’s readable?
    • 30. “Read!” - meRead your text. Read it a lot. Is it easy to read?
    • 31. Typographynumber of fonts Hint: don’t use too many.
    • 32. One font
    • 33. aworkinglibrary.com
    • 34. seedconference.com
    • 35. Two fonts
    • 36. lostworldsfairs.com/atlantis
    • 37. Readable text font size measure leadingMeasure and leading [pronounced: ledding] come from the days of typesetting.
    • 38. Readable text font size line length line spacing In more human language.
    • 39. www.informationarchitects.jp/en/100e2r/
    • 40. 1em ≠ 1em1 em was originally the width of an uppercase letter M set in lead.
    • 41. 16px ≠ 16px
    • 42. The Adventures of Sherlock Holmes48px GeorgiaThe Adventures of Sherlock Holmes48px Times New Roman
    • 43. M288px Georgia288px Times New Roman
    • 44. The Adventures of Sherlock Holmes48px GeorgiaThe Adventures of Sherlock Holmes48px Helvetica
    • 45. M 288px Georgia 288px HelveticaToday, in the digital world, it is harder to define what 1 em exactly is.
    • 46. ... 16 18 21 24 36 48 The typographic scaleThe typographic scale is a standard also going back to the days of typesetting.
    • 47. 16px 18px 21px 24px 36px 48px The typographic scale More suitable for titles on larger screens
    • 48. 364824
    • 49. 16px 18px 21px 24px 36px 48px The typographic scale Looking better on smaller screens (tablets, iPad,...)
    • 50. 16px 18px 21px 24px 36px 48px The typographic scale Even smaller for mobile and small screens.
    • 51. Better font size Larger screens need a larger font size,smaller screens need a smaller font size.
    • 52. body { font-size: 100%; } p{ font-size: 1em; //16px }Great way of working. If you ever need to scale, you just need to change the root size.
    • 53. body { font-size: 100%; } ul { font-size: 1em; //16px } footer ul { font-size: 0.75em; //12px } footer ul p { font-size: 1.33em; //? }But it can get complicated when nesting elements.
    • 54. body { font-size: 100%; } ul { font-size: 1rem; //16px } footer ul { font-size: 0.75rem; //12px } footer ul p { font-size: 1rem; //16px }rem (root em) relates back to the root, not to the parent element.
    • 55. caniuse.com
    • 56. Readable text font size line length line spacing
    • 57. “Anything from 45 to 75 characters iswidely regarded as a satisfactory length ofline for a single-column page...” - The Elements of Typographic Style Applied to the Web
    • 58. A handy way of showing character 45 and 75 within a text. Hat tip to Trent Walton
    • 59. Readable text font sizeline length: columns line spacing
    • 60. @media only screen and (min-width: 35em) { #container { -webkit-column-count: 2; -webkit-column-gap: 20px; }} One way of dealing with long lines of text is to create columns.
    • 61. The drawback is that people might need to scroll down the first column, up the second...
    • 62. @media only screen and (min-width: 35em) and (min-height: 40em) { #container { -webkit-column-count: 2; -webkit-column-gap: 20px; }} That’s why you can combine columns with a minimum height.
    • 63. Side note: hyphenation
    • 64. blog.fontdeck.com/post/9037028497/hyphens
    • 65. p{ -webkit-hyphens:auto;}
    • 66. <!DOCTYPE HTML> <html lang="en-US"> <head>Hyphenation uses the page’s language to look up the dictionary.
    • 67. Readable text font sizeline length: max-width line spacing
    • 68. Too long lines to read...
    • 69. #container { max-width: 45em; margin: 0 auto;}
    • 70. Aaah. Perfect.
    • 71. Better line lengthCreate columns when height allowed, use maximum width otherwise.
    • 72. Readable text font size line length line spacing
    • 73. p{ line-height: 1.5; }Generally a good line height for larger screen sizes.
    • 74. @media only screen and (max-width: 45em) { p{ line-height: 1.45; }} Adjusted for smaller screens...
    • 75. @media only screen and (max-width: 22em) { p{ line-height: 1.4; }} ... and even more for mobile and very small screens.
    • 76. “What we need is a fluid way to set line height....Molten leading would maintain a specific font-size while adjusting line-height based on width....What I’m talking about is augmenting CSS withrange rules (effectively, min/max line-height) thatdon’t yet exist, but should for the sake offluidity.” - Tim Brown, Molten Leading, 2012 It would be nice if we had a min-line-height, like we have a min-width.
    • 77. github.com/jimjeffers/jQuery-minLineHeight A jQuery plugin until CSS catches up.
    • 78. Better line spacingWider paragraphs need more line height.
    • 79. Headlines fittext
    • 80. fittextjs.com
    • 81. Fittext makes sure the title scales automatically when the screen is resized.
    • 82. <script src="js/jquery.fittext.js"></script><script> jQuery(document).ready(function($){ $(".fit").fitText(0.7); });</script>You have to play around with the value. A bigger value makes the text smaller.
    • 83. Detailslettering kerning other
    • 84. Detailslettering kerning other
    • 85. letteringjs.com
    • 86. <script src="js/jquery.lettering-0.6.1.min.js"></script><script> jQuery(document).ready(function($) { $("h2").lettering(); });</script>.char1, .char4, .char19, .char26, .char30 { color: #FF0067;} You can use lettering to target and style individual letters...
    • 87. <script src="js/jquery.lettering-0.6.1.min.js"></script><script> jQuery(document).ready(function($) { $("h2").lettering(); });</script>.char1, .char4, .char19, .char26, .char30 { color: #FF0067;} Always remember that you are absolutely unique. Just like everyone else.
    • 88. <script src="js/jquery.lettering-0.6.1.min.js"></script><script> jQuery(document).ready(function($) { $("h2").lettering("words"); });</script>.word4, .word9 { color: #FF0067;} ... or words ...
    • 89. <script src="js/jquery.lettering-0.6.1.min.js"></script><script> jQuery(document).ready(function($) { $("h2").lettering("words"); });</script>.word4, .word9 { color: #FF0067;} Always remember that you are absolutely unique. Just like everyone else.
    • 90. <script src="js/jquery.lettering-0.6.1.min.js"></script><script> jQuery(document).ready(function($) { $("h2").lettering("lines"); });</script>.line2 { color: #FF0067;} ... or lines.
    • 91. <script src="js/jquery.lettering-0.6.1.min.js"></script><script> jQuery(document).ready(function($) { $("h2").lettering("lines"); });</script>.line2 { color: #FF0067;} Always remember that you are absolutely unique. Just like everyone else.
    • 92. trentwalton.com/css3/type
    • 93. www.strangenative.com/foldup
    • 94. Detailslettering kerning other
    • 95. aestheticallyloyal.com/public/optimize-legibility
    • 96. h2 { text-rendering: optimizeLegibility;} You can use CSS for kerning...
    • 97. could cause a performance hit! ... but be aware of the side effects. Use only on titles.
    • 98. typebutter.com ... or you could use a jQuery plugin in the meanwhile. Still, only use on titles.
    • 99. Details lettering kerning otherAlias “everything else Trent Walton does is awesome”.
    • 100. trentwalton.com/category/notes
    • 101. The date format changes with the available space. Told you, it’s a detail!
    • 102. Fittext used in combination with CSS3 goodness.
    • 103. Selected text colour matches the article’s colours.
    • 104. The future?
    • 105. beta.typecastapp.com
    • 106. Setting type in an infinite canvas...
    • 107. with access to thousands of web fonts...
    • 108. and CSS automagically created for you!
    • 109. An example of a page made entirely in Typecast without...
    • 110. ... and with a grid to show the vertical rhythm.
    • 111. simpleasmilk.co.uk
    • 112. ResourcesInterested and wanting to read more on web typography? Look no further!
    • 113. webtypography.net/toc/
    • 114. jasonsantamaria.com/articles/
    • 115. trentwalton.com
    • 116. nicewebtype.com
    • 117. 8faces.com
    • 118. Thank yout @dannycalders