Als PDF, PPTX herunterladen
Hochgeladen vonOliver Schöndorfer
Erste Hilfe Web Typografie
Das Dokument behandelt die typografische Gestaltung, betont die Bedeutung der richtigen Schriftwahl für Lesefluss und Effektivität von Texten und gibt praktische Tipps zur Schriftgröße, Zeilenabstand und Verwendung von Blocksätzen. Ferner wird auf den Umgang mit verschiedenen Schriftarten und deren Einstellungen eingegangen. Darüber hinaus werden typische Fehler und deren Vermeidung in der Typografie angesprochen.
Erste Hilfe Web Typografie
- 2.
- 4. Wir ha ennoch nie so wenig typografische Kontrolle. Wir ha en noch nie so viel typografische Kontrolle.
- 5. glyphe – Die richtigeSchrift – Harmonische Maße – Gefährlicher Blocksatz – Achtung! Fake-Fonts – Der Teufel im Detail Fünf Schritten zur guten Lesetypografie
- 7. glyphe Es gibt schlechteingesetzte Schri en. ES GIBT KEINE SCHLECHTEN SCHRIFTEN.
- 8. glyphe Für längere Texteund in kleinen Schriftgraden sind Display Schriften ungeeignet
- 9. glyphe Leseschriften sind ambesten, wenn sie nicht auffallen
- 10. glyphe – Die Schrisollte zum Thema passen – Je langweiliger, desto besser – Einsatzbereich bedenken (benötigte Schni e, Ziffern, Zeichen, Sonderzeichen und Alphabete sind vorhanden) Tipps zur Schriftwahl
- 12. Schri größe ZeilenabstandZeilenlänge font-sizemax-width line-height
- 13.
- 14. glyphe Abc Abc AbcAbc Die Schriftgröße sollte der Distanz des Betrachters zum Gerät angepasst werden
- 15. glyphe Abc Abc AbcAbc font-size: 1.25em; font-size: 1em; font-size: 0.9em;
- 17. glyphe „Eine Zeile hatdann die richtige Länge, wenn der Lesefluss nicht zu o abgebrochen wird und wenn das Auge beim Umwechseln die nächste Zeile ohne Irritation wiederfindet.“ Otl Aicher in „typographie“, S. 149
- 18. glyphe Lange Zeilen benötigeneinen höheren Zeilenabstand
- 19. glyphe Kurze Zeilen benötigeneinen geringeren Zeilenabstand
- 20. p { max-width: 34em;/* ~70 Zeichen in diesem Font */ line-height: 1.5; }
- 21. glyphe Die ideale Zeileist ca. 70 Zeichen lang mit 1,5-fachem Zeilenabstand
- 22. glyphe – Schri größean 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
- 24.
- 25. glyphe Blocksatz ohne Silbentrennung:es können gefährlich große Wortabstände entstehen
- 26. <html lang="de"> p { text-align:justify; hyphens: auto; }
- 27. glyphe Blocksatz mit Silbentrennung:Wortabstände sind gleichmäßiger aber bleiben grenzwertig
- 28.
- 29.
- 30. glyphe – Keinen Blocksatzverwenden – Niemals – Nein, auch dann nicht Tipps zum Umgang mit Blocksatz im Web
- 32. glyphe Unbeabsichtigt verfettete Fontsdurch das user agent styling
- 33.
- 34.
- 35. Fonts werden amServer installiert
- 36. @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; }
- 37. @font-face { font-family: 'OpenSans'; 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; }
- 38.
- 39. h1 { font-family: 'Monoton'; font-weight:normal; /* Font wird sonst verfettet */ }
- 40. strong { font-weight: normal;/* da Font nicht vorhanden */ color: red; }
- 41. glyphe – Den gleichenNamen 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
- 43. Typewriter by AmyRoss / CC BY-NC-ND 2.0
- 44.
- 45. glyphe Akzente << >> <html> id="nav" éó à ì Kodierungszeichen Spitze Klammern " " ´´ ``
- 46. glyphe Curly quotes «Bonjour, madame.» Gänsefüßchen Guillemets „Schonviel besser.“ “Cup of tea, James.”
- 47. glyphe „Sehr gut“ alt +0132 ⌥ + ^ Eselsbrücke: 99 alt + 0147 ⌥ + 2 Eselsbrücke: 66
- 49.
- 50.
- 51.
- 52. glyphe Kathy‘s failure Lukas' Schri Wiegeht´s? Akzent Kodierungszeichen Left single quote‘Hello’ url('bg.png') á é í ó ú
- 53.
- 54. glyphe Kathy’s success Lukas’ neueSchri Wie geht’s dir?
- 55.
- 56. glyphe So ist’s gut! alt+ 0146 ⌥ + ⇧ + # Eselsbrücke: 9
- 57. glyphe Und hier gibt’s— echt — zu viel. Ich denke-hoffentlich-richtig. Ich denke – aber sicher – richtig.
- 58. glyphe Gedankenstrich (en dash) —€ 100,— ge-teilt Typo-Meister gut – gell? Ost–West Divis (hyphen) Geviertstrich (em dash) - –
- 59. glyphe gut – gell? alt+ 0150 ⌥ + - Bei Zweifel mit Divis vergleichen
- 61.
- 62. ’ “ ” Apostroph Opening curly quote Closing curlyquote –en dash –en dash