DIN 1450Die Leserlichkeit von Schriften
präsentieren
Die Problemstellung
Unterschiedliche Auffassung
Während eine 10 pt große Schrift am Mac auch
exakt 10 px groß ist, sind es am PC 13 px.
Dies r...
Das menschliche Auge
Unser Auge erfasst sehr viel.
Doch jede Sehschärfe hat ihre Grenzen.
Während der Visus eines 20-jähri...
Mobile Devices
Smartphones und Tablet-PCs bestimmen den Alltag.
Dies bedeutet für uns, dass eine optimale Lesbarkeit
von I...
Desktop Computer
Am Arbeitsplatz hat man meist einen genormten Abstand 

zum Monitor:
15“ = 50 – 60 cm (Laptop-Monitor)
19...
Schriftgröße ist nicht gleich Schrifthöhe
Laut DIN 1450 wird die Mittellänge bzw. die x-Höhe fortan
eine Nenngröße für die...
Klassifizierung von Schriften
Es gibt zwei zu unterscheidende Schriftfamilien:
Die Antiqua (auch Serifenschriften genannt)...
Vorinstallierte Schriften
Es gibt Schnittmengen der installierten Schriften
am PC und Mac, als da wären:
0
25
50
75
100
Ve...
Die x-Höhe
Das bedeutet bei jeweils 10px Schriftgröße:
Verdana
Georgia
Dax Condensed
Times
=> x-height = 5px
=> x-height =...
Die x-Höhe
Mit folgenden Anpassung lässt sich dem entgegenwirken:
Verdana
Georgia
Dax Condensed
Times
=> x-height = 5px
=>...
em statt px
Ein »em« ist die ungefähre Laufweite des 

