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
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.
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
9. FOIT FOUT FUCK
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
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
25. !
27. ! !