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

Type on the Web

Type on the Web

A session on web typography which has a huge impact on UX

Codepens:
display text, body text, and functional text
Type on the Web #1
Type on the Web #2
Type on the Web #3
liga, dlig – OpenType features
lnum/onum, pnum/tnum, ordn – OpenType features
Type on the Web: uppercase and lining numbers
Type on the Web: kerning

Resources:
Different Kinds of Text – 3 Questions to Start for Choosing the Right Typeface on Oliver Schöndorfer’s YouTube channel Pimp My Type
(Front-Trends) Save the Last Talk for Me – Example of different fonts used for display text, body text, and functional text

Gunnar Bittersmann

June 06, 2021
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

Transcript

  1. TYPEON
    THE
    WEB

    View Slide

  2. View Slide

  3. Il-18
    Il-18
    Il-18
    Ил-18
    Kaboldy, CC BY-SA 3.0
    Fira Sans
    Roboto
    Neue Helvetica

    View Slide

  4. legibility
    ease with which a reader
    can decode symbols
    readability
    ease with which a reader
    can follow and understand
    words, sentences and
    paragraphs.

    View Slide

  5. View Slide

  6. All human beings are born free and
    equal in dignity and rights. They are
    endowed with reason and
    conscience and should act towards
    one another in a spirit of
    brotherhood.
    Universal Declaration
    of Human Rights

    View Slide

  7. All human beings are born free and
    equal in dignity and rights. They are
    e n d o w e d w i t h r e a s o n a n d
    conscience and should act towards
    one another in a spirit of
    brotherhood.
    Universal Declaration
    of Human Rights

    View Slide

  8. View Slide

  9. FOIT
    FOUT
    FUCK

    View Slide

  10. View Slide

  11. View Slide

  12. All human beings are born free
    and equal in dignity and rights.
    They are endowed with reason
    and conscience and should act
    towards one another in a spirit
    of brotherhood.
    Universal Declaration
    of Human Rights

    View Slide

  13. All human beings are born free and
    equal in dignity and rights. They
    are endowed with reason and
    conscience and should act towards
    one another in a spirit of
    brotherhood.
    Universal Declaration
    of Human Rights

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Alexanderplatz
    baseline
    ascent
    cap height
    mean line
    descent
    x-height

    View Slide

  21. Älexanderplatz
    baseline
    ascent
    cap height
    mean line
    descent
    x-height
    font
    size

    View Slide

  22. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
    est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.
    10
    25

    View Slide

  23. View Slide

  24. View Slide

  25. !

    View Slide

  26. View Slide

  27. !
    !

    View Slide

  28. View Slide