Buchstabens „m“.
Sprich bei einer Schriftgröße von 12 Pixel entspri...
Die Lesbarkeit
Quiandis ea pa seque nonserit, offic torro dolendit
est ex eaque voloren dandestia dolores truptas
ducilici...
Das Fazit
Serifenlose Schriften wie die Verdana erzielen am Monitor eine
bessere Lesbarkeit als Serifenschriften.
Durch di...
Analog wird Digital
Einbettung von Schriften
Grundsätzlich gibt es zwei Wege der Schrift-Implementierung
1. @font-face
Über den CSS-Befehl las...
Wichtige Parameter
Neben der Angabe „font-size“ in em sollten auch die Parameter
„line-height“ und „letter-spacing“ einmal...
Wichtige Parameter
Bei Überschriften werden „line-height“ und „letter-spacing“
überproportional verringert und bei kleinen...
Mac versus Windows
Problem 1: Aktuelle Browser (wie Firefox, Opera und Chrome) verwenden OpenType-
Schriften, jedoch exist...
Mac versus Windows, Ff.
Lösung 1: Statt Lizenzen für vollwertige Raw Fonts zu verteilen, kann man sich nun z.B.
bei Fontsh...
Die Zauberformel
Schriftgrößenanpassung
font-size-adjust heißt das Zauberwort, welches sich mit einer ganzen Reihe
von Parametern rund um d...
Die Verdana ist der „Maßstab“
(die x-Höhe beträgt 58/100 = 0.58)
Scale-Factor = 1.07
Scale-Factor = 1.09
Scale-Factor = 1....
/* erst für IE, er kennt nur das EOT-Format */
@font-face {
font-family: ComicJensWeb;
src: url(http://fonts.netzallee.de/...
Der Codeschnipsel
Lösungsansatz
Jens Kutilek - Font-Techniker bei FSI
Font Shop International – versucht zur
Zeit einen neuen Ansatz. Am Bei...
Vielen Dank für Ihre
Aufmerksamkeit.
Wenn Sie mehr erfahren möchten, wenden Sie sich an:
larsmenze
Eldenaer Straße 60, 10247 Berlin
+49 30 20235310
+49 173 621...
Nächste SlideShare
Wird geladen in …5
×

DIN1450 – Die Leserlichkeit von Schriften

2.934 Aufrufe

Veröffentlicht am

Gerade der Umgang mit Typografie im Web ist von hoher Bedeutung. Im Webdesign kommt es beim Text vor allem auf gute Lesbarkeit an, da das Lesen an verschiedenen Devices schneller ermüdet als z.B. das Lesen eines Buches.
Außerdem soll sich der Font stimmig in die Webseite einfügen und zum Corporate Design des Unternehmens passen.
Gute Typografie ist daher unerlässlich – dieses Whitepaper gibt interessante Einblicke, worauf zu achten ist.

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.934
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.655
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

DIN1450 – Die Leserlichkeit von Schriften

  1. 1. DIN 1450Die Leserlichkeit von Schriften präsentieren
  2. 2. Die Problemstellung
  3. 3. Unterschiedliche Auffassung Während eine 10 pt große Schrift am Mac auch exakt 10 px groß ist, sind es am PC 13 px. Dies rührt einfach aus der unterschiedlichen Auflösung beider Monitorbauweisen: Mac = 96 dpi << >> PC = 72 dpi
  4. 4. Das menschliche Auge Unser Auge erfasst sehr viel. Doch jede Sehschärfe hat ihre Grenzen. Während der Visus eines 20-jährigen bei ca. 1,4 liegt, nimmt er im Laufe der Zeit deutlich ab! • 20-jährige 1,0 – 1,6 • 80-jährige 0,6 – 1,0 Und Schriften werden, je nach Distanz, 
 besser oder schlechter erkannt.
  5. 5. Mobile Devices Smartphones und Tablet-PCs bestimmen den Alltag. Dies bedeutet für uns, dass eine optimale Lesbarkeit von Inhalten für diese Endgeräte gegeben sein muss. Der Betrachtungsabstand bei Smartphones und 
 Tablets liegt bei 40 – 60 cm.
  6. 6. Desktop Computer Am Arbeitsplatz hat man meist einen genormten Abstand 
 zum Monitor: 15“ = 50 – 60 cm (Laptop-Monitor) 19“ = 60 – 70 cm 21“ = 70 – 80 cm 24“ = 80 cm und mehr
  7. 7. Schriftgröße ist nicht gleich Schrifthöhe Laut DIN 1450 wird die Mittellänge bzw. die x-Höhe fortan eine Nenngröße für die Lesbarkeit sein. Wie das Beispiel zeigt, sind die Serifenschriften deutlich niedriger. xH xH xH xH Georgia Dax Condensed TimesVerdana
  8. 8. Klassifizierung von Schriften Es gibt zwei zu unterscheidende Schriftfamilien: Die Antiqua (auch Serifenschriften genannt) Hierunter fallen Schriften wie die Times, Georgia, Rotis – diese zeichnen sich durch ihre markanten Serifen aus. Die Grotesk (oder Sans Serif genannt) vereint alle geraden, reduzierten Schriften wie die Arial, Helvetica, Dax, Verdana & Co. Times Arial Georgia Helvetica Dax Condensed Europa Light Didot Palatino
  9. 9. Vorinstallierte Schriften Es gibt Schnittmengen der installierten Schriften am PC und Mac, als da wären: 0 25 50 75 100 Verdana Georgia Times Gill Sans Arial Helvetica Windows Mac Linux in %
  10. 10. Die x-Höhe Das bedeutet bei jeweils 10px Schriftgröße: Verdana Georgia Dax Condensed Times => x-height = 5px => x-height = 5px => x-height = 6px => x-height = 5px => Gesamthöhe aber nur 9px
  11. 11. Die x-Höhe Mit folgenden Anpassung lässt sich dem entgegenwirken: Verdana Georgia Dax Condensed Times => x-height = 5px => x-height = 5px => x-height = 5px => x-height = 5px => bleibt (Standardwert) => bleibt / letter-spacing 0.3em => -10% / letter-spacing 0.3em => bleibt / letter-spacing 0.3em
  12. 12. em statt px Ein »em« ist die ungefähre Laufweite des 
 Buchstabens „m“. Sprich bei einer Schriftgröße von 12 Pixel entspricht 1 em = 12 px 1.5em = 18 px (12px x 1,5) 2 em = 24 px (12px x 2) … Eine Schrift mit 1.5 em bzw. 2 emmm
  13. 13. Die Lesbarkeit Quiandis ea pa seque nonserit, offic torro dolendit est ex eaque voloren dandestia dolores truptas ducilicimint ducimpe rferect iassit vendipsunt odit rerum non nemporessi ditas aliquia dendipictur. Wir testen zwei Fonts in zwei Größen: Verdana, 12 px Georgia, 12 px Verdana, 14 px Georgia, 14 px Quiandis ea pa seque nonserit, offic torro dolendit est ex eaque voloren dandestia dolores truptas ducilicimint ducimpe rferect iassit vendipsunt odit rerum non. Quiandis ea pa seque nonserit. Quiandis ea pa seque nonserit, offic torro dolendit est ex eaque voloren dandestia dolores truptas ducilicimint ducimpe rferect iassit vendipsunt odit rerum non. Quiandis ea pa seque nonserit, offic torro dolendit est ex eaque voloren dandestia dolores truptas ducilicimint ducimpe rferect iassit vendipsunt odit rerum non nemporessi ditas aliquia dendipictur. 0 m 0,5 m 1 m 1,5 m
  14. 14. Das Fazit Serifenlose Schriften wie die Verdana erzielen am Monitor eine bessere Lesbarkeit als Serifenschriften. Durch die unterschiedliche Schrifthöhe ist die Verdana in 12 px fast genauso gut lesbar wie die 14 px Georgia! Verdana, 12 px Georgia, 14 px 0 m 0,5 m 1 m 1,5 m
  15. 15. Analog wird Digital
  16. 16. Einbettung von Schriften Grundsätzlich gibt es zwei Wege der Schrift-Implementierung 1. @font-face Über den CSS-Befehl lassen sich Schriften auf dem Server einbinden, so dass jeder Browser sich diesen „runterladen“ kann. => Probleme gibts nur in der Abwärtskompatibilität des IE 5 => z.T. kann es auch beim Mac zu Problemen kommen, siehe http://seanmcb.com/typekit/webkit-antialiasing-test.html 2. Adobe© Typekit Einbindung von extern gehosteten Schriften via Quellcode => Vorteil: auf alle Browser abgestimmt (Explorer, Safari, Opera)
  17. 17. Wichtige Parameter Neben der Angabe „font-size“ in em sollten auch die Parameter „line-height“ und „letter-spacing“ einmalig angepasst werden. font-size: 1em; line-height: 1.25em; letter-spacing: 0.1em;
  18. 18. Wichtige Parameter Bei Überschriften werden „line-height“ und „letter-spacing“ überproportional verringert und bei kleinen Konsultationstexten die beiden Parameter überproportional vergrößert. Mehr Infos dazu: http://www.css4you.de/Schrifteigenschaften/font-size.html body { font-size: 100%; line-height: 1.25em; letter-spacing: 0.1em; } .h1 { font-size: 1.5em; /* 16 x 1.5 = 24 */ line-height: 0.75em; /* 16 x 0.75 = 12 */ letter-spacing: 0em; } .sidenote p { font-size: 0.75em; /* 16 x 0.875 = 14 */ line-height: 1.25em; /* 16 x 1.2 = 20 */ letter-spacing: 0.3em; }
  19. 19. Mac versus Windows Problem 1: Aktuelle Browser (wie Firefox, Opera und Chrome) verwenden OpenType- Schriften, jedoch existierten keine entsprechenden Lizenzen für das Einbinden. Problem 2: Der Internet Explorer konnte bis Version 5.5 nur mit sogenannten EOT-Dateien arbeiten. EOT-Schriften existierten in der freien Wildbahn überhaupt nicht – und das Konvertieren ist nicht erlaubt.
  20. 20. Mac versus Windows, Ff. Lösung 1: Statt Lizenzen für vollwertige Raw Fonts zu verteilen, kann man sich nun z.B. bei Fontshop Schriften im neuen WOFF-Format kaufen. Diese sind explizit für das Font- Linking im Web zugelassen und kommen dennoch ohne DRM aus. Dafür sind sie für den Einsatz im Print nicht zugelassen und funktionieren technisch auch gar nicht. Lösung 2: Daneben werden fertig konvertierte EOT-Fonts angeboten, um die Internet- Explorer-Nutzer zu bedienen. Oder man generiert sich diese EOT-Dateien über Online- Dienste selbst.
  21. 21. Die Zauberformel
  22. 22. Schriftgrößenanpassung font-size-adjust heißt das Zauberwort, welches sich mit einer ganzen Reihe von Parametern rund um die Schriftdarstellung befasst. Unterschiedlich groß wirkende Schriften werden aufgrund folgender Berechnung über die x-Höhe vereinheitlicht: y(a/a') = c y = x-Höhe aktueller Wert a = Mehrwert laut Spezifikation des font-size-adjust a' = Mehrwert der aktuellen Schrift c = Faktor zum Anwenden auf die Schrift http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-size Hg58/100 18/100 24/100
  23. 23. Die Verdana ist der „Maßstab“ (die x-Höhe beträgt 58/100 = 0.58) Scale-Factor = 1.07 Scale-Factor = 1.09 Scale-Factor = 1.16 Scale-Factor = 1.2 Scale-Factor = 1.23 Scale-Factor = 1.26 Scale-Factor = 1.26 Scale-Factor = 1.45 Scale-Factor = 1.57 Scale-Factor = 2.07
  24. 24. /* erst für IE, er kennt nur das EOT-Format */ @font-face { font-family: ComicJensWeb; src: url(http://fonts.netzallee.de/comicjens/comicjenspro-regular.eot); } /* dann die TrueType-Dateifile für andere Browser */ @font-face { font-family: ComicJensWeb; src: url(http://fonts.netzallee.de/comicjens/comicjenspro-regular.ttf) format('opentype'); } /* nun das neue WOFF-Format für Firefox */ @font-face { font-family: ComicJensWeb; src: url(http://fonts.netzallee.de/comicjens/comicjenspro-regular.woff) format('woff'); } /* Nun kann man die Schrift ganz normal per CSS ansprechen: */ body { font-family: ComicJensWeb, sans-serif; } Jetzt wird‘s nerdig! Um den verschiedenen Browsertypen gerecht zu werden, muss man bei der Schriftimplementierung auf gewisse Details achten:
  25. 25. Der Codeschnipsel
  26. 26. Lösungsansatz Jens Kutilek - Font-Techniker bei FSI Font Shop International – versucht zur Zeit einen neuen Ansatz. Am Beispiel der „Corretto“ zeigt sich gut, was er vor hat: Eine Datei bündelt alle Versionen einer Schrift für sämtliche Browser.
  27. 27. Vielen Dank für Ihre Aufmerksamkeit.
  28. 28. Wenn Sie mehr erfahren möchten, wenden Sie sich an: larsmenze Eldenaer Straße 60, 10247 Berlin +49 30 20235310 +49 173 6217965 lars@menze-koch.de www.menze-koch.de ©2015Eine Präsentation der

×