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.

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.

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