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