Responsive Typography

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=47 Clarissa Peterson
October 21, 2013

Responsive Typography

Your content is probably 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.

Presented at CSS Dev Conference, in Estes Park, Colorado, on October 21, 2013, and again the following day during the "Best Of" track.

Presented at MoDevEast in McLean, Virginia, on December 12, 2013.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

October 21, 2013
Tweet

Transcript

  1. Clarissa Peterson @clarissa Responsive Typography v3 MoDevEast – Dec. 12,

    2013 CSS Dev Conference – Oct. 21, 2013
  2. Covered in these slides: 1. Font Size 2. Line Height

    (Leading) 3. Line Length (Measure) (those three things work together to make text look good and easy to read) 4. Hyphenation 5. column-count
  3. Photo credit: Matt Moonlight http://www.flickr.com/photos/matt_moonlight/9173909588/

  4. Websites are about getting information to people, and that’s mostly

    done through text. So you need to make sure that your text is as easy to read as possible. Why Typography?
  5. A website can have as many media queries as you

    want. Add a media query where something needs to change - even if it’s a small thing. Don’t think of responsive websites as being made up of a few separate designs (one-column, two-column, etc.). Think of responsive websites as a range of changes across all viewport widths. Typography media queries don’t need to happen at the same breakpoints as layout changes. Media Queries
  6. Good web typography starts with HTML, not with CSS. Start

    with HTML
  7. It’s important to use the correct elements. For very old

    browsers/devices that don’t support CSS, they’ll still be able to display text using browser defaults. This is also important for accessibility. <h1>Heading</h1> <h2>Subheading</h2> <p>This is a paragraph</p>
  8. You need to choose your typefaces before doing layout. Typeface

  9. Because typefaces in the same font-size aren’t actually the same

    size. These are different fonts in the same size (in pixels). Changing the typeface later will affect your layout.
  10. Photo credit: Will Keightley http://www.flickr.com/photos/feverblue/8374850916/

  11. Pixels are inherently unresponsive. Don’t set font sizes in pixels.

    Pixels
  12. Reference pixels aren’t even the same size on every device.

    This is 320 pixels viewed on an iPhone and on a laptop screen, held next to each other. http://m.ew.com
  13. Two alternatives for font size: ems and rems. You probably

    know these in the context of converting from pixels. But it’s also possible (and more responsive) to start with responsive units and not use pixels at all. Setting Font Size
  14. Base font size for the page - 100% is the

    browser’s default font size for body text - what the browser thinks is a good reading size for that device. It’s not the same for every browser, but currently most computers/devices use 16 pixels. In the future, that may not be the case. By using responsive units now, you’re making your site more likely to look good on future devices. html { font-size: 100%; }
  15. Starting with the browser default base size makes the site

    more readable for everybody, even if the text may seem too large to some users (or to the designer). http://alistapart.com
  16. Ems are linked to the size of type. Originally derived

    from width of letter M in lead typesetting. Ems
  17. Ems are relative to the font size of the containing

    element. 1 em = 100% (full size) 1.1 em = 110% (10% larger) 2 em = 200% (twice as big)
  18. p is the base font size - h1 is twice

    as big p { font-size: 1em; } h3 { font-size: 1.3em; } h2 { font-size: 1.5em; } h1 { font-size: 2em; }
  19. None
  20. Nested elements make ems a little bit tricky. p {

    font-size: 1em; } li { font-size: 1.5em; }
  21. None
  22. <ul> <li>List item</li> <li>List item <ul> <li>Sub item</li> <li>Sub item</li>

    </ul> </li> <li>List item</li> </ul>
  23. Since the <li>s are nested, the sub items are 2.25

    (1.5x1.5) instead of 1.5.
  24. Adding this will keep that from happening. li { font-size:

    1.5em; } li li { font-size: 1em; }
  25. None
  26. Rems (root ems) are an alternative to ems. Relative to

    the document’s root element (the html element), not the parent element. Rems
  27. Same syntax as em. h1 { font-size: 2rem; }

  28. But not all browsers support it; you need fallback in

    pixels for IE8 and older. h1 { font-size: 32px; font-size: 2rem; }
  29. Responsive design doesn’t require converting pixels to ems (formulas). Just

    start with ems. Pixels to ems
  30. Converting pixels to ems gets you weird numbers, which are

    difficult to use, They can also cause problems with rounding by the browser. p { font-size: .45833333333em; }
  31. If lines are too close together/far apart, text is more

    difficult to read. It’s called leading because in lead typesetting, they would put pieces of lead between lines to add space. Line Height (leading)
  32. Leading. Photo by Marcin Wichary: http://www.flickr.com/photos/mwichary/2406450779/

  33. For line-height, use unitless numbers, which are relative to the

    font size of the element. 1 is default. p { line-height: 1 }
  34. Default of 1 - lines are close together, it’s hard

    to focus on one line at a time.
  35. line-height: 2 - the lines are too far apart, so

    it’s difficult and tiring to read
  36. line-height: 1.4 - good default to start with, but adjust

    based on typeface, line width, screen size
  37. Small screens need less line height (1.4 on left, 1.3

    on right), plus you can fit a little more on screen.
  38. Media queries to increase line height as viewport gets wider.

    p { line-height: 1.3 } @media screen and (min-width: 30em) { p { line-height: 1.4 } } @media screen and (min-width: 60em) { p { line-height: 1.5 } }
  39. Characters per line is one of the most important qualities

    that makes type readable. Line Length (Measure)
  40. Obvious that super-long lines are hard to read. Difficult for

    eyes to move from one line to the next.
  41. Lines that are too short interrupt the flow of reading.

    This makes it tiring to read because your eyes move back and forth more.
  42. Optimum characters per line for body text such as paragraphs

    (doesn’t apply to headings, etc.) 45 - 75 characters
  43. Remember: to design around line length, it’s important to select

    the typeface first, because they’re different sizes.
  44. Characters per line vary due to letter size, word length.

    Try to average 45-75. 65 58 65 73 68 67 66 74 72 69 69
  45. You should test line length as you’re designing a layout,

    to stay within the optimal range. Testing Line Length
  46. One easy way to test: count from 45th to 75th

    character on the first line, and use a span to color it. 45 75
  47. You can easily turn this on an off in your

    CSS during designing/testing. <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; }
  48. But this is even easier: after my talk at CSS

    Dev Conference, Chris Coyier made this bookmarklet that does the same thing — colors the text red between the 45th-75th characters in any text element. No need to change your HTML or CSS. http://codepen.io/chriscoyier/pen/atebf
  49. Add the bookmarklet to your browser’s bookmarks. Click it, then

    hover over the element you want to select — it will be outlined in red...
  50. And click to select that element. The 45th-75th characters will

    be colored red, and will stay red as you change the size of the browser window (unless you refresh the page.)
  51. The main methods to adjust line length are changing the

    margins and changing the font size. Margins & Font Size
  52. For 320 pixel screen (iPhone), text at base font size

    fits well in range (very handy!). For smaller screens, you may need to compromise either font size or line length to make it fit.
  53. Use narrow margins on small screens to not waste space,

    but don’t have margins of zero. The example on the previous slide is 3% margin on each side. article { margin: 15px 3%; }
  54. If you use % for left/right margins, the margin width

    stays the same if the font size changes.
  55. Same margins as previous slide, although the font size is

    larger.
  56. If you use ems for left/right margins, the margin width

    changes when the font size changes.
  57. Same margin in ems as previous slide, but the margins

    get wider because the font size is larger.
  58. On our example page, starting out with a good line

    length.
  59. Make your browser window wider until you hit the end

    of the 45-75 range. This is where you will need to add a media query.
  60. Keep a tool like this open in another tab. Once

    the browser window is at the width where you need a media query, switch to this tab and easily see that window is now 31 ems. http://mqtest.io/
  61. On our example, add a media query at 31 ems

    to increase left/right margin from 3% to 15%. @media screen and (min-width:31em) { article { margin: 15px 15%; } }
  62. This is the page at a width of slightly less

    than 31 ems.
  63. This is the page at slightly more than 31 ems.

    The media query has increased the margins.
  64. Again expand the browser window to the end of the

    45-75 character range. Now we’re at 42 ems.
  65. Media query to increase font size, from 1 em up

    to 1.1 em. Larger fonts will look okay on larger screens. It’s better to include more media queries with small changes in each one than to use only a few media queries and make dramatic jumps in font size. @media screen and (min-width:42em) { article { font-size: 1.1em } }
  66. This is the page at slightly less than 42 ems.

  67. This is the page at slightly more than 42 ems,

    with a bigger font size. We changed the font size on the <article> element, so everything inside it is bigger (both paragraph text and heading). Alternatively, you could just change the <p> font size and leave the heading the same.
  68. Make your browser window wider again to the end of

    45-75 character range.
  69. A media query here changed both the margins and the

    font size.
  70. Since the font size is larger, and we’re on a

    wider screen, it would look better if we increased the line height a bit.
  71. Add line height to the media query. Only increase the

    line height for the <p> (paragraph text), not everything in <article>, because the heading line height doesn’t need to change. @media screen and (min-width:55em) { article { font-size: 1.2em } p { line-height: 1.5 } }
  72. @media screen and (min-width:90em) { article { max-width: 38em; }

    } Eventually the font size is the largest you want to make it, and you want to keep the content from getting any wider. Use max-width so layout stops expanding for super-wide screens.
  73. You can use max-width on individual columns, or on an

    element that contains all your content. #content { max-width: 120em; }
  74. Real example, Trent Walton’s site. 45-75 characters highlighted. http://trentwalton.com

  75. Starting at the most narrow width, the container is 88%

    (6% margin on each side). The font-isze starts at 100% (base font size for the browser). body { font-size: 100%; } .container { width: 88%; margin-left: auto; margin-right: auto; max-width: 1260px; }
  76. The site at the most narrow width — the content

    width is 88%.
  77. As we make the browser window wider, the content is

    still 88% width.
  78. There’s a media query at 37.5 em, where the content

    width changes to 68% (85% × 80%) and the font size increases. @media screen and (min-width: 37.5em) { .container { width: 85%; } .article .centered p { width: 80%; } body { font-size: 112.5%; } }
  79. Making the browser window slightly wider, we get content at

    68% width and 112.5% font size.
  80. Wider window, still at 68% width and 112.5% font size.

  81. At 50 ems, a media query increases the font size.

    @media screen and (min-width: 50em) { body { font-size: 125%; } }
  82. Now we’re up to 125% font size.

  83. Still at 125% font size...

  84. At 65 ems, a media query increases the font size

    again, to 137.5%. @media screen and (min-width: 64.375em) { body {font-size: 137.5%;} }
  85. Now we’re at a font size of 137.5%.

  86. At 75 ems, a media query increases the font size,

    but only if screen is tall enough (so not for wide laptop screens where the vertical space is taken up with lots of browser toolbars) @media screen and (min-width: 75em) and (min-height: 31.25em) { body {font-size: 150%;} }
  87. Here we’re up to a font-size of 150%. It looks

    good on a wide screen.
  88. Using max-width to keep the layout from getting wider. @media

    screen and (min-width: 106.875em) and (min-height: 50em) { body {font-size: 162.5%;} .container {max-width:1360px;} }
  89. This site uses max-width instead of min-width for media queries,

    so I’ll show you starting from widest screen instead of narrowest screen. http://wearyoubelong.com/
  90. Start with 100% font size, then a media query takes

    it down to 90% at 800 pixels or narrower, and 80% at 680 or narrower. (Yes, media queries should be in ems.) body { font-size: 100%; } @media screen and (max-width:800px) { body { font-size:90%; } } @media screen and (max-width:680px) { body { font-size:80%; } }
  91. This is how it looks at 100% font size.

  92. Narrower window, font-size still 100%.

  93. As the window gets narrower, we’re down to 90%. The

    media query changes the font size on the body element, so all of the text gets smaller.
  94. At a width of 680 pixels, the font-size goes down

    to 80%.
  95. At a narrower screen width, even though the font-size is

    80%, the heading/intro text takes up whole screen.
  96. On iPhone it’s even worse. It wouldn’t be a good

    idea to make this particular typeface smaller (it would be hard to read), but you could use a media query to change the typeface on narrow screens. Also, don’t use all caps for long sections of text like this.
  97. Further down the page, the text is 80% of the

    browser default. It’s pretty small. I had trouble reading it, and wanted to zoom in on my phone’s screen...
  98. But they used maximum-scale=1.0, which takes away the ability to

    zoom. Don’t ever do this. <meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0;">
  99. Also, there’s a lot of wasted space on the right

    at the end of lines. Hyphenation would help with this.
  100. You can even out the length of lines by letting

    long words wrap onto next line. Hyphenation
  101. The left example has no hyphenation, the right has hyphenation.

    On left, look at second-to-last line, the words look too spaced out. Hyphenation is most important on small screens, to maximize use of space.
  102. On non-justified text, hyphenation makes the right margin look less

    ragged.
  103. The hyphen property is new, so you need prefixes. Opera

    and Chrome don’t support hyphenation at all, but that’s okay. This is an example of progressive enhancement. Hyphens make the design better for browsers that can support it, but the design is still perfectly okay for users with browsers that don’t support hyphenation. p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
  104. Hyphens are especially important for narrow screens, but you can

    use a media query to remove hyphens for wider viewports. @media screen and (min-width:30em) { p { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } }
  105. You have to specify a language (i.e., English). If you

    leave it out, the browser won’t hyphenate. If you specify the wrong language, the browser will still add hyphens, but weird things may happen. Note: you can specify language on elements other than the <html> element, if you have more than one language on a particular page. <html lang=”en-US”>
  106. New in CSS3 —this lets you automatically divide an element

    into columns. column-count
  107. Looking at line length again. Start here and make the

    browser window wider.
  108. None
  109. ... And a media query divides it into two columns

    when the viewport is wide enough. People are used to reading down on web pages, not across, so use this sparingly. Don’t use multiple columns for regular body text, but it would be okay on something like an About page, if you want to be a bit artistic.
  110. @media screen and (min-width: 48em) { #content { width: 90%;

    -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4em; -webkit-column-gap: 4em; column-gap: 4em; } } column-count tells the browser how many columns there should be; column-gap is the space between columns. There are other CSS properties for adding a line between columns, etc.
  111. Prefixes for moz/webkit. Column count is supported in IE 10

    and Opera without prefixes. It’s not supported in IE9 or earlier, so content will stay in one column — if it doesn't’ look okay, use conditional comments to add CSS that’s specific to old IE. @media screen and (min-width: 48em) { #content { width: 90%; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4em; -webkit-column-gap: 4em; column-gap: 4em; } }
  112. Three columns!

  113. CSS for 3 columns @media screen and (min-width: 70em) {

    #content { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; } }
  114. You need to make sure there’s enough vertical space so

    users won’t need to scroll up and down to read. You can use a media query to check for vertical space.
  115. Add a min-height media query to change to one column

    if the viewport isn’t tall enough.
  116. With this media query, only use multiple columns if the

    viewport is a minimum height of 450 pixels. @media screen and (min-width: 70em) and (min-height: 450px) { /* columns */ }
  117. Responsive Typography Resources The Elements of Typographic Style Applied to

    the Web – Richard Rutter http://webtypography.net/toc/ Fluid Type – Trent Walton http://trentwalton.com/2012/06/19/fluid-type/ Responsive Web Typography – Jason Cranford Teague http://www.jasonspeaking.com/rwt/#/ Web Typography You Should Do Now – Richard Rutter http://webtypography.net/talks/sxsw2013/ Prototyping Responsive Typography – Viljami Salminen http://viljamis.com/blog/2013/prototyping-responsive-typography/ Responsive Web Design and Typography – Danny Calderst http://www.slideshare.net/dannycalders/typography-responsive-web-design
  118. Clarissa Peterson Peterson/Kandy clarissapeterson.com petersonkandy.com @clarissa