107
Clarissa Peterson @clarissa Responsive Typography v4 In Control - February 18, 2014 MoDev East 2013, CSS Dev Conference 2013

Responsive Typography

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Responsive Typography

Clarissa Peterson@clarissa

ResponsiveTypography

v4

In Control - February 18, 2014MoDev East 2013, CSS Dev Conference 2013

Page 2: Responsive Typography

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

Page 3: Responsive Typography

Photo credit: Matt Moonlight http://www.flickr.com/photos/matt_moonlight/9173909588/

Page 4: Responsive Typography

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?

Page 5: Responsive Typography

A website can have as many media queries as you want. Add a media query where somethingneeds 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 arange of changes across all viewport widths. Typography media queries

don’t need to happen at the same breakpoints as layout changes.

Media Queries

Page 6: Responsive Typography

Good web typography starts with HTML, not with CSS.

Start with HTML

Page 7: Responsive Typography

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>

Page 8: Responsive Typography

You need to choose your typefaces before doing layout.

Typeface

Page 9: Responsive Typography

Because typefaces in the same font-size aren’t actually the same size. These are different fontsin the same size (in pixels). Changing the typeface later will affect your layout.

Page 10: Responsive Typography

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

Pixels

Page 11: Responsive Typography

Reference pixels aren’t even the same size on every device. This is 320 pixels viewedon an iPhone and on a laptop screen, held next to each other. http://m.ew.com

Page 12: Responsive Typography

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

Page 13: Responsive Typography

Base font size for the page - 100% is the browser’s default font size for body text - what thebrowser 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%; }

Page 14: Responsive Typography

Starting with the browser default base size makes the site more readable for everybody, even ifthe text may seem too large to some users (or to the designer). http://alistapart.com

Page 15: Responsive Typography

Ems are linked to the size of type. Originally derived from width of letter M in lead typesetting.

Ems

Page 16: Responsive Typography

Ems are relative to the font size of the containing element.

1 em = default

2 em = twice as big

.5 em = half of default

Page 17: Responsive Typography

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

Page 18: Responsive Typography
Page 19: Responsive Typography

Nested elements make ems a little bit tricky.

p { font-size: 1em; }li { font-size: 1.5em; }

Page 20: Responsive Typography
Page 21: Responsive Typography

<ul><li>List item</li><li>List item <ul> <li>Sub item</li> <li>Sub item</li> </ul></li><li>List item</li></ul>

Page 22: Responsive Typography

Since the <li>s are nested, the sub items are 2.25 (1.5x1.5) instead of 1.5.

Page 23: Responsive Typography

Adding this will keep that from happening.

li { font-size: 1.5em; }li li { font-size: 1em; }

Page 24: Responsive Typography
Page 25: Responsive Typography

Rems (root ems) are an alternative to ems. Relative to the document’sroot element (the html element), not the parent element.

Rems

Page 26: Responsive Typography

Same syntax as em.

h1 { font-size: 2rem; }

Page 27: Responsive Typography

But not all browsers support it; you need fallback in pixels for IE8 and older.

h1 { font-size: 32px; font-size: 2rem; }

Page 28: Responsive Typography

Responsive design doesn’t require converting pixels to ems (formulas). Just start with ems.

Pixels to ems

Page 29: Responsive Typography

Converting pixels to ems gets you weird numbers, which are difficultto use, They can also cause problems with rounding by the browser.

p { font-size: .45833333333em; }

Page 30: Responsive Typography

p { font-size: .46; }

And you don’t need so many decimal points.

Page 31: Responsive Typography

If lines are too close together/far apart, text is more difficult to read. It’s called leadingbecause in lead typesetting, they would put pieces of lead between lines to add space.

Line Height (leading)

Page 32: Responsive Typography

Leading. Photo by Marcin Wichary: http://www.flickr.com/photos/mwichary/2406450779/

Page 33: Responsive Typography

For line-height, use unitless numbers, which are relative to the font size of the element. 1 is default.

p { line-height: 1 }

Page 34: Responsive Typography

Default of 1 - lines are close together, it’s hard to focus on one line at a time.

