Erste Hilfe Web Typografie

1. 86/60glypheOliver Schöndorfer

2. Wir ha en noch nie so wenig typograﬁsche Kontrolle. Wir ha en noch nie so viel typograﬁsche Kontrolle.

3. glyphe – Die richtige Schrift – Harmonische Maße – Gefährlicher Blocksatz – Achtung! Fake-Fonts – Der Teufel im Detail Fünf Schritten zur guten Lesetypograﬁe

4. glyphe Es gibt schlecht eingesetzte Schri en. ES GIBT KEINE SCHLECHTEN SCHRIFTEN.

5. glyphe Für längere Texte und in kleinen Schriftgraden sind Display Schriften ungeeignet

6. glyphe Leseschriften sind am besten, wenn sie nicht auffallen

7. glyphe – Die Schri sollte zum Thema passen – Je langweiliger, desto besser – Einsatzbereich bedenken (benötigte Schni e, Ziﬀern, Zeichen, Sonderzeichen und Alphabete sind vorhanden) Tipps zur Schriftwahl

8. Schri größe ZeilenabstandZeilenlänge font-size max-width line-height

9. Abc Abc Abc Abc

10. glyphe Abc Abc Abc Abc Die Schriftgröße sollte der Distanz des Betrachters zum Gerät angepasst werden

11. glyphe Abc Abc Abc Abc font-size: 1.25em; font-size: 1em; font-size: 0.9em;

12. glyphe „Eine Zeile hat dann die richtige Länge, wenn der Leseﬂuss nicht zu o abgebrochen wird und wenn das Auge beim Umwechseln die nächste Zeile ohne Irritation wiederﬁndet.“ Otl Aicher in „typographie“, S. 149

13. glyphe Lange Zeilen benötigen einen höheren Zeilenabstand

14. glyphe Kurze Zeilen benötigen einen geringeren Zeilenabstand

15. p { max-width: 34em; /* ~70 Zeichen in diesem Font */ line-height: 1.5; }

16. glyphe Die ideale Zeile ist ca. 70 Zeichen lang mit 1,5-fachem Zeilenabstand

17. glyphe – Schri größe an die Distanz zum Medium anpassen – Je länger die Zeile, desto höher die line-height – Je kürzer die Zeile, desto niedriger die line-height – Meistens ist ein Wert von um die 1.5 passend Tipps für harmonische Maße

18. glyphe http://forbes.at/5starts-wo-ideen-keimen

19. glyphe Blocksatz ohne Silbentrennung: es können gefährlich große Wortabstände entstehen

20. <html lang="de"> p { text-align: justify; hyphens: auto; }

21. glyphe Blocksatz mit Silbentrennung: Wortabstände sind gleichmäßiger aber bleiben grenzwertig

22. glyphe

23. glyphe

24. glyphe – Keinen Blocksatz verwenden – Niemals – Nein, auch dann nicht Tipps zum Umgang mit Blocksatz im Web

25. glyphe Unbeabsichtigt verfettete Fonts durch das user agent styling

26. glyphe

27. glyphe

28. Fonts werden am Server installiert

29. @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold.eot'); src: url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold.woff') format('woff'), url('OpenSans-Bold.ttf') format('truetype'), url('OpenSans-Bold.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; }

30. @font-face { font-family: 'Open Sans'; src: url('OpenSans-Bold.eot'); src: url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold.woff') format('woff'), url('OpenSans-Bold.ttf') format('truetype'), url('OpenSans-Bold.svg#open_sansbold') format('svg'); font-weight: bold; font-style: normal; }

31. Fonts werden gehostet

32. h1 { font-family: 'Monoton'; font-weight: normal; /* Font wird sonst verfettet */ }

33. strong { font-weight: normal; /* da Font nicht vorhanden */ color: red; }

34. glyphe – Den gleichen Namen für die gleiche font-family angeben – font-weight und font-stlye entsprechend anpassen Bei gehosteten Fonts – Die benötigten Fonts auch laden – Falls nicht vorhanden das Stylesheet entsprechend anpassen – Auf user agent Styling achten (vor allem bei headings) Bei Zugriff zu @font-face

35. Typewriter by Amy Ross / CC BY-NC-ND 2.0

36. glyphe <<Entsetzlich.>> "Schlecht angeführt." ´´Noch schlimmer``

37. glyphe Akzente << >> <html> id="nav" é ó à ì Kodierungszeichen Spitze Klammern " " ´´ ``

38. glyphe Curly quotes «Bonjour, madame.» Gänsefüßchen Guillemets „Schon viel besser.“ “Cup of tea, James.”

39. glyphe „Sehr gut“ alt + 0132  ⌥ + ^ Eselsbrücke: 99 alt + 0147  ⌥ + 2 Eselsbrücke: 66

40. glyphe Karin‘s Versagen Peter's Ratlosigkeit Birgit´s Scheitern

41. glyphe Karins Versagen Peters Ratlosigkeit Birgits Scheitern

42. glyphe Kathy‘s failure Lukas' Schri Wie geht´s?

43. glyphe Kathy‘s failure Lukas' Schri Wie geht´s? Akzent Kodierungszeichen Left single quote‘Hello’ url('bg.png') á é í ó ú

44. glyphe

45. glyphe Kathy’s success Lukas’ neue Schri Wie geht’s dir?

46. glyphe So ist’s gut!

47. glyphe So ist’s gut! alt + 0146  ⌥ + ⇧ + # Eselsbrücke: 9

48. glyphe Und hier gibt’s — echt — zu viel. Ich denke-hoﬀentlich-richtig. Ich denke – aber sicher – richtig.

49. glyphe Gedankenstrich (en dash) — € 100,— ge-teilt  Typo-Meister gut – gell?  Ost–West Divis (hyphen) Geviertstrich (em dash) - –

50. glyphe gut – gell? alt + 0150  ⌥ + - Bei Zweifel mit Divis vergleichen

51. ' " "- -

52. ’ “ ” Apostroph Opening  curly quote Closing  curly quote –en dash –en dash

Erste Hilfe Web Typografie

You are reading a preview.

Check these out next

Erste Hilfe Web Typografie

More Related Content

Recently uploaded (20)

Featured (20)