13 Golden Rules for

Typography on the Web Richard Ru ! er, Clearle " #summit17

13 Golden Rules for

Typography on the Web Richard Ru ! er, Clearle " #summit17

13 Golden Rules for

Typography on the Web Richard Ru ! er, Clearle " #summit17

Photo: Marc Thiele

“ It is only logical to say that a web designer should get good training in t ypography.” Oliver Reichenstein, Web Des i gn i s 9 5 % T y pogra ph y

h ! ps://ia.net/know-how/the-web-is-all-about-typography-period

image of bad sameness Photo: Indra Kupferschmid

There are important differences between good or poor typography that appear to have li " le effect on reading speed and comprehension.” Dr. Kevin Larson (Microso " ) and Dr. Rosalind W. Picard (MIT) “

Good quality typography is responsible for greater engagement during reading.” Dr. Kevin Larson (Microso " ) and Dr. Rosalind W. Picard (MIT) “

Good typography induces a good mood.” Dr. Kevin Larson (Microso " ) and Dr. Rosalind W. Picard (MIT) “

Good typography induces a good mood!

#summit17 Learn to relinquish control № 1

“ The sage … accepts the ebb and flow of things, Nurtures them, but does not own them. ” John Allsop, A Dao of Web Design

h ! ps://alistapart.com/article/dao

#summit17 Don’t trust computers № 2

¶

#summit17 Use the default font size for paragraph text № 3

Photo: Jon Tan

#summit17 Adjust type size according to reading distance № 4

channel4.com/programmes/father-ted/

channel4.com/programmes/father-ted/

sizecalc.com sizecalc.com 30

sizecalc.com sizecalc.com 30 3 0

sizecalc.com sizecalc.com 30 3 0 2.61801

sizecalc.com sizecalc.com

sizecalc.com sizecalc.com 6 0 3 0 5.236021

sizecalc.com sizecalc.com

sizecalc.com sizecalc.com 4 5 3 0 3.927016

p { font-size: 16px ; }

p { font-size: 16px ; } @media screen and (min-width: 60em ) { p { font-size: 18px ; } }

p { font-size: 16px ; } @media screen and (min-width: 120em ) { p { font-size: 22px ; } } @media screen and (min-width: 60em ) { p { font-size: 18px ; } }

W hen it comes to typography, on screens or otherwise, size matters. Physical size affects optical issues that change how the eye and brain process typographic images.” Nick Sherman, Responsive Typography is a Physical Discipline

h ! p://alistapart.com/column/responsive-typography-is-a-physical-discipline “

#summit17 Adjust the font size if the typeface requires it № 5

Altis Helvetica Futura Lato

wbtyp.net/58

Typeface Aspect Ratio Helvetica 0 . 521 Lato 0 . 507 Futura 0 . 417 Altis 0 . 542

Adjusting for aspect ratio: font size × Helvetica ÷ Typeface = adjusted size So equivalent size for Lato is: 16 × 0.521 ÷ 0.507 = 16.5px

Futura : 16 × 0.521 ÷ 0.417 = 20.1px

Altis : 16 × 0.521 ÷ 0.542 = 15.2px

#summit17 Set tables to be read № 6

“ Tabular ma " er need no longer be a rather unpleasant job to design: on the contrary, it can become a really charming and artistic exercise.” Jan Tschichold, Asymmetric Typography

<td align=&#34;char&#34; char=&#34;×&#34; >

<td align=&#34;char&#34; char=&#34;×&#34; > td { text-align: &#34;×&#34; center; }

How to make a table readable 1. Remove stretch and size columns to data

Remove fills, gridlines, border and bolding.

Le " -align text, right-align numbers and align headings with data.

Put white space to work to group and separate.

Use tabular lining numerals, consistent precision, and remove repetition.

#summit17 Set text at display sizes, even on small screens № 7

Billboard

thegreatdiscontent.com

thegreatdiscontent.com

sizecalc.com sizecalc.com

sizecalc.com sizecalc.com 7 0 2 5 122.763623

sizecalc.com sizecalc.com

sizecalc.com sizecalc.com 3 0 1 2 137.491541

Good design is about firstly making people

want to read, then about telling stories. ” Mark Porter, former Creative Director at the Guardian

“

#summit17 Resize display text as you would an image № 8

h1 {

font-size: 13vw ;

		/*	1vw	=	1%	viewport	width	*/

}

The Meaning of Science

The Meaning of Science The Meaning of Science

The Meaning of Science The Meaning of Science

The Meaning of Science

The Meaning of Science The Meaning of Science The Meaning of Science

The Meaning of Science The Meaning of Science

h1 { font-size: 13 vmin ;

/* 1vmin = 1% viewport width or height, whichever is smaller */

}

The Meaning of Science The Meaning of Science

The Meaning of Science The Meaning of Science

#summit17 Influence the way people feel through type № 9

Even if people are not consciously aware of the type they’re reading, they’ll certainly be affected by it.” Tobias Frere-Jones,
Helvetica (dir. Gary Huswi ! , 2007). “

TEDxBedford

TEDxBedford

Yo u can influence the way people feel

helsenorge.no

mkshft.org

www.cleopatra-marina.gr

I hate obtuse theoretical mathematics

I love little fluffy kittens

This is a story about someone who lived in Happyland. His name was Mr Happy and he was f a t and round, and happy. One day Mr Happy went for a walk in the woods.

#summit17 Don’t be reverential, dogmatic or ordinary № 10

Beatrice Ward

People who love ideas must have a love of words. They will take a vivid interest in the clothes that words wear.” Beatrice Warde, The Crystal Goblet

“

Why we should give free money to everyone

#summit17 Reduce your payload № 11

WOFF2 provides improved compression and thus lower use of network bandwidth, while still allowing fast decompression even on mobile devices. ” WOFF File Format 2.0, W3C Candidate Recommendation

“

@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url("OpenSans.woff2") format("woff2") ,

url("OpenSans.woff") format("woff"); }

Strongman Haf þ ór Júlíus

Björnsson is launching his

own brand of vodka.

Strongman Haf þ ó r J ú l í us

Bj ö rnsson is launching his

own brand of vodka.

Strongman Haf þ ó r J ú l í us

Bj ö rnsson is launching his

own brand of vodka. Bj ö rnsson

#summit17 Optimise page render timing № 12

Aventurier

Aventurier

css-tricks.com/font-display-masses/

swap fallback text is shown immediately until the webfont loads

fallback text invisible for <100ms then shown with fallback font until webfont loads (provided that happens within 3 seconds)

optional like fallback but browser decides whether a webfont should be used at all (depends on connection speed)

block Block rendering while downloading the webfont for up to three seconds. A " er three seconds the fallback font will be shown. If the webfont loads a " erwards, show the webfont.

auto browser default (usually block )

font-display values

swap fallback text is shown immediately until the webfont loads

fallback text invisible for <100ms then shown with fallback font until webfont loads (provided that happens within 3 seconds)

optional like fallback but browser decides whether a webfont should be used at all (depends on connection speed)

block Block rendering while downloading the webfont for up to three seconds. A " er three seconds the fallback font will be shown. If the webfont loads a " erwards, show the webfont.

auto browser default (usually block )

font-display values

@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url("OpenSans.woff2") format("woff2") ,

url("OpenSans.woff") format("woff");

font-display: fallback ; }

