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

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

June 06, 2021
Tweet

Transcript

  1. TYPEON THE WEB

  2. None
  3. Il-18 Il-18 Il-18 Ил-18 Kaboldy, CC BY-SA 3.0 Fira Sans

    Roboto Neue Helvetica
  4. legibility ease with which a reader can decode symbols readability

    ease with which a reader can follow and understand words, sentences and paragraphs.
  5. None
  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
  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
  8. None
  9. FOIT FOUT FUCK

  10. None
  11. None
  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
  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
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. Alexanderplatz baseline ascent cap height mean line descent x-height

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

    size
  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
  23. None
  24. None
  25. !

  26. None
  27. ! !

  28. None