Slide 1

Slide 1 text

Clarissa Peterson @clarissa Responsive Typography v3 MoDevEast – Dec. 12, 2013 CSS Dev Conference – Oct. 21, 2013

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Good web typography starts with HTML, not with CSS. Start with HTML

Slide 7

Slide 7 text

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.

Heading

Subheading

This is a paragraph

Slide 8

Slide 8 text

You need to choose your typefaces before doing layout. Typeface

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Photo credit: Will Keightley http://www.flickr.com/photos/feverblue/8374850916/

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Nested elements make ems a little bit tricky. p { font-size: 1em; } li { font-size: 1.5em; }

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

  • List item
  • List item
    • Sub item
    • Sub item
  • List item

Slide 23

Slide 23 text

Since the
  • s are nested, the sub items are 2.25 (1.5x1.5) instead of 1.5.
  • Slide 24

    Slide 24 text

    Adding this will keep that from happening. li { font-size: 1.5em; } li li { font-size: 1em; }

    Slide 25

    Slide 25 text

    No content

    Slide 26

    Slide 26 text

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

    Slide 27

    Slide 27 text

    Same syntax as em. h1 { font-size: 2rem; }

    Slide 28

    Slide 28 text

    But not all browsers support it; you need fallback in pixels for IE8 and older. h1 { font-size: 32px; font-size: 2rem; }

    Slide 29

    Slide 29 text

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

    Slide 30

    Slide 30 text

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

    Slide 31

    Slide 31 text

    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)

    Slide 32

    Slide 32 text

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

    Slide 33

    Slide 33 text

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

    Slide 34

    Slide 34 text

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

    Slide 35

    Slide 35 text

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

    Slide 36

    Slide 36 text

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

    Slide 37

    Slide 37 text

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

    Slide 38

    Slide 38 text

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

    Slide 39

    Slide 39 text

    Characters per line is one of the most important qualities that makes type readable. Line Length (Measure)

    Slide 40

    Slide 40 text

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

    Slide 41

    Slide 41 text

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

    Slide 42

    Slide 42 text

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

    Slide 43

    Slide 43 text

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

    Slide 44

    Slide 44 text

    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

    Slide 45

    Slide 45 text

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

    Slide 46

    Slide 46 text

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

    Slide 47

    Slide 47 text

    You can easily turn this on an off in your CSS during designing/testing.

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

    Slide 48

    Slide 48 text

    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

    Slide 49

    Slide 49 text

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

    Slide 50

    Slide 50 text

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

    Slide 51

    Slide 51 text

    The main methods to adjust line length are changing the margins and changing the font size. Margins & Font Size

    Slide 52

    Slide 52 text

    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.

    Slide 53

    Slide 53 text

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

    Slide 54

    Slide 54 text

    If you use % for left/right margins, the margin width stays the same if the font size changes.

    Slide 55

    Slide 55 text

    Same margins as previous slide, although the font size is larger.

    Slide 56

    Slide 56 text

    If you use ems for left/right margins, the margin width changes when the font size changes.

    Slide 57

    Slide 57 text

    Same margin in ems as previous slide, but the margins get wider because the font size is larger.

    Slide 58

    Slide 58 text

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

    Slide 59

    Slide 59 text

    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.

    Slide 60

    Slide 60 text

    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/

    Slide 61

    Slide 61 text

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

    Slide 62

    Slide 62 text

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

    Slide 63

    Slide 63 text

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

    Slide 64

    Slide 64 text

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

    Slide 65

    Slide 65 text

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

    Slide 66

    Slide 66 text

    This is the page at slightly less than 42 ems.

    Slide 67

    Slide 67 text

    This is the page at slightly more than 42 ems, with a bigger font size. We changed the font size on the element, so everything inside it is bigger (both paragraph text and heading). Alternatively, you could just change the

    font size and leave the heading the same.

    Slide 68

    Slide 68 text

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

    Slide 69

    Slide 69 text

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

    Slide 70

    Slide 70 text

    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.

    Slide 71

    Slide 71 text

    Add line height to the media query. Only increase the line height for the

    (paragraph text), not everything in

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

    Slide 72

    Slide 72 text

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

    Slide 73

    Slide 73 text

    You can use max-width on individual columns, or on an element that contains all your content. #content { max-width: 120em; }

    Slide 74

    Slide 74 text

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

    Slide 75

    Slide 75 text

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

    Slide 76

    Slide 76 text

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

    Slide 77

    Slide 77 text

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

    Slide 78

    Slide 78 text

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

    Slide 79

    Slide 79 text

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

    Slide 80

    Slide 80 text

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

    Slide 81

    Slide 81 text

    At 50 ems, a media query increases the font size. @media screen and (min-width: 50em) { body { font-size: 125%; } }

    Slide 82

    Slide 82 text

    Now we’re up to 125% font size.

    Slide 83

    Slide 83 text

    Still at 125% font size...

    Slide 84

    Slide 84 text

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

    Slide 85

    Slide 85 text

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

    Slide 86

    Slide 86 text

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

    Slide 87

    Slide 87 text

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

    Slide 88

    Slide 88 text

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

    Slide 89

    Slide 89 text

    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/

    Slide 90

    Slide 90 text

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

    Slide 91

    Slide 91 text

    This is how it looks at 100% font size.

    Slide 92

    Slide 92 text

    Narrower window, font-size still 100%.

    Slide 93

    Slide 93 text

    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.

    Slide 94

    Slide 94 text

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

    Slide 95

    Slide 95 text

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

    Slide 96

    Slide 96 text

    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.

    Slide 97

    Slide 97 text

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

    Slide 98

    Slide 98 text

    But they used maximum-scale=1.0, which takes away the ability to zoom. Don’t ever do this.

    Slide 99

    Slide 99 text

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

    Slide 100

    Slide 100 text

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

    Slide 101

    Slide 101 text

    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.

    Slide 102

    Slide 102 text

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

    Slide 103

    Slide 103 text

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

    Slide 104

    Slide 104 text

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

    Slide 105

    Slide 105 text

    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 element, if you have more than one language on a particular page.

    Slide 106

    Slide 106 text

    New in CSS3 —this lets you automatically divide an element into columns. column-count

    Slide 107

    Slide 107 text

    Looking at line length again. Start here and make the browser window wider.

    Slide 108

    Slide 108 text

    No content

    Slide 109

    Slide 109 text

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

    Slide 110

    Slide 110 text

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

    Slide 111

    Slide 111 text

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

    Slide 112

    Slide 112 text

    Three columns!

    Slide 113

    Slide 113 text

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

    Slide 114

    Slide 114 text

    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.

    Slide 115

    Slide 115 text

    Add a min-height media query to change to one column if the viewport isn’t tall enough.

    Slide 116

    Slide 116 text

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

    Slide 117

    Slide 117 text

    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

    Slide 118

    Slide 118 text

    Clarissa Peterson Peterson/Kandy clarissapeterson.com petersonkandy.com @clarissa