Page 35: Responsive Typography

line-height: 2 - the lines are too far apart, so it’s difficult and tiring to read

Page 36: Responsive Typography

line-height: 1.4 - good default to start with, but adjust based on typeface, line width, screen size

Page 37: Responsive Typography

Small screens need less line height (1.4 on left, 1.3 on right), plus you can fit a little more on screen.

Page 38: Responsive Typography

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

Page 39: Responsive Typography

Characters per line is one of the most important qualities that makes type readable.

Line Length (Measure)

Page 40: Responsive Typography

Obvious that super-long lines are hard to read. Difficult for eyes to move from one line to the next.

Page 41: Responsive Typography

Lines that are too short interrupt the flow of reading. This makesit tiring to read because your eyes move back and forth more.

Page 42: Responsive Typography

Optimum characters per line for body text such as paragraphs (doesn’t apply to headings, etc.)

45 - 75 characters

Page 43: Responsive Typography

Remember: to design around line length, it’s important to select thetypeface first, because they’re different sizes.

Page 44: Responsive Typography

Characters per line vary due to letter size, word length. Try to average 45-75.

65586573686766

74726969

Page 45: Responsive Typography

You should test line length as you’re designing a layout, to stay within the optimal range.

Testing Line Length

Page 46: Responsive Typography

One easy way to test: count from 45th to 75th character on the first line, and use a span to color it.

45 75

Page 47: Responsive Typography

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

Page 48: Responsive Typography

But this is even easier: after my talk at CSS Dev Conference, Chris Coyier made thisbookmarklet that does the same thing — colors the text red between the 45th-75th characters inany text element. No need to change your HTML or CSS. http://codepen.io/chriscoyier/pen/atebf

Page 49: Responsive Typography

Add the bookmarklet to your browser’s bookmarks. Click it, then hoverover the element you want to select — it will be outlined in red...

Page 50: Responsive Typography

And click to select that element. The 45th-75th characters will be colored red, and will stayred as you change the size of the browser window (unless you refresh the page.)

Page 51: Responsive Typography

The main methods to adjust line length are changing the margins and changing the font size.

Margins & Font Size

Page 52: Responsive Typography

For 320 pixel screen (iPhone), text at base font size fits well in range (very handy!). For smallerscreens, you may need to compromise either font size or line length to make it fit.

Page 53: Responsive Typography

Use narrow margins on small screens to not waste space, but don’t havemargins of zero. The example on the previous slide is 3% margin on each side.

article { margin: 15px 3%;}

Page 54: Responsive Typography

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

Using width also gives you margins.

Page 55: Responsive Typography

You can use either percentage or margins to set the width of an element.

Page 56: Responsive Typography

If you use percentage, the element width will change with the page width.

Page 57: Responsive Typography

Using ems means the element width depends on the font size.

Page 58: Responsive Typography

Changing the font size changes the width of the element.

Page 59: Responsive Typography

On our example page, starting out with a good line length.

Page 60: Responsive Typography

Make your browser window wider until you hit the end of the 45-75range. This is where you will need to add a media query.

Page 61: Responsive Typography

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/

Page 62: Responsive Typography

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 { width: 70% } }

Page 63: Responsive Typography

This is the page at a width of slightly less than 31 ems.

Page 64: Responsive Typography

This is the page at slightly more than 31 ems. The media query has increased the margins.

Page 65: Responsive Typography

Again expand the browser window to the end of the 45-75 character range. Now we’re at 40 ems.

Page 66: Responsive Typography

Media query to increase font size, from 1 em up to 1.1 em. Larger fonts will look okayon 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:40em) { article { font-size: 1.1em }}

Page 67: Responsive Typography

This is the page at slightly less than 40 ems.

Page 68: Responsive Typography

This is the page at slightly more than 40 ems, with a bigger font size. We changed the font sizeon 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.

Page 69: Responsive Typography

Make your browser window wider again to the end of 45-75 character range.

Page 70: Responsive Typography

A media query here changed both the margins and the font size.

Page 71: Responsive Typography

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.

Page 72: Responsive Typography

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

Page 73: Responsive Typography

