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 full-size slide

  2. 1. Getting the basics right

    View full-size slide

  3. s
    s
    sans-serif serif

    View full-size slide

  4. s s
    sans-serif serif

    View full-size slide

  5. s s
    sans-serif serif

    View full-size slide

  6. Makes no sense.

    View full-size slide

  7. W3C:
    Serif
    Sans-serif

    View full-size slide

  8. W3C:
    Serif
    Sans-serif
    Cursive
    Fantasy
    Monospace

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. What a mess.

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. Ha Ha
    144pt
    Times
    144pt
    Bernhard

    View full-size slide

  22. Ha Ha
    144pt
    Times
    144pt
    Bernhard

    View full-size slide

  23. 144pt
    Times
    144pt
    Bernhard
    Ha Ha

    View full-size slide

  24. Why does it matter?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 2. x-height & modulation

    View full-size slide

  29. x-height:
    defines vertical rhythm

    View full-size slide

  30. 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 full-size 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 full-size 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
    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 full-size slide

  33. 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 full-size slide

  34. Let the x-height control
    your vertical axis

    View full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. It all perfectly aligns!

    View full-size slide

  38. But your whitespace
    looks like shit.

    View full-size 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
    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 full-size slide

  40. 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 full-size slide

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

    View full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

  44. modulation:
    proportion starts here

    View full-size slide

  45. Word Word Word

    View full-size slide

  46. Word Word Word

    View full-size slide

  47. Word Word Word

    View full-size slide

  48. 3. So what do I do?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 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 full-size slide