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

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