<head> <link rel=&#34;preload&#34; href=&#34;nicefont.woff2&#34; as=&#34;font&#34; 
					type=&#34;font/woff2&#34;	crossorigin>

…

</head> Preload the critical font

One way we can regain control over the loading behavior is to use font load events.” Filament Group, Font Loading Revisted with Font Events

www.filamentgroup.com/lab/font-events.html

“

#summit17 Learn to use variable fonts № 13

Pre-defined axes of variation

Pre-defined axes of variation weight width italic slant optical size

Pre-defined axes of variation weight width italic slant optical size wght wdth ital slnt opsz

Pre-defined axes of variation weight width italic slant optical size wght wdth ital slnt opsz font-weight font-stretch font-style font-style font-optical-sizing

Pre-defined axes of variation weight width italic slant optical size wght wdth ital slnt opsz font-weight font-stretch font-style font-style font-optical-sizing any integer from 1–999 100% is predefined as normal

50% as ultra-condensed

200% as ultra-expanded italic angle value oblique -90deg

to

oblique 90deg auto

font-variation-settings: 'ytse' 24 font-variation-se " ings

font-variation-settings: 'ytse' 24 font-variation-settings: 'wght' 100 , 'wdth' 400 , 'opsz' 20 font-variation-se " ings

@font-face { font-family: 'Nicefont';

src: url('nicefont_var.woff2') format('woff-variations') ,

url('nicefont_regular.woff2') format('woff2'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Nicefont';

src: url('nicefont_var.woff2') format('woff-variations') ,

url('nicefont_regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Nicefont'; src: url('nicefont_var.woff2') format('woff-variations'),

url('nicefont_black.woff2') format('woff2') ;

font-weight: 800 ; font-style: normal; }

axis-praxis.org

13 Golden Rules for Typography on the Web 1. Learn to relinquish control

Don’t trust computers 3. Use the default font size for paragraph text 4. Adjust type size according to 
 reading distance 5. Adjust the font size if the typeface 
 requires it 6. Set tables to be read

Set text at display sizes, even on 
 small screens 8. Resize display text as you would an image 9. Influence the way people feel through type 10. Don’t be reverential, dogmatic 
 or ordinary 11. Reduce your payload 12. Optimise page render timing 13. Learn to Use Variable Fonts #summit17

Go to wbtyp.net

use summit17 for 25% off

Richard Ru ! er, Clearle "

@clagnut

@webtypography #summit17