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

Typefaces for screens

Gerry Leonidas
September 16, 2014

Typefaces for screens

Talk given at SmashingConf Freiburg, outlining a few notions to keep in mind when looking at typefaces, which are helpful when considering fonts for the web. And a few other ideas about typography for global audiences.

Gerry Leonidas

September 16, 2014
Tweet

More Decks by Gerry Leonidas

Other Decks in Design

Transcript

  1. SmashingConf Freiburg | 2014
    !
    Typefaces for screens
    Gerry Leonidas
    !
    !
    Department of Typography 

    & Graphic Communication

    View Slide

  2. Typeface design is
    larger than you think,
    global, and indispensable.

    View Slide

  3. Linotype & Machinery Type Drawing Office

    View Slide

  4. L&M type drawing

    View Slide

  5. Monotype keyboard and caster

    View Slide

  6. Joana Correia’s workspace

    View Slide

  7. Jos Buivenga’s workspace

    View Slide

  8. most of you
    2010 World demographics from populationpyramid.net

    View Slide

  9. Typefaces are the nexus of 

    authors, content, and readers.

    View Slide

  10. 1. character set

    View Slide

  11. Gujarati type in Kalapi Gajjar’s hand

    View Slide

  12. Bengali typewriter

    View Slide

  13. Bengali 1/3 by Neel Kshetrimauym MATD 2010

    View Slide

  14. Bengali 2/3 by Neel Kshetrimauym MATD 2010

    View Slide

  15. Bengali 3/3 by Neel Kshetrimauym MATD 2010

    View Slide

  16. 2. glyphs

    View Slide

  17. Céline Willame, 2013
    The Romans followed the Greeks¹º,
    in the footsteps of their predecessors,
    they sought to reconcile the cycles
    of the sun and the moon —
    50/60 pt
    Riccardo Lorusso MATD 2013

    View Slide

  18. Prakashan wa
    designed with
    the intention
    of developing
    corresponding
    styles in Odia
    and Latin,
    supporting a
    wider range of
    typographic
    expression.
    latin italic
    v
    odia hairline
    odia regular
    odia bold
    odia display
    ପନଶଉ
    latin light
    latin regular
    latin bold
    latin display
    w r s m
    A dysfunctional family is a family in which conflict,
    misbehaviour, and often child neglect or abuse on the part
    of individual parents occur continually and regularly,
    leading other members to accommodate such actions.
    Children sometimes grow up in such families with the
    understanding that such an arrangement is normal.
    Latin and Oriya by Alessia Mazzarella MATD 2013

    View Slide

  19. Riccardo Olocco MATD 2014

    View Slide

  20. 3. behaviours
    !

    View Slide

  21. Gujarati orbital matras by Kalapi Gajjar MATD 2012

    View Slide

  22. Juan Luis Blanco MATD 2014

    View Slide

  23. 4. encoding

    View Slide

  24. Examples for an encoding scheme or canonical representations?

    View Slide

  25. example of Unicode confusion

    View Slide

  26. Typefaces enable:
    1. language and memory
    2. communication and behaviours
    3. community, identity, 

    innovation, originality *

    View Slide

  27. Lushootseed typeface by Juliet Shen MATD 2006

    View Slide

  28. Diacritics for Brazilian indigenous languages by Rafael Dietzsch MATD 2012

    View Slide

  29. Gentium by Victor Gaultney MATD 2002

    View Slide

  30. Georgia
    Verdana
    Calibri    
    Cambria    
    Candara  
    Consolas    
    Constantia  
    Corbel

    View Slide

  31. View Slide

  32. The BBC. Who could tell?

    View Slide

  33. The NY Times with Cheltenham headings

    View Slide

  34. Looped and loopless Thai © Ben Mitchell MATD2012

    View Slide

  35. Upright and secondary Korean by Jeongmin Kwon MATD2014

    View Slide

  36. UniversitiesUK week, spring 2014

    View Slide

  37. View Slide

  38. [the four typefaces I recommended in my next tweet were: ]

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Tisa used in an earlier version of Medium

    View Slide

  43. View Slide

  44. > even spacing
    > open counters
    > clear stroke joints
    !
    > typeset texture determines identity

    View Slide

  45. scholarly
    adhesion
    [even spacing]

    View Slide

  46. scholarly
    adhesion

    View Slide

  47. scholarly
    adhesion
    [open counters]

    View Slide

  48. scholarly
    adhesion

    View Slide

  49. scholarly
    adhesion

    View Slide

  50. scholarly
    adhesion
    [clear stroke joints]

    View Slide

  51. scholarly
    adhesion

    View Slide

  52. scholarly
    adhesion

    View Slide

  53. scholarly
    adhesion

    View Slide

  54. Aims to have a deep knowledge in
    his field, and a wide understanding
    in relates ones. Knows where the
    gaps in his knowledge lie, and how
    to fill those in when they intervene
    with the ability to understand and
    explain. Recognises his limits, and
    tries to be conscious of his bias,
    such as it is. Combines a long view
    to detect trends, and an
    appreciation of the potential impact
    of individual actions.
    Has a refined bullshit detector.
    Aims to have a deep knowledge in
    his field, and a wide
    understanding in relates ones.
    Knows where the gaps in his
    knowledge lie, and how to fill
    those in when they intervene with
    the ability to understand and
    explain. Recognises his limits, and
    tries to be conscious of his bias,
    such as it is. Combines a long view
    to detect trends, and an
    appreciation of the potential
    impact of individual actions.
    Has a refined bullshit detector.

    View Slide

  55. ande
    ande
    Elena and Tisa

    View Slide

  56. danilio
    dani i
    l o
    Elena and Helvetica

    View Slide

  57. danilio
    dani i
    l o
    Helvetica on Elena spacing

    View Slide

  58. danilio
    danilio
    Helvetica on native spacing

    View Slide

  59. danilio
    danilio
    Ideal Sans and Helvetica

    View Slide

  60. Aims to have a deep knowledge in
    his field, and a wide understanding
    in relates ones. Knows where the
    gaps in his knowledge lie, and how
    to fill those in when they intervene
    with the ability to understand and
    explain. Recognises his limits, and
    tries to be conscious of his bias,
    such as it is. Combines a long view
    to detect trends, and an
    appreciation of the potential impact
    of individual actions.
    Has a refined bullshit detector.
    Aims to have a deep knowledge in
    his field, and a wide
    understanding in relates ones.
    Knows where the gaps in his
    knowledge lie, and how to fill
    those in when they intervene with
    the ability to understand and
    explain. Recognises his limits, and
    tries to be conscious of his bias,
    such as it is. Combines a long view
    to detect trends, and an
    appreciation of the potential
    impact of individual actions.
    Has a refined bullshit detector.

    View Slide

  61. De Aetna, Aldus Manutius

    View Slide

  62. unde incendia oriantur Aetnae tuae :
    habe nunc quómodo etiam orta per -
    durent in
    : quo quidem nolo ego te il -
    lud admirari ,quod uulgusfolet:magnū
    tantas flammas
    memoriam
    alerétur

    View Slide

  63. Instapaper and De Aetna

    View Slide

  64. Complex, global typography

    View Slide

  65. Bilingual Lexicon

    View Slide

  66. slide from vimeo.com/73444208

    View Slide

  67. Jordan Bell MATD 2014

    View Slide

  68. Forthcoming briefs for the MATD from the Script Encoding Initiative

    View Slide

  69. The joy of lettershapes
    !
    !
    !
    !
    !
    !
    [examples by MATD 2014 students;

    more on typefacedesign.net]

    View Slide

  70. Arabic

    View Slide

  71. Bengali

    View Slide

  72. Georgian

    View Slide

  73. Gujarati

    View Slide

  74. Gurmukhi

    View Slide

  75. Hiragana

    View Slide

  76. not Italian

    View Slide

  77. Kanji

    View Slide

  78. Khmer

    View Slide

  79. Korean

    View Slide

  80. Malayalam

    View Slide

  81. z as in zamboni

    View Slide

  82. If you think you’re nerds,
    think again.

    View Slide

  83. Thank you, and get in touch
    !
    @gerryleonidas
    @typefacedesign
    reading.ac.uk/typography
    typefacedesign.net

    View Slide