13 Golden Rules of Typography on the Web

A presentation at Web Directions Summit 2017 in November 2017 in Sydney NSW, Australia by Richard Rutter

13 Golden Rules for
Typography on the Web Richard Ru ! er, Clearle " #summit17

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

#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 Use the default font size for paragraph text № 3

#summit17 Adjust type size according to reading distance № 4

sizecalc.com sizecalc.com 30 3 0 2.61801

sizecalc.com sizecalc.com 6 0 3 0 5.236021

sizecalc.com sizecalc.com 4 5 3 0 3.927016

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

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

“ 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="char" char="×" > td { text-align: "×" 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

sizecalc.com sizecalc.com 7 0 2 5 122.763623

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

h1 { font-size: 13 vmin ;
/* 1vmin = 1% viewport width or height, whichever is smaller */
}

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

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

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

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. Bj ö rnsson

#summit17 Optimise page render timing № 12

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="preload" href="nicefont.woff2" as="font"
`type="font/woff2" 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 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

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

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

Richard Rutter
@rar

1 / 158

Typography is what comes between the author and the reader. This is as true on the web as it is in any other medium. If a text has anything at all significant to say, it needs a typographer’s care, which will in turn be repaid by the reader’s attention. If you design websites or use CSS then you are a typographer whether you know it or not.

This talk will give you will give a set of guidelines that deftly combine implementation details with typographic theory and set you on the road to designing beautiful and effective responsive typography.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Web Typography book

A handbook for designing beautiful and effective responsive typography.
Ampersand web typography conference

Ampersand brings together experts from all aspects of web typography, including branding and editorial designers, web developers, visual designers, browser makers, and type designers.
Clagnut

Richard Rutter's blog
@webtypography

Buzz and feedback

Here’s what was said about this presentation on social media.

Always love a typography talk! @clagnut from @clearleft talking about the 13 golden rules of typography on the web. #summit17 pic.twitter.com/0jAeTldi4C
— Fiona Chan 🐳 (@mobywhale) November 8, 2017
Loved @clagnut typography talk at #summit17 - so directly useful. Do buy his book, it's great.
— Ricky Onsman (@onsman) November 9, 2017

13 Golden Rules of Typography on the Web

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Web Typography book

Ampersand web typography conference

Clagnut

@webtypography

Buzz and feedback