Responsive Typography

  • View

  • Download

Embed Size (px)


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 Snow*Mobile (February 2014), In Control (February 2014), MoDevEast (December 2013) and CSS Dev Conference (October 2013).

Text of Responsive Typography

  • Clarissa Peterson @clarissa Responsive Typography In Control - February 18, 2014 v4 MoDev East 2013, CSS Dev Conference 2013
  • 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
  • Photo credit: Matt Moonlight
  • Why Typography? Websites are about getting information to people, and thats mostly done through text. So you need to make sure that your text is as easy to read as possible.
  • Media Queries A website can have as many media queries as you want. Add a media query where something needs to change - even if its a small thing. Dont 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 dont need to happen at the same breakpoints as layout changes.
  • Start with HTML Good web typography starts with HTML, not with CSS.
  • Heading Subheading

    This is a paragraph

    Its important to use the correct elements. For very old browsers/devices that dont support CSS, theyll still be able to display text using browser defaults. This is also important for accessibility.
  • Typeface You need to choose your typefaces before doing layout.
  • Because typefaces in the same font-size arent actually the same size. These are different fonts in the same size (in pixels). Changing the typeface later will affect your layout.
  • Pixels Pixels are inherently unresponsive. Dont set font sizes in pixels.
  • Reference pixels arent 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.
  • Setting Font Size Two alternatives for font size: ems and rems.You probably know these in the context of converting from pixels. But its also possible (and more responsive) to start with responsive units and not use pixels at all.
  • html { font-size: 100%; } Base font size for the page - 100% is the browsers default font size for body text - what the browser thinks is a good reading size for that device. Its 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, youre making your site more likely to look good on future devices.
  • 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).
  • Ems Ems are linked to the size of type. Originally derived from width of letter M in lead typesetting.
  • 1 em = default 2 em = twice as big .5 em = half of default Ems are relative to the font size of the containing element.
  • p { font-size: 1em; } h3 { font-size: 1.3em; } h2 { font-size: 1.5em; } h1 { font-size: 2em; } p is the base font size - h1 is twice as big
  • p { font-size: 1em; } li { font-size: 1.5em; } Nested elements make ems a little bit tricky.
    • List item
    • List item
      • Sub item
      • Sub item
    • List item
  • Since the
  • s are nested, the sub items are 2.25 (1.5x1.5) instead of 1.5.
  • li { font-size: 1.5em; } li li { font-size: 1em; } Adding this will keep that from happening.
  • Rems Rems (root ems) are an alternative to ems. Relative to the documents root element (the html element), not the parent element.
  • h1 { font-size: 2rem; } Same syntax as em.
  • h1 { font-size: 32px; font-size: 2rem; } But not all browsers support it; you need fallback in pixels for IE8 and older.
  • Pixels to ems Responsive design doesnt require converting pixels to ems (formulas). Just start with ems.
  • p { font-size: .45833333333em; } Converting pixels to ems gets you weird numbers, which are difcult to use, They can also cause problems with rounding by the browser.
  • p { font-size: .46; } And you dont need so many decimal points.
  • Line Height (leading) If lines are too close together/far apart, text is more difcult to read. Its called leading because in lead typesetting, they would put pieces of lead between lines to add space.
  • Leading. Photo by Marcin Wichary:
  • p { line-height: 1 } For line-height, use unitless numbers, which are relative to the font size of the element. 1 is default.
  • Default of 1 - lines are close together, its hard to focus on one line at a time.
  • line-height: 2 - the lines are too far apart, so its difcult and tiring to read
  • line-height: 1.4 - good default to start with, but adjust based on typeface, line width, screen size
  • Small screens need less line height (1.4 on left, 1.3 on right), plus you can t a little more on screen.
  • 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 } } Media queries to increase line height as viewport gets wider.
  • Line Length (Measure) Characters per line is one of the most important qualities that makes type readable.
  • Obvious that super-long lines are hard to read. Difcult for eyes to move from one line to the next.
  • Lines that are too short interrupt the ow of reading. This makes it tiring to read because your eyes move back and forth more.
  • 45 - 75 characters Optimum characters per line for body text such as paragraphs (doesnt apply to headings, etc.)
  • Remember: to design around line length, its important to select the typeface rst, because theyre different sizes.
  • 74 72 69 69 65 58 65 73 68 67 66 Characters per line vary due to letter size, word length. Try to average 45-75.
  • Testing Line Length You should test line length as youre designing a layout, to stay within the optimal range.
  • 45 75 One easy way to test: count from 45th to 75th character on the rst line, and use a span to color it.
  • These stories are true. Although I have left the strict line of historical truth in many places, the animals in this book were all real characters.

    .testing { color: #f00; } You can easily turn this on an off in your CSS during designing/testing.
  • 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.
  • Add the bookmarklet to your browsers bookmarks. Click it, then hover over the element you want to select it will be outlined in red...
  • 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.)