Slide 1

Slide 1 text

Responsive Typography W R A P - U P Ilya Pukhalski May, 2014

Slide 2

Slide 2 text

@pukhalski ! Solution Architect, EPAM Systems Lecturer, British Higher School of Art & Design

Slide 3

Slide 3 text

— Mark Bowley “Good typography comes from paying “attention to tiny details as this can “make the difference between graphic “design work that is just acceptable “or really good.”

Slide 4

Slide 4 text

Typography is something more than just choosing fonts.

Slide 5

Slide 5 text

It is about making things legible and readable.

Slide 6

Slide 6 text

Terminology

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Typeface or font?

Slide 9

Slide 9 text

Typeface or font? Arial Regular Arial Bold Arial Italic Arial Black … Arial Black

Slide 10

Slide 10 text

sans-serif serif

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Glyphs

Slide 13

Slide 13 text

α an element of writing

Slide 14

Slide 14 text

Kerning and tracking

Slide 15

Slide 15 text

Ker ning and t r a c k i n g

Slide 16

Slide 16 text

Alignment

Slide 17

Slide 17 text

In typesetting and page layout, alignment or range, is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification. In typesetting and page layout, alignment or range, is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification. In typesetting and page layout, a l i g n m e n t o r r a n g e , i s t h e setting of text flow or image p l a c e m e n t relative to a page, c o l u m n (measure), table cell or tab. The type alignment s e t t i n g i s s o m e t i m e s referred to as text alignment, text justification or type justification. In typesetting and page layout, alignment or range, is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification. Flush left Centered Justified Flush right

Slide 18

Slide 18 text

Measure

Slide 19

Slide 19 text

Measure (or sometimes "The Measure") in typography is the length of a line of text. For a single-column design measure should ideally lie between 40 & 80 characters. Many typographers consider the perfect measure to be 65 characters. If the lines are too short then the text becomes disjointed, if they are too long the content Number of characters per line

Slide 20

Slide 20 text

Leading

Slide 21

Slide 21 text

Leading Leading x

Slide 22

Slide 22 text

Ligatures

Slide 23

Slide 23 text

Ligatures fi fi

Slide 24

Slide 24 text

Hyphenation

Slide 25

Slide 25 text

Hy- phe- nation

Slide 26

Slide 26 text

Hyphens, en-dashes, em-dashes

Slide 27

Slide 27 text

Hyphens, en-dashes, em-dashes - – —

Slide 28

Slide 28 text

@viljamis

Slide 29

Slide 29 text

En-Dash? • Ranges
 The contest runs July 7–21 • Second hyphen
 Firefox is an open-source–based browser

Slide 30

Slide 30 text

Rag, widow, orphan

Slide 31

Slide 31 text

Rag is the uneven edge of text that is aligned on only one side. In English, most text is left aligned and so the rag is on the right side of the text block. Text that is fully justified has no rag (some people say that the rag is completely even or straight, rather than not there), and centered text has rag on both the right and the left. Widow Orphan Rag

Slide 32

Slide 32 text

Good ol’ days Pre-Web Era

Slide 33

Slide 33 text

serif 40-85 CPL

Slide 34

Slide 34 text

WHO THE FUCK SET THESE RULES?

Slide 35

Slide 35 text

Enough time to try. ! 1450s

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

66 character golden rule 60-75 CPL 40-50 CPL for multi-column layout Fixed width Fixed dpi Fixed reading distance

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Middle Ages B.RWD.

Slide 42

Slide 42 text

Unwritten rules of web typography

Slide 43

Slide 43 text

Body copy font size ~12-14px

Slide 44

Slide 44 text

Leading ~1.5

Slide 45

Slide 45 text

measure ÷ leading ~25

Slide 46

Slide 46 text

paragraph spacing ÷ leading ~1.4

Slide 47

Slide 47 text

Be careful with text justification

Slide 48

Slide 48 text

Be careful with first line indention

Slide 49

Slide 49 text

Measure 65-90 cpl 75-85 cpl — top picks

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

leading = font size × golden ratio

Slide 52

Slide 52 text

measure = leading × leading

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Brave New World Post-PC Era

Slide 56

Slide 56 text

Nothing really changed… Except one thing: we cannot rely on the fixed container width anymore.

Slide 57

Slide 57 text

— Tim Brown “Breakpoints tailored to the design “often means breakpoints that occur “when clusters of typographic elements “become uncomfortable (way too close “together, too far apart, too narrow, “too wide, etc.).”

Slide 58

Slide 58 text

— Elliot Jay Stocks,“Smashing Book 3” “The key attribute “for achieving perfect typesetting “is perfect measure: “a good average between 45 and 90 “characters per line — on all screen “resolutions.”

Slide 59

