Text ist wohl der wichtigste Punkt im Web-Design, immerhin macht es den Großteil einer Webseite aus. Doch trotzdem beschäftigten sich nur ganz wenige in die Tiefe mit Schriftarten, dabei ist das Thema doch überraschend tiefgehender als gedacht. Genau mit diesem Thema beschäftigt sich Web Typography. Mittlerweile hat sich Web-Typography zu einem wirklich vielseitigen Bereich entwickelt. Angefangen von Einsatz von Schrift als Design-Element (font sizes, line heights/lengths, flow/rhythm..) bis zur Web Performance (welchen Einfluss hat meine Font auf die Performance?), Responsive Design (mittlerweile gibt es dafür viele CSS Features) bis hin zu variable Fonts (die es erst seit 2016 gibt). Infolge dieses Projekts werden wir uns mit diesen Aspekten beschäftigen und euch näherbringen.
Fonts...
- affect readability
- make your website distinguishable and memorable, giving it character
- using overused fonts won't make you stand out
Follow the checklist
- Weights and Styles
- Language Support
- Character and OpenType Features
- File Format and Size
- Licensing
- Fonts emit feelings - which one is right for your use case?
- Do your fonts pair well on the font matrix?
- Holy Trinity of Typography - Font Size, Line Height, and Line Length
- Typographic Hierarchy
- Best practices for optimizing fonts
- Responsive Typography
- What are variable fonts?
- How to implement them
- Two identical websites - one follows the principles of Web Typography, the other one breaks the principles in the worst ways possible.
- By clicking a button, you switch between them. This way you see all the subtle benefits of great web typography.
- Hurdles
- Lessons learned
- Our experience
- Emma Mayr
- Luca Nachbar
- Artan Rexhepi
PimpMyType
Fundamentals of Typographie in Web-Design
10 tips on Typography in Web
Webfonts & Webperformance
Case-Study Web-Font Performance
Variable fonts guide
Evolution der Typografie durch variable Fonts