Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rhythm & Proportion in Typography

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!

Xavier Bertels

July 19, 2012
Tweet

More Decks by Xavier Bertels

Other Decks in Design

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