MIKROTYPOGRAPHIE
     IM WEB
 Wolf Brüning – webvariants / UCDplus
AGENDA

• Warum   ist saubere Typographie wichtig

• Rückblick   auf Christophs Vortrag

• Mikrotypographie    allgemein

...
WARUM

• Lesbarkeit

• Ästhetik

• Professionelles Auftreten




• Sauberer Textsatz
                 ist eines der am häu...
ALLGEMEINE TYPOGRAPHIE

• Schriftarten   und -schnitte

• Text-   und Hintergrundfarbe

• Laufweite   und Zeilenabstände

...
Nicht optimierter Text
Laufweite
Schriftarten und -schnitte
Schriftgrößen
Farben
Vertikaler Rhythmus
Einzüge
MIKROTYPOGRAPHIE
MIKROTYPOGRAPHIE
MIKROTYPOGRAPHIE
MIKROTYPOGRAPHIE
WICHTIGE SONDERZEICHEN

Anführungszeichen
                    „“
   Einfach
                    ,’
   Französisch
        ...
HTML-ENTITIES

Anführungszeichen
                         „“         „ ”
   Einfach
                         ,...
SAY HELLO TO...




UTF-8
SONDERZEICHEN PC

Anführungszeichen
                     „“    Alt+0132, Alt+0147
   Einfach
                     ,’    Al...
SONDERZEICHEN MAC

Anführungszeichen
                     „“       Alt+^, Alt+2
   Einfach
                     ,’    Shif...
EINSATZ VON MIKROTYPOGRAPHIE

• Vorteile:

 • Ästhetischeres   Schriftbild

 • Formale    Korrektheit

• Nachteile

 • Änd...
MEHR DAZU

• The trouble with EM ‘n EN and other shady characters
 http://www.alistapart.com/articles/emen/

• Web Typogra...
Magdeburg | 2010-04-12 | Typographie im Web
Nächste SlideShare
Wird geladen in …5
×

Magdeburg | 2010-04-12 | Typographie im Web

1.679 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Magdeburg | 2010-04-12 | Typographie im Web

  1. 1. MIKROTYPOGRAPHIE IM WEB Wolf Brüning – webvariants / UCDplus
  2. 2. AGENDA • Warum ist saubere Typographie wichtig • Rückblick auf Christophs Vortrag • Mikrotypographie allgemein • Mikrotypographie im Web
  3. 3. WARUM • Lesbarkeit • Ästhetik • Professionelles Auftreten • Sauberer Textsatz ist eines der am häufigsten vernachlässigten Felder im Webdesign
  4. 4. ALLGEMEINE TYPOGRAPHIE • Schriftarten und -schnitte • Text- und Hintergrundfarbe • Laufweite und Zeilenabstände • Einzüge • Abstände
  5. 5. Nicht optimierter Text
  6. 6. Laufweite
  7. 7. Schriftarten und -schnitte
  8. 8. Schriftgrößen
  9. 9. Farben
  10. 10. Vertikaler Rhythmus
  11. 11. Einzüge
  12. 12. MIKROTYPOGRAPHIE
  13. 13. MIKROTYPOGRAPHIE
  14. 14. MIKROTYPOGRAPHIE
  15. 15. MIKROTYPOGRAPHIE
  16. 16. WICHTIGE SONDERZEICHEN Anführungszeichen „“ Einfach ,’ Französisch »« Gedankenstrich – Trennstrich - Auslassung …
  17. 17. HTML-ENTITIES Anführungszeichen „“ „ ” Einfach ,’ ‚ ’ Französisch »« » « Gedankenstrich – – — Trennstrich - ­ Auslassung … …
  18. 18. SAY HELLO TO... UTF-8
  19. 19. 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
  20. 20. 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+.
  21. 21. EINSATZ VON MIKROTYPOGRAPHIE • Vorteile: • Ästhetischeres Schriftbild • Formale Korrektheit • Nachteile • Änderungen direkt im HTML, erhöhter Aufwand • Schwierig zu kontrollieren, z.B. in CMS
  22. 22. 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

×