Rhythm & Proportion in Typography

A talk about Rhythm & Proportion: typography, baseline grid and so forth. I am comparing units in pixels, because it is easier to make a point. Ideally, you want to set your body font-size in % and use (r)ems from there on.

These slides are from the Fronteers meet-up at Wijs in Ghent. Speaker notes might be added later. Hit me up on twitter @xavez if you’re interested or have *any* feedback!

Transcript

1. Rhythm & Proportion:
   think more, do less
   xavier bertels · @xavez
   fronteers ghent (wijs) · juli 2012
   

   View Slide

2. 1. Getting the basics right
   

   View Slide

3. s
   s
   

   View Slide

4. s
   s
   sans-serif serif
   

   View Slide

5. s s
   sans-serif serif
   

   View Slide

6. s s
   sans-serif serif
   

   View Slide

7. Makes no sense.
   

   View Slide

8. W3C:
   Serif
   Sans-serif
   

   View Slide

9. W3C:
   Serif
   Sans-serif
   Cursive
   Fantasy
   Monospace
   

   View Slide

10. Times New
    Helvetica
    Brush Script
    Papyrus
    Courier
    W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace
    

    View Slide

11. Didot
    W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace
    

    View Slide

12. Didot
    Optima
    W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace
    

    View Slide

13. Didot
    Optima
    I am sorry
    W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace
    

    View Slide

14. Didot
    Optima
    I am sorry
    Fraktur
    W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace
    

    View Slide

15. Didot
    Optima
    I am sorry
    Fraktur
    Anonymous
    W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace
    

    View Slide

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

    View Slide

17. What a mess.
    

    View Slide

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

    View Slide

19. 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 oppo-
    Your bones don’t break, mine do. That’s
    clear. Your cells react to bacteria and vi-
    ruses differently than mine. You don’t
    get sick, I do. That’s also clear. But for
    some reason, you and I react the ex-
    act 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 oppo-
    site ends. However unreal it may seem,
    we are connected, you and I. We’re on
    the same curve, just on opposite ends.
    

    View Slide

20. Your bones don’t break, mine do. That’s
    clear. Your cells react to bacteria and vi-
    ruses differently than mine. You don’t
    get sick, I do. That’s also clear. But for
    some reason, you and I react the ex-
    act 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 oppo-
    site 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 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 oppo-
    site ends. However unreal it may
    

    View Slide

21. 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 oppo-
    site 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 oppo-
    

    View Slide

22. Ha Ha
    144pt
    Times
    144pt
    Bernhard
    

    View Slide

23. Ha Ha
    144pt
    Times
    144pt
    Bernhard
    

    View Slide

24. 144pt
    Times
    144pt
    Bernhard
    Ha Ha
    

    View Slide

25. Why does it matter?
    

    View Slide

26. 95% of what we do
    revolves around text . . .
    – Oliver Reichenstein
    

    View Slide

27. . . . and it puts focus on
    the wrong properties.
    – Me
    

    View Slide

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

    View Slide

29. 2. x-height & modulation
    

    View Slide

30. x-height:
    defines vertical rhythm
    

    View Slide

31. 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 oppo-
    site 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 oppo-
    

    View Slide

32. 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 oppo-
    site 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 oppo-
    

    View Slide

33. View Slide

34. View Slide

35. 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 oppo-
    site 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 oppo-
    

    View Slide

36. 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 oppo-
    site 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 oppo-
    

    View Slide

37. Let the x-height control
    your vertical axis
    

    View Slide

38. Your bones don’t break, mine
    do. That’s clear. Your cells
    react to bacteria and virus-
    es 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 bacte-
    ria 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 connect-
    

    View Slide

39. Your bones don’t break, mine
    do. That’s clear. Your cells
    react to bacteria and virus-
    es 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 bacte-
    ria 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 connect-
    

    View Slide

40. It all perfectly aligns!
    

    View Slide

41. But your whitespace
    looks like shit.
    

    View Slide

42. Your bones don’t break, mine
    do. That’s clear. Your cells
    react to bacteria and virus-
    es 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 bacte-
    ria 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 connect-
    

    View Slide

43. Your bones don’t break, mine
    do. That’s clear. Your cells
    react to bacteria and virus-
    es 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 bacte-
    ria 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 connect-
    

    View Slide

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

    View Slide

45. 1. Set a good, legible body font-size (15)
    2. Find what line-height works best (24)
    3. Divide that by 3 or 4 (24/3)
    4. That’s your magic number! (8)
    

    View Slide

46. All you have to do is make sure that:
    margin-top + margin-bottom +
    padding-top + padding-bottom +
    border-top + border-bottom +
    line-height =
    n × magic number
    

    View Slide

47. modulation:
    proportion starts here
    

    View Slide

48. Word Word Word
    

    View Slide

49. Word Word Word
    

    View Slide

50. Word Word Word
    

    View Slide

51. 3. So what do I do?
    

    View Slide

52. 1. Set body font-size in %
    2. Set all other metrics in (r)ems
    3.
    

    View Slide

53. 1. Use font-size-adjust (<3 Mozilla)
    2. Spam all other browser makers
    

    View Slide

54. 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
    Further reading
    

    View Slide