Rhythm & Proportion

Rhythm & Proportion:think more, do lessXavier Bertels · @xavezFronteers ghent (Wijs) · juli 2012

1. Getting the basics right

s s

s ssans-serif serif

s ssans-serif serif

s ssans-serif serif

Makes no sense.

W3C:

SerifSans-serif

W3C:

SerifSans-serifMonospaceFantasyCursive

Times NewHelveticaCourierPapyrusBrush Script

W3C:

SerifSans-serifMonospaceFantasyCursive

Didot

W3C:

SerifSans-serifMonospace FantasyCursive

DidotOptima

W3C:

SerifSans-serifMonospace FantasyCursive

DidotOptimaAnonymous

W3C:

SerifSans-serifMonospace FantasyCursive

DidotOptimaAnonymousFraktur

W3C:

SerifSans-serifMonospace Fantasy Cursive

“Fantasy”– W3C

(Hitler preferred Futura)

DidotOptimaAnonymousFrakturI am sorry

W3C:

SerifSans-serifMonospace FantasyCursive

dev.w3.org/csswg/css3-fonts/#generic-font-families

What a mess.

“16px is a good minimum size for body copy”

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Your bones don’t break, mine do. That’s

clear. Your cells react to bacteria and vir-

uses differently than mine. You don’t get

sick, I do. That’s also clear. But for some

reason, you and I react the exact same

way to water. We swallow it too fast,

we choke. We get some in our lungs, we

drown. However unreal it may seem, we

are connected, you and I. We’re on the

same curve, just on opposite ends. How-

ever unreal it may seem, we are connec-

ted, you and I. We’re on the same curve,

just on opposite ends.

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Your bones don’t break, mine do. That’s

clear. Your cells react to bacteria and vir-

uses differently than mine. You don’t get

sick, I do. That’s also clear. But for some

reason, you and I react the exact same

way to water. We swallow it too fast,

we choke. We get some in our lungs, we

drown. However unreal it may seem, we

are connected, you and I. We’re on the

same curve, just on opposite ends. How-

ever unreal it may seem, we are connec-

ted, you and I. We’re on the same curve,

just on opposite ends.

32 24

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differ-ently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on oppos-ite ends. However unreal it may

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differ-ently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on oppos-ite ends. However unreal it may

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

32 32

Ha Ha144ptTimes

144ptBernhard

Ha Ha144ptTimes

144ptBernhard

144ptTimes

144ptBernhard

Ha Ha

Why does it matter?

95% of what we do revolves around text . . .

– Oliver Reichenstein

. . . and it puts focus on the wrong properties.

– Me

Forget about serif and sans-serif. What should we look at?

2. x-height & modulation

x-height:defines vertical rhythm

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differ-ently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on oppos-ite ends. However unreal it may

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differ-ently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on oppos-ite ends. However unreal it may

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differ-ently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on oppos-ite ends. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differ-ently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on oppos-ite ends. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.

Your bones don’t break, mine do. That’s clear. Your cells re-act to bacteria and viruses dif-ferently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However un-real it may seem, we are con-nected, you and I. We’re on the same curve, just on oppos-

Let the x-height control your vertical axis

Your bones don’t break, mine

do. That’s clear. Your cells

react to bacteria and viruses

differently than mine. You

don’t get sick, I do. That’s

also clear. But for some

reason, you and I react the

exact same way to water.

We swallow it too fast, we

choke. We get some in our

lungs, we drown. However

unreal it may seem, we are

connected, you and I. We’re

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connec-

Your bones don’t break, mine

do. That’s clear. Your cells

react to bacteria and viruses

differently than mine. You

don’t get sick, I do. That’s

also clear. But for some

reason, you and I react the

exact same way to water.

We swallow it too fast, we

choke. We get some in our

lungs, we drown. However

unreal it may seem, we are

connected, you and I. We’re

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connec-

It all perfectly aligns!

But your whitespacelooks like shit.

It’s not about line-height, it’s about the rhythm

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connec-

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connec-

1. Set a good, legible body font-size

2. Find what line-height works best

3. Divide that by 3 or 4

4. That’s your magic number!

“16px is a good minimum size for body copy”

16px tells you nothingabout legibility

M x k p

M x k p

em-box

M x k p

em-boxunits per em (=upm)

Times Bernhard

316upm461upm

Ye Old Web Safe Fonts: ~500 upm x-height

Þe Old Web Safe Fonts: ~500 upm x-height

Þe Old Web Safe Fonts: 16px font-size is readable

16px ⁄ 1000upm × 500upm= x-height of 8px

Readable web type= 8px x-height

16px ⁄ 1000upm × 316upm= x-height of 5px

Same font-size, almost half the x-height

Readable web type= 8px x-height

8px × 1000upm ⁄ 316upm= font-size of 25px

But I set my font-size in (r)ems!

font-size-adjust

fontdeck.com/support/fontsizeadjust

modulation:proportion starts here

Word Word Word

Word Word Word

WORD Word Word

Modular ScaleTim Brown

modularscale.com

Thank you.

gridsetapp.com

gridlover.net

modularscale.com

trentwalton.com/2011/05/10/fit-to-scale

webtypography.net/Rhythm_and_Proportion

alistapart.com/articles/more-meaningful-typography

24ways.org/2011/theres-no-formula-for-great-designs

fontdeck.com/support/fontsizeadjust

Further reading