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

Typography for Developers Munich 2013

Typography for Developers Munich 2013

A good proportion of web design today descends from print/graphic design and these influences are becoming even more prevalent. Typography for the web is now all the rage especially as we are (finally) able to use different fonts other than the tried and tested workhorses Arial, Verdana & Georgia. Therefore, solid knowledge of typography basics should really be a must for every internet professional today. Learn how to design a web page with type and impress your fellow designers.

Accompanying demo: http://webdesign.maratz.com/lab/typography-for-developers/

Marko Dugonjić

March 15, 2013
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

Transcript

  1. Typography for
    Developers
    Marko Dugonjić
    @markodugonjic
    Munich, 2013

    View full-size slide

  2. Creative Nights

    View full-size slide

  3. WE NEED TO TALK


    View full-size slide

  4. Preparation
    Selecting a typeface
    Paragraphs
    Text hierarchy
    Vertical rhythm
    Tabular data
    The layout
    THE PLAN

    View full-size slide

  5. PREPARATION


    View full-size slide

  6. Reset Everything™
    #protip

    View full-size slide

  7. * { margin: 0; padding: 0; }
    html {
    font-size: 62.5%;
    /* 16px x 62.5% = 10px */
    }

    View full-size slide

  8. HIGH CONTRAST

    View full-size slide

  9. .white-on-black {
    color: #ccc;
    background: #000;
    }
    .black-on-white {
    color: #444;
    background: #fff;
    }

    View full-size slide

  10. HIGH CONTRAST

    View full-size slide

  11. HIGH CONTRAST

    View full-size slide

  12. SELECTING a TYPEFACE


    View full-size slide

  13. Afrikaans Albanian Asturian Baraba Tatar Bislama Bokmal Norwegian Breton
    Catalan Chamorro Danish Dutch English Estonian Faeroese Finnish Franco-
    Provencal French Friulian Galician German Icelandic Irish Italian Ladin
    Luxembourgian Manx Gaelic Nynorsk Norwegian Occitan Portuguese Rhaeto-
    Romance Romansch Sco ish Gaelic Southern Sami Spanish Swedish Ume
    Sami Walloon West Frisian Balk Basque Bosnian Bulgarian Croatian Czech
    Erzya Esperanto Hungarian Inari Sami Karachay-Balkar Karaim Kashubian
    Kazan Tatar Kumyk Kurdish Lak Latvian (Le ish) Lithuanian Lule Sami
    Macedonian Maltese Moksha Moldavian Nogay Polish Romanian Russian
    Slovak Slovenian Sorbian Lower Sorbian Upper Turkish Ubykh Vamhusmal

    View full-size slide

  14. keming. (kěm'-ĭng).
    n. The result of
    improper kerning.
    h p://bit.ly/Nabf4X

    View full-size slide

  15. text-rendering: optimizeLegibility;

    View full-size slide

  16. h p://type.method.ac

    View full-size slide

  17. serif
    — OR —
    sans-serif

    View full-size slide

  18. Because there’s a lot going on visually on SM —
    screenshots, bu ons and noisy ads — a sans-serif felt
    like a more sensible, unclu ered route for body copy.
    — ELLIOT JAY STOCKS + VITALY FRIEDMAN


    View full-size slide

  19. PARAGRAPHS


    View full-size slide

  20. Anything from 45 to 75 characters is widely regarded
    as a satisfactory length of line for a single-column
    page set in a serifed text face in a text size. The 66-
    character line (counting both le ers and spaces) is
    widely regarded as ideal. For multiple column work, a
    be er average is 40 to 50 characters.
    — ROBERT BRINGHURST


    View full-size slide

  21. letter space, word
    spac, line space
    LETTER SPACE WORD SPACE
    LINE SPACE

    View full-size slide

  22. letter space, word
    spac, line space
    LETTER SPACE WORD SPACE
    LINE SPACE

    View full-size slide

  23. B
    y p
    r
    e
    s
    e
    r
    v
    i
    n
    g t
    h
    e w
    h
    i
    t
    e s
    p
    a
    c
    e
    h
    i
    e
    r
    a
    r
    c
    h
    y
    , w
    e c
    a
    n a
    c
    h
    i
    e
    v
    e t
    h
    e b
    e
    s
    t
    r
    e
    a
    d
    i
    n
    g e
    x
    p
    e
    r
    i
    e
    n
    c
    e f
    o
    r v
    a
    r
    i
    o
    u
    s s
    c
    e
    n
    a
    r
    i
    o
    s
    .
    H
    o
    w
    e
    v
    e
    r
    , t
    h
    e s
    a
    t
    i
    s
    f
    a
    c
    t
    o
    r
    y l
    i
    n
    e l
    e
    n
    g
    t
    h
    o
    f 4
    5 t
    o 7
    5 c
    h
    a
    r
    a
    c
    t
    e
    r
    s p
    e
    r l
    i
    n
    e
    l
    i
    m
    i
    t
    s a n
    u
    m
    b
    e
    r o
    f a
    c
    c
    e
    p
    t
    a
    b
    l
    e
    c
    o
    m
    b
    i
    n
    a
    t
    i
    o
    n
    s
    , n
    o
    t t
    o c
    h
    a
    r
    a
    c
    t
    e
    r
    s

    B
    y p
    r
    e
    s
    e
    r
    v
    i
    n
    g t
    h
    e w
    h
    i
    t
    e s
    p
    a
    c
    e h
    i
    e
    r
    a
    r
    c
    h
    y
    , w
    e c
    a
    n
    a
    c
    h
    i
    e
    v
    e t
    h
    e b
    e
    s
    t r
    e
    a
    d
    i
    n
    g e
    x
    p
    e
    r
    i
    e
    n
    c
    e f
    o
    r v
    a
    r
    i
    o
    u
    s
    s
    c
    e
    n
    a
    r
    i
    o
    s
    . H
    o
    w
    e
    v
    e
    r
    , t
    h
    e s
    a
    t
    i
    s
    f
    a
    c
    t
    o
    r
    y l
    i
    n
    e l
    e
    n
    g
    t
    h o
    f
    4
    5 t
    o 7
    5 c
    h
    a
    r
    a
    c
    t
    e
    r
    s p
    e
    r l
    i
    n
    e l
    i
    m
    i
    t
    s a n
    u
    m
    b
    e
    r o
    f
    a
    c
    c
    e
    p
    t
    a
    b
    l
    e c
    o
    m
    b
    i
    n
    a
    t
    i
    o
    n
    s
    , n
    o
    t t
    o m
    e
    n
    t
    i
    o
    n
    75
    45

    View full-size slide

  24. p,
    li,
    th,
    td {
    font-size: 1.6em;
    line-height: 1.5;
    /* 16px/24px */
    }
    p,
    li {
    max-width: 38em;
    }

    View full-size slide

  25. /* short line lenghts < 45 chars */
    p { line-height: 1.4; }
    /* medium line lenghts cca. 45–66 chars */
    p { line-height: 1.45; }

    View full-size slide

  26. Don’t overdo it!
    #protip

    View full-size slide

  27. L
    i
    n
    e h
    e
    i
    g
    h
    t f
    o
    r e
    a
    c
    h b
    r
    e
    a
    k
    p
    o
    i
    n
    t i
    s a
    d
    j
    u
    s
    t
    e
    d
    a
    c
    c
    o
    r
    d
    i
    n
    g t
    o t
    h
    e l
    i
    n
    e l
    e
    n
    g
    t
    h r
    e
    n
    d
    e
    r
    e
    d a
    t
    t
    h
    a
    t b
    r
    e
    a
    k
    p
    o
    i
    n
    t
    . S
    h
    o
    r
    t l
    i
    n
    e l
    e
    n
    g
    t
    h
    s r
    e
    q
    u
    i
    r
    e
    t
    i
    g
    h
    t
    e
    r l
    i
    n
    e s
    p
    a
    c
    i
    n
    g
    , b
    e
    c
    a
    u
    s
    e t
    h
    e r
    e
    a
    d
    e
    r

    s e
    y
    e
    d
    o
    e
    s
    n

    t h
    a
    v
    e t
    o t
    r
    a
    v
    e
    l m
    u
    c
    h t
    o r
    e
    a
    c
    h t
    h
    e
    n
    e
    x
    t l
    i
    n
    e o
    f t
    e
    x
    t
    . A
    s l
    i
    n
    e l
    e
    n
    g
    t
    h g
    e
    t
    s
    l
    o
    n
    g
    e
    r
    , m
    o
    r
    e l
    i
    n
    e s
    p
    a
    c
    i
    n
    g i
    s r
    e
    q
    u
    i
    r
    e
    d
    . L
    i
    n
    e
    h
    e
    i
    g
    h
    t f
    o
    r e
    a
    c
    h b
    r
    e
    a
    k
    p
    o
    i
    n
    t i
    s a
    d
    j
    u
    s
    t
    e
    d a
    c
    c
    o
    r
    d
    i
    n
    g
    t
    o t
    h
    e l
    i
    n
    e l
    e
    n
    g
    t
    h r
    e
    n
    d
    e
    r
    e
    d a
    t t
    h
    a
    t
    b
    r
    e
    a
    k
    p
    o
    i
    n
    t
    . S
    h
    o
    r
    t l
    i
    n
    e l
    e
    n
    g
    t
    h
    s r
    e
    q
    u
    i
    r
    e t
    i
    g
    h
    t
    e
    r
    l
    i
    n
    e s
    p
    a
    c
    i
    n
    g
    , b
    e
    c
    a
    u
    s
    e t
    h
    e r
    e
    a
    d
    e
    r

    s e
    y
    e d
    o
    e
    s
    n

    t
    L
    i
    n
    e h
    e
    i
    g
    h
    t f
    o
    r e
    a
    c
    h b
    r
    e
    a
    k
    p
    o
    i
    n
    t i
    s a
    d
    j
    u
    s
    t
    e
    d
    a
    c
    c
    o
    r
    d
    i
    n
    g t
    o t
    h
    e l
    i
    n
    e l
    e
    n
    g
    t
    h r
    e
    n
    d
    e
    r
    e
    d a
    t
    t
    h
    a
    t b
    r
    e
    a
    k
    p
    o
    i
    n
    t
    . S
    h
    o
    r
    t l
    i
    n
    e l
    e
    n
    g
    t
    h
    s r
    e
    q
    u
    i
    r
    e
    t
    i
    g
    h
    t
    e
    r l
    i
    n
    e s
    p
    a
    c
    i
    n
    g
    , b
    e
    c
    a
    u
    s
    e t
    h
    e r
    e
    a
    d
    e
    r

    s e
    y
    e
    d
    o
    e
    s
    n

    t h
    a
    v
    e t
    o t
    r
    a
    v
    e
    l m
    u
    c
    h t
    o r
    e
    a
    c
    h t
    h
    e
    n
    e
    x
    t l
    i
    n
    e o
    f t
    e
    x
    t
    . A
    s l
    i
    n
    e l
    e
    n
    g
    t
    h g
    e
    t
    s
    l
    o
    n
    g
    e
    r
    , m
    o
    r
    e l
    i
    n
    e s
    p
    a
    c
    i
    n
    g i
    s r
    e
    q
    u
    i
    r
    e
    d
    . L
    i
    n
    e
    h
    e
    i
    g
    h
    t f
    o
    r e
    a
    c
    h b
    r
    e
    a
    k
    p
    o
    i
    n
    t i
    s a
    d
    j
    u
    s
    t
    e
    d a
    c
    c
    o
    r
    d
    i
    n
    g
    t
    o t
    h
    e l
    i
    n
    e l
    e
    n
    g
    t
    h r
    e
    n
    d
    e
    r
    e
    d a
    t t
    h
    a
    t
    b
    r
    e
    a
    k
    p
    o
    i
    n
    t
    . S
    h
    o
    r
    t l
    i
    n
    e l
    e
    n
    g
    t
    h
    s r
    e
    q
    u
    i
    r
    e t
    i
    g
    h
    t
    e
    r
    l
    i
    n
    e s
    p
    a
    c
    i
    n
    g
    , b
    e
    c
    a
    u
    s
    e t
    h
    e r
    e
    a
    d
    e
    r

    s e
    y
    e d
    o
    e
    s
    n

    t

    View full-size slide

  28. TEXT HIERARCHY


    View full-size slide

  29. 16 18 21 24 36 48 60 72

    View full-size slide

  30. 16 18 21 24 36 48 60 72
    16 24 36 54 81 121

    View full-size slide

  31. h3, h2, h1 {
    font-weight: bold;
    line-height: 1.5em;
    }
    h3 { font-size: 1.6em; }
    h2 { font-size: 2.4em; }
    h1 { font-size: 3.6em; }

    View full-size slide

  32. Why is PHP better
    than Python?
    Why is PHP be er
    than Python?

    View full-size slide

  33. .display-text {
    font-size: 12em;
    letter-spacing: -.02em;
    line-height: 1em;
    text-rendering: optimizeLegibility;
    }

    View full-size slide

  34. VERTICAL RHYTHM


    View full-size slide

  35. p {
    margin-bottom: 1.5em;
    /* margin-bottom = line-height */
    }
    ul,
    ol {
    margin-bottom: 2.4em;
    /* 1.6em () x 1.5em */
    }

    View full-size slide

  36. html {
    background: #fff url(baseline.png);
    }

    View full-size slide

  37. html {
    background-image: linear-gradient(top,
    #fff 0, #fff 95%, #f00 95%, #f00 100%);
    background-size: 100% 24px;
    background-repeat: repeat-y;
    }
    /* Note: prefix-omitted code */

    View full-size slide

  38. DATA TABLES


    View full-size slide

  39. T o d a y W e e k M o n t h
    1 2 3 1 2 3 4 1 2 3 4 5
    3 4 5 3 4 5 6 3 4 5 6 7

    View full-size slide


  40. table {
    border-collapse: collapse;
    margin-bottom: 2.4em;
    /* or 3.6em
    or 4.8em */
    }

    View full-size slide

  41. th, td {
    border-top: .1em solid #ccc;
    padding: .74em 1em .75em;
    /* .75em = 1.5em/2 */
    vertical-align: top;
    }
    .numeric {
    text-align: right;
    font-family: 'Anonymous Pro', monospace;
    }

    View full-size slide

  42. S
    i
    n
    g
    l
    e r
    o
    w v
    a
    l
    u
    e
    V
    e
    r
    t
    i
    c a
    l
    -
    a l
    i
    g n
    -
    t o
    p i
    s
    q
    u
    i t
    e h
    a
    n
    d
    y w i
    t
    h l
    a
    r g
    e
    r
    s
    t
    r
    i n
    g
    s o
    f t
    e
    x
    t w
    i
    t h
    i
    n
    e
    a
    c
    h t
    a
    b
    l
    e c
    e
    l
    l
    . I
    m
    a
    g
    i
    n
    e t
    h
    a
    t
    y
    o
    u h
    a
    v
    e
    c
    o
    n
    t
    a
    i
    n
    s a s
    i
    n
    g
    l
    e l
    i
    n
    e
    o
    f d
    a
    t
    a
    ?
    S
    i
    n
    g
    l
    e r
    o
    w v
    a
    l
    u
    e V
    e
    r
    t
    i
    c a
    l
    -
    a l
    i
    g n
    -
    t o
    p i
    s
    q
    u
    i t
    e h
    a
    n
    d
    y w i
    t
    h l
    a
    r g
    e
    r
    s
    t
    r
    i n
    g
    s o
    f t
    e
    x
    t w
    i
    t h
    i
    n
    e
    a
    c
    h t
    a
    b
    l
    e c
    e
    l
    l
    . I
    m
    a
    g
    i
    n
    e t
    h
    a
    t
    y
    o
    u h
    a
    v
    e
    c
    o
    n
    t
    a
    i
    n
    s a s
    i
    n
    g
    l
    e l
    i
    n
    e
    o
    f d
    a
    t
    a
    ?

    View full-size slide


  43. table {
    border-collapse: collapse;
    margin-bottom: 2.4em;
    table-layout: fixed;
    width: 100%;
    }

    View full-size slide

  44. THE LAYOUT


    View full-size slide

  45. text?
    (meta) data?
    images?
    video?

    View full-size slide

  46. 4 : 3 16 : 9

    View full-size slide

  47. YOUR
    CONTENT
    HERE

    View full-size slide

  48. 300 * 1.61
    = cca. 480px
    300px
    Text

    View full-size slide

  49. (300 + 20 + 20) * 1.61 ≈ 550
    550 – 20 – 20 = 510

    View full-size slide

  50. .main-content {
    float: left;
    width: 51em;
    padding: 2.4em 2em;
    }
    .supplementary-content {
    float: left;
    width: 30em;
    padding: 2.4em 2em;
    }
    #wrapper {
    width: 89em;
    margin: 0 auto;
    overflow: auto;
    }

    View full-size slide

  51. ALMOST DONE!


    View full-size slide

  52. Preparation
    Selecting a typeface
    Paragraphs
    Text hierarchy
    Vertical rhythm
    Tabular data
    The layout
    THE PLAN

    View full-size slide

  53. thinkingwithtype.com
    fontfeed.com
    explorationsintypography.com
    typetester.org

    View full-size slide

  54. Dankeschön!
    Marko Dugonjić
    @markodugonjic
    creativenights.com

    View full-size slide