Slide 59 text

Responsive Typography T H E B A S I C S

Slide 60

Slide 60 text

Text size is not your personal preference

Slide 61

Slide 61 text

100% of device width Liquid Layout

Slide 62

Slide 62 text

Set of fixed containers Adaptive Layout

Slide 63

Slide 63 text

Readability is more important than having a layout that is always as wide as the viewport

Slide 64

Slide 64 text

New players… Constants grew up into variables.

Slide 65

Slide 65 text

1. Reading distance 2. DPI 3. User context

Slide 66

Slide 66 text

Source: iA

Slide 67

Slide 67 text

Reading distance by device type • Phone — close distance reading • Tablet — medium distance reading* • Desktop — far distance reading • TV — 10-foot experience

Slide 68

Slide 68 text

iPad vs iPhone

Slide 69

Slide 69 text

Source: iA

Slide 70

Slide 70 text

1. iPad is a little bit further away 2. iPad context: breakfast table, sofa, in bed 3. Less screen estate on iPhone

Slide 71

Slide 71 text

Context & reading distance Tablets and variety of distance • Close distance reading — lying in bed • Medium distance reading — sitting, public transportation • Far distance reading — propped on a table while eating Source: BBC

Slide 72

Slide 72 text

It’s not possible to create perfect responsive typography. It’s all about finding a compromise.

Slide 73

Slide 73 text

Prototyping Responsive Typography

Slide 74

Slide 74 text

— @viljamis “Typography for the Web “is really hard to design anywhere “else than inside the browser”

Slide 75

Slide 75 text

Process: 1. Put the content with markup 2. Choose typefonts 3. Define breakpoints 4. Define fixed-width containers

Slide 76

Slide 76 text

Process: 5. Calculate body font size using desired CPL 6. Set typography hierarchy, scale, leading and white space 7. Adjust for devices and displays

Slide 77

Slide 77 text

Choosing a typeface

Slide 78

Slide 78 text

serif or sans-serif?

Slide 79

Slide 79 text

< 12px sans-serif better rendering

Slide 80

Slide 80 text

WHO THE FUCK IS USING 12PX FOR BODY TEXT?

Slide 81

Slide 81 text

Both can work great

Slide 82

Slide 82 text

— Oliver Reichenstein “The serifed typeface is a priest, “the sans is a hacker”

Slide 83

Slide 83 text

System fonts on desktop

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

System fonts on mobile devices

Slide 86

Slide 86 text

iOS Android Windows Phone Helvetica Neue Roboto Segoe UI

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

body { font-family: "Times", "Times New Roman", serif; } ! ! h1, h2, h3, h4, h5, h6 { font-family: "Helvetica", "Arial", sans-serif; }

Slide 90

Slide 90 text

Modular Scale

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

‘66 characters’ rule 16px (1em) text and a measure of 60–75 characters long

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Leading

Slide 99

Slide 99 text

Leading size • Golden Ratio Scale
 pearsonified.com/typography/ • Any other modular scale
 modularscale.com • Magic formulas
 nicewebtype.com/notes/2012/02/03/molten-leading-or- fluid-line-height/ ((current width − 
 min-width)÷(max-width − min-width)) × 
 (line-height − 
 min-line-height) + 
 min-line-height

Slide 100

Slide 100 text

On high dpi displays text looks thiner

Slide 101

Slide 101 text

more dpi less weight smaller line-height

Slide 102

Slide 102 text

Using different font grades for devices with different dpi can help to achieve the same visual appearance

Slide 103

Slide 103 text

Source: iA

Slide 104

Slide 104 text

Readability & Legibility

Slide 105

Slide 105 text

Readability and legibility • text-rendering: auto, optimizeSpeed, optimizeLegibility, geometricPrecision • text-size-adjust: auto, none, x% • -webkit-font-smoothing: none, subpixel- antialiased, antialiased

Slide 106

Slide 106 text

Legibility issues

Slide 107

Slide 107 text

MicroSoft ClearType

Slide 108

Slide 108 text

h1 { text-shadow:-1px -1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(0,0,0,0.7); } Old hack for old systems with modern browsers

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Result

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

Future of Responsive Typography

Slide 117

Slide 117 text

Typography is Math

Slide 118

Slide 118 text

The problem of responsive typography today is the impossibility to get exact values of all necessary variables, ! e.g. reading distance, luminosity, etc.

Slide 119

Slide 119 text

Distance

Slide 120

Slide 120 text

Luminosity @media (luminosity: normal) { body { background: #f5f5f5; color: #262626; } } ! @media (luminosity: dim) { body { background: #e9e4e3; } } ! @media (luminosity: washed) { body { background: #ffffff; } }

Slide 121

Slide 121 text

Q&A