Erste Hilfe Web Typografie
•
0 gefällt mir•1,423 views
Fünf Tipps mit denen man Websites besser lesbar macht. 95 Prozent des Webs bestehen aus Text. Diesen gut aufzubereiten ist mittlerweile auch Aufgabe von allen, die für das Web gestalten. In fünf einfachen Tipps sieht man, wie die gröbsten Fehler vermeidet und eine angenehme User-Experience über Text vermittelt werden kann. Es geht um die Liebe zur Schrift, ein paar Häppchen CSS, verirrte Satzzeichen und wie man das alles gut zusammenfügt.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
Erste Hilfe Web Typografie
- 4. Wir ha en noch nie so wenig typografische Kontrolle. Wir ha en noch nie so viel typografische Kontrolle.
- 5. glyphe – Die richtige Schrift – Harmonische Maße – Gefährlicher Blocksatz – Achtung! Fake-Fonts – Der Teufel im Detail Fünf Schritten zur guten Lesetypografie
- 7. glyphe Es gibt schlecht eingesetzte Schri en. ES GIBT KEINE SCHLECHTEN SCHRIFTEN.
- 8. glyphe Für längere Texte und in kleinen Schriftgraden sind Display Schriften ungeeignet
- 9. glyphe Leseschriften sind am besten, wenn sie nicht auffallen
- 10. glyphe – Die Schri sollte 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-size max-width line-height
- 13. Abc Abc Abc Abc
- 14. glyphe Abc Abc Abc Abc Die Schriftgröße sollte der Distanz des Betrachters zum Gerät angepasst werden
- 15. glyphe Abc Abc Abc Abc font-size: 1.25em; font-size: 1em; font-size: 0.9em;
- 17. glyphe „Eine Zeile hat dann 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ötigen einen höheren Zeilenabstand
- 19. glyphe Kurze Zeilen benötigen einen geringeren Zeilenabstand
- 20. p { max-width: 34em; /* ~70 Zeichen in diesem Font */ line-height: 1.5; }
- 21. glyphe Die ideale Zeile ist ca. 70 Zeichen lang mit 1,5-fachem Zeilenabstand
- 22. 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
- 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. glyphe
- 29. glyphe
- 30. glyphe – Keinen Blocksatz verwenden – Niemals – Nein, auch dann nicht Tipps zum Umgang mit Blocksatz im Web
- 32. glyphe Unbeabsichtigt verfettete Fonts durch das user agent styling
- 33. glyphe
- 34. glyphe
- 35. Fonts werden am Server 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: '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; }
- 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 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
- 43. Typewriter by Amy Ross / CC BY-NC-ND 2.0
- 45. glyphe Akzente << >> <html> id="nav" é ó à ì Kodierungszeichen Spitze Klammern " " ´´ ``
- 46. glyphe Curly quotes «Bonjour, madame.» Gänsefüßchen Guillemets „Schon viel besser.“ “Cup of tea, James.”
- 47. glyphe „Sehr gut“ alt + 0132 ⌥ + ^ Eselsbrücke: 99 alt + 0147 ⌥ + 2 Eselsbrücke: 66
- 49. glyphe Karin‘s Versagen Peter's Ratlosigkeit Birgit´s Scheitern
- 50. glyphe Karins Versagen Peters Ratlosigkeit Birgits Scheitern
- 51. glyphe Kathy‘s failure Lukas' Schri Wie geht´s?
- 52. glyphe Kathy‘s failure Lukas' Schri Wie geht´s? Akzent Kodierungszeichen Left single quote‘Hello’ url('bg.png') á é í ó ú
- 53. glyphe
- 54. glyphe Kathy’s success Lukas’ neue Schri Wie geht’s dir?
- 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 curly quote –en dash –en dash