$30 off During Our Annual Pro Sale. View Details »

Typography for Developers Rijeka 2015

Marko Dugonjić
September 05, 2015

Typography for Developers Rijeka 2015

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.

Marko Dugonjić

September 05, 2015
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

Transcript

  1. Typography for
    Developers
    Marko Dugonjić
    @markodugonjic
    Rijeka, 2015

    View Slide

  2. @markodugonjic
    speakerdeck.com/maratz

    View Slide

  3. View Slide

  4. View Slide

  5. preview.typetester.org

    View Slide

  6. Creative Nights

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. WE NEED TO TALK

    View Slide

  11. View Slide

  12. Preparation
    Selecting a typeface
    Paragraphs
    Text hierarchy
    Tabular data
    THE PLAN

    View Slide

  13. PREPARATION

    View Slide

  14. Browser
    wars

    View Slide

  15. Reset Everything™
    #protip

    View Slide

  16. * { margin: 0; padding: 0; }

    View Slide

  17. HIGH CONTRAST

    View Slide

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

    View Slide

  19. HIGH CONTRAST

    View Slide

  20. HIGH CONTRAST

    View Slide

  21. SELECTING a TYPEFACE

    View Slide

  22. View Slide

  23. 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 Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

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

    View Slide

  29. serif
    — OR —
    sans-serif

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. 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 Slide

  36. PARAGRAPHS

    View Slide

  37. 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 Slide

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

    View Slide

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

    View Slide

  40. 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 Slide

  41. 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 Slide

  42. Line height for each breakpoint is
    adjusted according to the line length
    rendered at that breakpoint. Short
    line lengths require tighter line
    spacing, because the reader’s eye
    doesn’t have to travel much to reach
    the next line of text. As line length
    gets longer, more line spacing is
    required.
    qqqqqqqqqqqqqqqqqqqqqqqqqq
    dddddddddddddddddddddddddd
    Line height for each breakpoint is
    adjusted according to the line length
    rendered at that breakpoint. Short
    line lengths require tighter line
    spacing, because the reader’s eye
    doesn’t have to travel much to reach
    the next line of text. As line length
    gets longer, more line spacing is
    required.
    jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
    ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ
    q
    d
    j
    Š

    View Slide

  43. View Slide

  44. TEXT HIERARCHY

    View Slide

  45. w
    e
    b t
    y
    p
    o
    g
    r
    p
    h
    y
    T
    h
    a
    n
    k y
    o
    u f
    o
    r t
    h
    e l
    o
    v
    e
    l
    y i
    n
    t
    r
    o
    d
    u
    c
    t
    i
    o
    n
    , R
    a
    f
    a
    l
    ! P
    l
    e
    a
    s
    e g
    i
    v
    e a w
    a
    r
    m
    r
    o
    u
    n
    d o
    f a
    p
    p
    l
    a
    u
    s
    e t
    o t
    h
    e o
    r
    g
    a
    n
    i
    z
    e
    r
    s
    .
    L
    e
    t m
    e a
    s
    k y
    o
    u s
    o
    m
    e
    t
    h
    i
    n
    g
    … H
    a
    v
    e y
    o
    u e
    v
    e
    r s
    a
    v
    e
    d a
    n a
    r
    t
    i
    c
    l
    e w
    i
    t
    h
    t
    h
    e i
    n
    t
    e
    n
    t
    i
    o
    n t
    o r
    e
    a
    d i
    t l
    a
    t
    e
    r o
    n a m
    o
    b
    i
    l
    e d
    e
    v
    i
    c
    e i
    n t
    h
    e p
    a
    r
    k
    a
    s
    s
    u
    m
    i
    n
    g t
    h
    a
    t i
    t
    s r
    e
    s
    p
    o
    n
    s
    i
    v
    e w
    e
    b d
    e
    s
    i
    g
    n i
    s a
    l
    l i
    t t
    a
    k
    e
    s f
    o
    r t
    h
    e
    b
    e
    s
    t p
    o
    s
    s
    i
    b
    l
    e r
    e
    a
    d
    i
    n
    g e
    x
    p
    e
    r
    i
    e
    n
    c
    e
    ? H
    a
    v
    e y
    o
    u e
    v
    e
    r b
    e
    e
    n d
    i
    s
    a
    p
    p
    o
    i
    n
    t
    e
    d w
    h
    e
    n
    y
    o
    u r
    e
    a
    l
    i
    z
    e
    d t
    h
    a
    t a
    r
    t
    i
    c
    l
    e
    s o
    n m
    o
    b
    i
    l
    e a
    r
    e h
    a
    r
    d t
    o r
    e
    a
    d b
    e
    c
    a
    u
    s
    e
    o
    f t
    h
    e p
    o
    o
    r
    l
    y c
    h
    o
    s
    e
    n l
    e
    t
    t
    e
    r s
    i
    z
    e a
    n
    d l
    a
    y
    o
    u
    t t
    h
    a
    t a
    p
    p
    e
    a
    r t
    o b
    e
    d
    i
    s
    p
    r
    o
    p
    o
    r
    t
    i
    o
    n
    a
    l t
    o t
    h
    e s
    c
    r
    e
    e
    n
    ?
    S
    o
    , w
    h
    y i
    s t
    h
    i
    s h
    a
    p
    p
    e
    n
    i
    n
    g
    ? H
    o
    w d
    o s
    u
    c
    h
    , o
    t
    h
    e
    r
    w
    i
    s
    e b
    e
    a
    u
    t
    i
    f
    u
    l r
    e
    s
    p
    o
    n
    s
    i
    v
    e
    d
    e
    s
    i
    g
    n
    s
    , e
    n
    d u
    p b
    e
    i
    n
    g s
    o p
    o
    o
    r
    l
    y e
    x
    e
    c
    u
    t
    e
    d o
    n m
    o
    b
    i
    l
    e
    ?
    T
    h
    e a
    n
    s
    w
    e
    r i
    s i
    n f
    a
    c
    t q
    u
    i
    t
    e c
    l
    e
    a
    r — s
    u
    c
    h w
    e
    b
    s
    i
    t
    e
    s w
    e
    r
    e d
    e
    v
    e
    l
    o
    p
    e
    d
    o
    n t
    h
    e d
    e
    s
    k
    t
    o
    p c
    o
    m
    p
    u
    t
    e
    r
    , w
    i
    t
    h d
    e
    s
    k
    t
    o
    p r
    e
    a
    d
    i
    n
    g d
    i
    s
    t
    a
    n
    c
    e
    , w
    i
    t
    h a
    _
    d
    e
    s
    k
    t
    o
    p d
    o
    w
    n
    _
    , r
    a
    t
    h
    e
    r t
    h
    a
    n a _
    m
    o
    b
    i
    l
    e u
    p
    _ a
    p
    p
    r
    o
    a
    c
    h
    . I
    t

    s o
    b
    v
    i
    o
    u
    s t
    h
    a
    t
    t
    h
    e c
    o
    r
    e r
    e
    s
    p
    o
    n
    s
    i
    v
    e w
    e
    b d
    e
    s
    i
    g
    n a
    r
    s
    e
    n
    a
    l o
    f m
    e
    d
    i
    a q
    u
    e
    r
    i
    e
    s
    , f
    l
    e
    x
    i
    b
    l
    e
    l
    a
    y
    o
    u
    t
    s a
    n
    d f
    l
    e
    x
    i
    b
    l
    e i
    m
    a
    g
    e
    s i
    s n
    o
    t s
    u
    f
    f
    i
    c
    i
    e
    n
    t
    .
    w
    e
    b t
    y
    p
    o
    g
    r
    p
    h
    y
    a
    j
    s
    d
    h
    j
    a
    h
    s
    g
    d
    T
    h
    a
    n
    k y
    o
    u f
    o
    r t
    h
    e l
    o
    v
    e
    l
    y i
    n
    t
    r
    o
    d
    u
    c
    t
    i
    o
    n
    , R
    a
    f
    a
    l
    ! P
    l
    e
    a
    s
    e g
    i
    v
    e a w
    a
    r
    m
    r
    o
    u
    n
    d o
    f a
    p
    p
    l
    a
    u
    s
    e t
    o t
    h
    e o
    r
    g
    a
    n
    i
    z
    e
    r
    s
    .
    L
    e
    t m
    e a
    s
    k y
    o
    u s
    o
    m
    e
    t
    h
    i
    n
    g
    … H
    a
    v
    e y
    o
    u e
    v
    e
    r s
    a
    v
    e
    d a
    n a
    r
    t
    i
    c
    l
    e w
    i
    t
    h
    t
    h
    e i
    n
    t
    e
    n
    t
    i
    o
    n t
    o r
    e
    a
    d i
    t l
    a
    t
    e
    r o
    n a m
    o
    b
    i
    l
    e d
    e
    v
    i
    c
    e i
    n t
    h
    e p
    a
    r
    k
    a
    s
    s
    u
    m
    i
    n
    g t
    h
    a
    t i
    t
    s r
    e
    s
    p
    o
    n
    s
    i
    v
    e w
    e
    b d
    e
    s
    i
    g
    n i
    s a
    l
    l i
    t t
    a
    k
    e
    s f
    o
    r t
    h
    e
    b
    e
    s
    t p
    o
    s
    s
    i
    b
    l
    e r
    e
    a
    d
    i
    n
    g e
    x
    p
    e
    r
    i
    e
    n
    c
    e
    ? H
    a
    v
    e y
    o
    u e
    v
    e
    r b
    e
    e
    n d
    i
    s
    a
    p
    p
    o
    i
    n
    t
    e
    d w
    h
    e
    n
    y
    o
    u r
    e
    a
    l
    i
    z
    e
    d t
    h
    a
    t a
    r
    t
    i
    c
    l
    e
    s o
    n m
    o
    b
    i
    l
    e a
    r
    e h
    a
    r
    d t
    o r
    e
    a
    d b
    e
    c
    a
    u
    s
    e
    o
    f t
    h
    e p
    o
    o
    r
    l
    y c
    h
    o
    s
    e
    n l
    e
    t
    t
    e
    r s
    i
    z
    e a
    n
    d l
    a
    y
    o
    u
    t t
    h
    a
    t a
    p
    p
    e
    a
    r t
    o b
    e
    d
    i
    s
    p
    r
    o
    p
    o
    r
    t
    i
    o
    n
    a
    l t
    o t
    h
    e s
    c
    r
    e
    e
    n
    ?
    S
    o
    , w
    h
    y i
    s t
    h
    i
    s h
    a
    p
    p
    e
    n
    i
    n
    g
    ? H
    o
    w d
    o s
    u
    c
    h
    , o
    t
    h
    e
    r
    w
    i
    s
    e b
    e
    a
    u
    t
    i
    f
    u
    l r
    e
    s
    p
    o
    n
    s
    i
    v
    e
    d
    e
    s
    i
    g
    n
    s
    , e
    n
    d u
    p b
    e
    i
    n
    g s
    o p
    o
    o
    r
    l
    y e
    x
    e
    c
    u
    t
    e
    d o
    n m
    o
    b
    i
    l
    e
    ?
    T
    h
    e a
    n
    s
    w
    e
    r i
    s i
    n f
    a
    c
    t q
    u
    i
    t
    e c
    l
    e
    a
    r — s
    u
    c
    h w
    e
    b
    s
    i
    t
    e
    s w
    e
    r
    e d
    e
    v
    e
    l
    o
    p
    e
    d
    o
    n t
    h
    e d
    e
    s
    k
    t
    o
    p c
    o
    m
    p
    u
    t
    e
    r
    , w
    i
    t
    h d
    e
    s
    k
    t
    o
    p r
    e
    a
    d
    i
    n
    g d
    i
    s
    t
    a
    n
    c
    e
    , w
    i
    t
    h a
    _
    d
    e
    s
    k
    t
    o
    p d
    o
    w
    n
    _
    , r
    a
    t
    h
    e
    r t
    h
    a
    n a _
    m
    o
    b
    i
    l
    e u
    p
    _ a
    p
    p
    r
    o
    a
    c
    h
    . I
    t

    s o
    b
    v
    i
    o
    u
    s t
    h
    a
    t
    t
    h
    e c
    o
    r
    e r
    e
    s
    p
    o
    n
    s
    i
    v
    e w
    e
    b d
    e
    s
    i
    g
    n a
    r
    s
    e
    n
    a
    l o
    f m
    e
    d
    i
    a q
    u
    e
    r
    i
    e
    s
    , f
    l
    e
    x
    i
    b
    l
    e
    l
    a
    y
    o
    u
    t
    s a
    n
    d f
    l
    e
    x
    i
    b
    l
    e i
    m
    a
    g
    e
    s i
    s n
    o
    t s
    u
    f
    f
    i
    c
    i
    e
    n
    t
    .
    #
    # M
    A
    N
    Y M
    O
    R
    E V
    A
    R
    I
    A
    B
    L
    E
    S
    A
    p
    a
    r
    t f
    r
    o
    m t
    h
    e o
    b
    v
    i
    o
    u
    s v
    a
    r
    i
    a
    b
    l
    e
    s — v
    i
    e
    w
    p
    o
    r
    t w
    i
    d
    t
    h a
    n
    d v
    i
    e
    w
    p
    o
    r
    t
    h
    e
    i
    g
    h
    t — t
    h
    e
    r
    e a
    r
    e o
    t
    h
    e
    r
    s
    , s
    u
    c
    h a
    s r
    e
    a
    d
    i
    n
    g d
    i
    s
    t
    a
    n
    c
    e
    , p
    i
    x
    e
    l d
    e
    n
    s
    i
    t
    y
    (
    o
    r s
    c
    r
    e
    e
    n c
    r
    u
    d
    e
    n
    e
    s
    s
    )
    , d
    e
    v
    i
    c
    e o
    r
    i
    e
    n
    t
    a
    t
    i
    o
    n a
    n
    d v
    i
    e
    w
    p
    o
    r
    t a
    s
    p
    e
    c
    t r
    a
    t
    i
    o
    , b
    u
    t
    a
    l
    s
    o t
    h
    e c
    o
    n
    t
    e
    n
    t h
    i
    e
    r
    a
    r
    c
    h
    y a
    n
    d i
    n
    f
    o
    r
    m
    a
    t
    i
    o
    n d
    e
    n
    s
    i
    t
    y
    . B
    e
    f
    o
    r
    e I
    e
    l
    a
    b
    o
    r
    a
    t
    e e
    a
    c
    h
    , l
    e
    t m
    e b
    r
    i
    e
    f
    l
    y e
    x
    p
    l
    a
    i
    n t
    h
    e r
    u
    l
    e
    s o
    f t
    h
    e p
    a
    r
    a
    g
    r
    a
    p
    h
    .
    #
    #
    # R
    e
    a
    d
    i
    n
    g d
    i
    s
    t
    a
    n
    c
    e
    T
    h
    e
    r
    e a
    r
    e t
    h
    r
    e
    e w
    h
    i
    t
    e s
    p
    a
    c
    e
    s i
    n
    s
    i
    d
    e t
    h
    e p
    a
    r
    a
    g
    r
    a
    p
    h t
    h
    a
    t a
    r
    e
    i
    n
    t
    e
    r
    d
    e
    p
    e
    n
    d
    e
    n
    t — t
    h
    e l
    e
    t
    t
    e
    r s
    p
    a
    c
    e
    , t
    h
    e w
    o
    r
    d s
    p
    a
    c
    e a
    n
    d t
    h
    e l
    i
    n
    e
    s
    p
    a
    c
    e
    . I
    f a
    n
    y o
    f t
    h
    e t
    h
    r
    e
    e i
    s c
    h
    a
    n
    g
    e
    d
    , a
    l
    l t
    h
    e o
    t
    h
    e
    r
    s s
    h
    o
    u
    l
    d
    b
    e r
    e
    a
    s
    s
    e
    s
    s
    e
    d
    , t
    o
    o
    . 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

    View Slide

  46. 16 18 21 24 36 48 60 72

    View Slide

  47. 16
    16 24 36 54 81 121

    View Slide

  48. modularscale.com

    View Slide

  49. SETTING SUBHEADS WITH CSS

    blog.typekit.com/2013/07/25/setting-subheads-with-css/
    webdesign.maratz.com/lab/subheads/

    View Slide

  50. DATA TABLES

    View Slide

  51. View Slide

  52. View Slide

  53. Today Week Month
    123 1234 12345
    345 3456 34567

    View Slide

  54. 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 Slide

  55. View Slide

  56. table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    }
    th, td {
    border-top: .1em solid #ccc;
    padding: .74em 1em .75em;
    vertical-align: top;
    }
    td.numeric {
    text-align: right;
    }

    View Slide

  57. ALMOST DONE!

    View Slide

  58. Preparation
    Selecting a typeface
    Paragraphs
    Text hierarchy
    Tabular data
    THE PLAN

    View Slide

  59. thinkingwithtype.com
    fontfeed.com
    explorationsintypography.com
    typetester.org

    View Slide

  60. Hvala!
    Marko Dugonjić
    @markodugonjic
    creativenights.com

    View Slide