DIN1450 – Die Leserlichkeit von Schriften

1. DIN 1450Die Leserlichkeit von Schriften präsentieren

2. Die Problemstellung

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Analog wird Digital

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. 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. 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. 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. 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. Die Zauberformel

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. 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. /* 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. Der Codeschnipsel

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. Vielen Dank für Ihre Aufmerksamkeit.

DIN1450 – Die Leserlichkeit von Schriften

menze+koch gbr

DIN1450 – Die Leserlichkeit von Schriften