Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
86/60glypheOliver Schöndorfer
Wir ha en noch nie so wenig typografische Kontrolle. Wir ha en noch nie so viel typografische Kontrolle.
glyphe – Die richtige Schrift – Harmonische Maße – Gefährlicher Blocksatz – Achtung! Fake-Fonts – Der Teufel im Detail Fün...
glyphe Es gibt schlecht eingesetzte Schri en. ES GIBT KEINE SCHLECHTEN SCHRIFTEN.
glyphe Für längere Texte und in kleinen Schriftgraden sind Display Schriften ungeeignet
glyphe Leseschriften sind am besten, wenn sie nicht auffallen
glyphe – Die Schri sollte zum Thema passen – Je langweiliger, desto besser – Einsatzbereich bedenken (benötigte Schni e, Z...
Schri größe ZeilenabstandZeilenlänge font-size max-width line-height
Abc Abc Abc Abc
glyphe Abc Abc Abc Abc Die Schriftgröße sollte der Distanz des Betrachters zum Gerät angepasst werden
glyphe Abc Abc Abc Abc font-size: 1.25em; font-size: 1em; font-size: 0.9em;
glyphe „Eine Zeile hat dann die richtige Länge, wenn der Lesefluss nicht zu o abgebrochen wird und wenn das Auge beim Umwec...
glyphe Lange Zeilen benötigen einen höheren Zeilenabstand
glyphe Kurze Zeilen benötigen einen geringeren Zeilenabstand
p { max-width: 34em; /* ~70 Zeichen in diesem Font */ line-height: 1.5; }
glyphe Die ideale Zeile ist ca. 70 Zeichen lang mit 1,5-fachem Zeilenabstand
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...
glyphe http://forbes.at/5starts-wo-ideen-keimen
glyphe Blocksatz ohne Silbentrennung: es können gefährlich große Wortabstände entstehen
<html lang="de"> p { text-align: justify; hyphens: auto; }
glyphe Blocksatz mit Silbentrennung: Wortabstände sind gleichmäßiger aber bleiben grenzwertig
glyphe
glyphe
glyphe – Keinen Blocksatz verwenden – Niemals – Nein, auch dann nicht Tipps zum Umgang mit Blocksatz im Web
glyphe Unbeabsichtigt verfettete Fonts durch das user agent styling
glyphe
glyphe
Fonts werden am Server installiert
@font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold.eot'); src: url('OpenSans-Bold.eot?#iefix') format('emb...
@font-face { font-family: 'Open Sans'; src: url('OpenSans-Bold.eot'); src: url('OpenSans-Bold.eot?#iefix') format('embedde...
Fonts werden gehostet
h1 { font-family: 'Monoton'; font-weight: normal; /* Font wird sonst verfettet */ }
strong { font-weight: normal; /* da Font nicht vorhanden */ color: red; }
glyphe – Den gleichen Namen für die gleiche font-family angeben – font-weight und font-stlye entsprechend anpassen Bei geh...
Typewriter by Amy Ross / CC BY-NC-ND 2.0
glyphe <<Entsetzlich.>> "Schlecht angeführt." ´´Noch schlimmer``
glyphe Akzente << >> <html> id="nav" é ó à ì Kodierungszeichen Spitze Klammern " " ´´ ``
glyphe Curly quotes «Bonjour, madame.» Gänsefüßchen Guillemets „Schon viel besser.“ “Cup of tea, James.”
glyphe „Sehr gut“ alt + 0132  ⌥ + ^ Eselsbrücke: 99 alt + 0147  ⌥ + 2 Eselsbrücke: 66
glyphe Karin‘s Versagen Peter's Ratlosigkeit Birgit´s Scheitern
glyphe Karins Versagen Peters Ratlosigkeit Birgits Scheitern
glyphe Kathy‘s failure Lukas' Schri Wie geht´s?
glyphe Kathy‘s failure Lukas' Schri Wie geht´s? Akzent Kodierungszeichen Left single quote‘Hello’ url('bg.png') á é í ó ú
glyphe
glyphe Kathy’s success Lukas’ neue Schri Wie geht’s dir?
glyphe So ist’s gut!
glyphe So ist’s gut! alt + 0146  ⌥ + ⇧ + # Eselsbrücke: 9
glyphe Und hier gibt’s — echt — zu viel. Ich denke-hoffentlich-richtig. Ich denke – aber sicher – richtig.
glyphe Gedankenstrich (en dash) — € 100,— ge-teilt
 Typo-Meister gut – gell?
 Ost–West Divis (hyphen) Geviertstrich (em da...
glyphe gut – gell? alt + 0150  ⌥ + - Bei Zweifel mit Divis vergleichen
' " "- -
’ “ ” Apostroph Opening
 curly quote Closing
 curly quote –en dash –en dash
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Erste Hilfe Web Typografie
Upcoming SlideShare
Loading in …5
×

Erste Hilfe Web Typografie

1,218 views

Published on

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.

Published in: Design
no profile picture user

  • Login to see the comments

  • Be the first to like this

Erste Hilfe Web Typografie

  1. 1. 86/60glypheOliver Schöndorfer
  2. 2. Wir ha en noch nie so wenig typografische Kontrolle. Wir ha en noch nie so viel typografische Kontrolle.
  3. 3. glyphe – Die richtige Schrift – Harmonische Maße – Gefährlicher Blocksatz – Achtung! Fake-Fonts – Der Teufel im Detail Fünf Schritten zur guten Lesetypografie
  4. 4. glyphe Es gibt schlecht eingesetzte Schri en. ES GIBT KEINE SCHLECHTEN SCHRIFTEN.
  5. 5. glyphe Für längere Texte und in kleinen Schriftgraden sind Display Schriften ungeeignet
  6. 6. glyphe Leseschriften sind am besten, wenn sie nicht auffallen
  7. 7. 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
  8. 8. Schri größe ZeilenabstandZeilenlänge font-size max-width line-height
  9. 9. Abc Abc Abc Abc
  10. 10. glyphe Abc Abc Abc Abc Die Schriftgröße sollte der Distanz des Betrachters zum Gerät angepasst werden
  11. 11. glyphe Abc Abc Abc Abc font-size: 1.25em; font-size: 1em; font-size: 0.9em;
  12. 12. 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
  13. 13. glyphe Lange Zeilen benötigen einen höheren Zeilenabstand
  14. 14. glyphe Kurze Zeilen benötigen einen geringeren Zeilenabstand
  15. 15. p { max-width: 34em; /* ~70 Zeichen in diesem Font */ line-height: 1.5; }
  16. 16. glyphe Die ideale Zeile ist ca. 70 Zeichen lang mit 1,5-fachem Zeilenabstand
  17. 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. 18. glyphe http://forbes.at/5starts-wo-ideen-keimen
  19. 19. glyphe Blocksatz ohne Silbentrennung: es können gefährlich große Wortabstände entstehen
  20. 20. <html lang="de"> p { text-align: justify; hyphens: auto; }
  21. 21. glyphe Blocksatz mit Silbentrennung: Wortabstände sind gleichmäßiger aber bleiben grenzwertig
  22. 22. glyphe
  23. 23. glyphe
  24. 24. glyphe – Keinen Blocksatz verwenden – Niemals – Nein, auch dann nicht Tipps zum Umgang mit Blocksatz im Web
  25. 25. glyphe Unbeabsichtigt verfettete Fonts durch das user agent styling
  26. 26. glyphe
  27. 27. glyphe
  28. 28. Fonts werden am Server installiert
  29. 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. 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. 31. Fonts werden gehostet
  32. 32. h1 { font-family: 'Monoton'; font-weight: normal; /* Font wird sonst verfettet */ }
  33. 33. strong { font-weight: normal; /* da Font nicht vorhanden */ color: red; }
  34. 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. 35. Typewriter by Amy Ross / CC BY-NC-ND 2.0
  36. 36. glyphe <<Entsetzlich.>> "Schlecht angeführt." ´´Noch schlimmer``
  37. 37. glyphe Akzente << >> <html> id="nav" é ó à ì Kodierungszeichen Spitze Klammern " " ´´ ``
  38. 38. glyphe Curly quotes «Bonjour, madame.» Gänsefüßchen Guillemets „Schon viel besser.“ “Cup of tea, James.”
  39. 39. glyphe „Sehr gut“ alt + 0132  ⌥ + ^ Eselsbrücke: 99 alt + 0147  ⌥ + 2 Eselsbrücke: 66
  40. 40. glyphe Karin‘s Versagen Peter's Ratlosigkeit Birgit´s Scheitern
  41. 41. glyphe Karins Versagen Peters Ratlosigkeit Birgits Scheitern
  42. 42. glyphe Kathy‘s failure Lukas' Schri Wie geht´s?
  43. 43. glyphe Kathy‘s failure Lukas' Schri Wie geht´s? Akzent Kodierungszeichen Left single quote‘Hello’ url('bg.png') á é í ó ú
  44. 44. glyphe
  45. 45. glyphe Kathy’s success Lukas’ neue Schri Wie geht’s dir?
  46. 46. glyphe So ist’s gut!
  47. 47. glyphe So ist’s gut! alt + 0146  ⌥ + ⇧ + # Eselsbrücke: 9
  48. 48. glyphe Und hier gibt’s — echt — zu viel. Ich denke-hoffentlich-richtig. Ich denke – aber sicher – richtig.
  49. 49. glyphe Gedankenstrich (en dash) — € 100,— ge-teilt
 Typo-Meister gut – gell?
 Ost–West Divis (hyphen) Geviertstrich (em dash) - –
  50. 50. glyphe gut – gell? alt + 0150  ⌥ + - Bei Zweifel mit Divis vergleichen
  51. 51. ' " "- -
  52. 52. ’ “ ” Apostroph Opening
 curly quote Closing
 curly quote –en dash –en dash

×