1. MIKROTYPOGRAPHIE
IM WEB
Wolf Brüning – webvariants / UCDplus

2. AGENDA
• Warum ist saubere Typographie wichtig
• Rückblick auf Christophs Vortrag
• Mikrotypographie allgemein
• Mikrotypographie im Web

3. WARUM
• Lesbarkeit
• Ästhetik
• Professionelles Auftreten
• Sauberer Textsatz
ist eines der am häufigsten vernachlässigten
Felder im Webdesign

4. ALLGEMEINE TYPOGRAPHIE
• Schriftarten und -schnitte
• Text- und Hintergrundfarbe
• Laufweite und Zeilenabstände
• Einzüge
• Abstände

5. Nicht optimierter Text

6. Laufweite

7. Schriftarten und -schnitte

8. Schriftgrößen

9. Farben

10. Vertikaler Rhythmus

11. Einzüge

13. MIKROTYPOGRAPHIE

14. MIKROTYPOGRAPHIE

15. MIKROTYPOGRAPHIE

16. MIKROTYPOGRAPHIE

17. WICHTIGE SONDERZEICHEN
Anführungszeichen
„“
Einfach
,’
Französisch
»«
Gedankenstrich
–
Trennstrich
-
Auslassung
…

18. HTML-ENTITIES
Anführungszeichen
„“ „ ”
Einfach
,’ ‚ ’
Französisch
»« » «
Gedankenstrich
– – —
Trennstrich
- ­
Auslassung
… …

19. SAY HELLO TO...
UTF-8

20. SONDERZEICHEN PC
Anführungszeichen
„“ Alt+0132, Alt+0147
Einfach
,’ Alt+0130 , Alt+0145
Französisch
»« Alt+0171, Alt+0187
Gedankenstrich
– Alt+0150, Alt+0150
Trennstrich
-
Auslassung
… Alt+0133

21. SONDERZEICHEN MAC
Anführungszeichen
„“ Alt+^, Alt+2
Einfach
,’ Shift+#, Shift+Alt+#
Französisch
»« Shift+Alt+Q, Alt+Q
Gedankenstrich
– Alt+-, Shift+Alt+-
Trennstrich
-
Auslassung
… Alt+.

22. EINSATZ VON MIKROTYPOGRAPHIE
• Vorteile:
• Ästhetischeres Schriftbild
• Formale Korrektheit
• Nachteile
• Änderungen direkt im HTML, erhöhter Aufwand
• Schwierig zu kontrollieren, z.B. in CMS

23. MEHR DAZU
• The trouble with EM ‘n EN and other shady characters
http://www.alistapart.com/articles/emen/
• Web Typography Sucks
http://www.webtypography.net/sxsw2007
• Website des Vortragenden
http://www.wolfbruening.de