Eventually the font size is the largest you want to make it, and you want to keep the contentfrom getting any wider. Use max-width so layout stops expanding for super-wide screens. You can use

max-width on individual columns, or on an element that contains all your content.

#content { max-width: 63em; }

Page 74: Responsive Typography

Real example, Trent Walton’s site. 45-75 characters highlighted. http://trentwalton.com

Page 75: Responsive Typography

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

Page 76: Responsive Typography

The site at the most narrow width — the content width is 88%.

Page 77: Responsive Typography

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

Page 78: Responsive Typography

There’s a media query at 37.5 em, where the content widthchanges 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%; }}

Page 79: Responsive Typography

Making the browser window slightly wider, we get content at 68% width and 112.5% font size.

Page 80: Responsive Typography

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

Page 81: Responsive Typography

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

@media screen and (min-width: 50em) { body { font-size: 125%; }}

Page 82: Responsive Typography

Now we’re up to 125% font size.

Page 83: Responsive Typography

Still at 125% font size...

Page 84: Responsive Typography

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

Page 85: Responsive Typography

Now we’re at a font size of 137.5%.

Page 86: Responsive Typography

At 75 ems, a media query increases the font size, but only if screen is tall enough (so not forwide 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%;}}

Page 87: Responsive Typography

Here we’re up to a font-size of 150%. It looks good on a wide screen.

Page 88: Responsive Typography

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

Page 89: Responsive Typography

This site uses max-width instead of min-width for media queries, so I’ll show youstarting from widest screen instead of narrowest screen. http://wearyoubelong.com/

Page 90: Responsive Typography

Start with 100% font size, then a media query takes it down to 90% at 800 pixels ornarrower, 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%; }}

Page 91: Responsive Typography

This is how it looks at 100% font size.

Page 92: Responsive Typography

Narrower window, font-size still 100%.

Page 93: Responsive Typography

As the window gets narrower, we’re down to 90%. The media querychanges the font size on the body element, so all of the text gets smaller.

Page 94: Responsive Typography

At a width of 680 pixels, the font-size goes down to 80%.

Page 95: Responsive Typography

At a narrower screen width, even though the font-size is80%, the heading/intro text takes up whole screen.

Page 96: Responsive Typography

On iPhone it’s even worse. It wouldn’t be a good idea to make this particular typefacesmaller (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.

Page 97: Responsive Typography

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

Page 98: Responsive Typography

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

Page 99: Responsive Typography

Also, there’s a lot of wasted space on the right at the end of lines. Hyphenation would help with this.

Page 100: Responsive Typography

You can even out the length of lines by letting long words wrap onto next line.

Hyphenation

Page 101: Responsive Typography

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.

Page 102: Responsive Typography

On non-justified text, hyphenation makes the right margin look less ragged.

Page 103: Responsive Typography

The hyphen property is new, so you need prefixes. Opera and Chrome don’t supporthyphenation 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 isstill perfectly okay for users with browsers that don’t support hyphenation.

p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}

Page 104: Responsive Typography

Hyphens are especially important for narrow screens, butyou 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; }}

Page 105: Responsive Typography

You have to specify a language (i.e., English). If you leave it out, the browser won’thyphenate. If you specify the wrong language, the browser will still add hyphens, butweird 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”>

Page 106: Responsive Typography

Responsive Typography Resources

The Elements of Typographic Style Applied to the Web – Richard Rutterhttp://webtypography.net/toc/

Fluid Type – Trent Waltonhttp://trentwalton.com/2012/06/19/fluid-type/

Responsive Web Typography – Jason Cranford Teaguehttp://www.jasonspeaking.com/rwt/#/

Web Typography You Should Do Now – Richard Rutterhttp://webtypography.net/talks/sxsw2013/

Prototyping Responsive Typography – Viljami Salminenhttp://viljamis.com/blog/2013/prototyping-responsive-typography/

Responsive Web Design and Typography – Danny Caldersthttp://www.slideshare.net/dannycalders/typography-responsive-web-design

Page 107: Responsive Typography

Clarissa Peterson

@clarissaclarissapeterson.com