SlideShare ist ein Scribd-Unternehmen logo
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ührt einfach aus der unterschiedlichen
Auflösung beider Monitorbauweisen:
Mac = 96 dpi << >> PC = 72 dpi
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.
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.
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
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
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
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 %
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
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
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
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
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
Analog wird Digital
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)
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;
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;
}
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.
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.
Die Zauberformel
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
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
/* 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:
Der Codeschnipsel
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.
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 6217965
lars@menze-koch.de
www.menze-koch.de
©2015Eine Präsentation der

Weitere ähnliche Inhalte

Andere mochten auch

12 12-09-pb-fotos
12 12-09-pb-fotos12 12-09-pb-fotos
12 12-09-pb-fotos
Leila Cura
 
Mobile Scanning : Média Augmenté
Mobile Scanning : Média AugmentéMobile Scanning : Média Augmenté
Mobile Scanning : Média Augmenté
APOCOPE an Atsukè company (http://www.atsuke.com)
 
Africa
AfricaAfrica
Presentacion clase 03
Presentacion clase 03Presentacion clase 03
Presentacion clase 03
ESPOCH
 
Maria e irene(2)
Maria e irene(2)Maria e irene(2)
Maria e irene(2)pacitina
 
Les peintres francaises1
Les peintres francaises1Les peintres francaises1
Les peintres francaises1pacitina
 
Paris ville lumiere
Paris ville lumiereParis ville lumiere
Paris ville lumiereJose Santos
 
El fantasma miedica
El fantasma miedicaEl fantasma miedica
El fantasma miedica
carmensimon
 
X-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobileX-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobileX-PRIME GROUPE
 
Status des Projektes Joomla!Day Germany 2011
Status des Projektes Joomla!Day Germany 2011Status des Projektes Joomla!Day Germany 2011
Status des Projektes Joomla!Day Germany 2011
Robert Deutz
 
El cuento
El cuentoEl cuento
El cuento
mayita86
 
Presentation Mobilead Syconseil 270411
Presentation Mobilead Syconseil 270411Presentation Mobilead Syconseil 270411
Presentation Mobilead Syconseil 270411AFMM
 
Gender Balance, Prosperity and Peace
Gender Balance, Prosperity and PeaceGender Balance, Prosperity and Peace
Gender Balance, Prosperity and Peace
JedlickaConsulting
 
La fécontation à 0 mois
La fécontation à 0 moisLa fécontation à 0 mois
La fécontation à 0 moispacitina
 
La réunion de alejandro del hierro y manuel de castro
La réunion de alejandro del hierro y manuel de castroLa réunion de alejandro del hierro y manuel de castro
La réunion de alejandro del hierro y manuel de castropacitina
 
El perro fantasma
El perro fantasmaEl perro fantasma
El perro fantasma
carmensimon
 
Einlaufen TSV Kronshagen
Einlaufen TSV KronshagenEinlaufen TSV Kronshagen
Einlaufen TSV Kronshagen
TSVKronshagen
 

Andere mochten auch (20)

12 12-09-pb-fotos
12 12-09-pb-fotos12 12-09-pb-fotos
12 12-09-pb-fotos
 
Mobile Scanning : Média Augmenté
Mobile Scanning : Média AugmentéMobile Scanning : Média Augmenté
Mobile Scanning : Média Augmenté
 
Africa
AfricaAfrica
Africa
 
All pictures
All picturesAll pictures
All pictures
 
Presentacion clase 03
Presentacion clase 03Presentacion clase 03
Presentacion clase 03
 
Maria e irene(2)
Maria e irene(2)Maria e irene(2)
Maria e irene(2)
 
Les peintres francaises1
Les peintres francaises1Les peintres francaises1
Les peintres francaises1
 
Paris ville lumiere
Paris ville lumiereParis ville lumiere
Paris ville lumiere
 
El fantasma miedica
El fantasma miedicaEl fantasma miedica
El fantasma miedica
 
X-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobileX-PRIME Groupe - la Matinale - le web mobile
X-PRIME Groupe - la Matinale - le web mobile
 
Status des Projektes Joomla!Day Germany 2011
Status des Projektes Joomla!Day Germany 2011Status des Projektes Joomla!Day Germany 2011
Status des Projektes Joomla!Day Germany 2011
 
El cuento
El cuentoEl cuento
El cuento
 
Presentation Mobilead Syconseil 270411
Presentation Mobilead Syconseil 270411Presentation Mobilead Syconseil 270411
Presentation Mobilead Syconseil 270411
 
Gender Balance, Prosperity and Peace
Gender Balance, Prosperity and PeaceGender Balance, Prosperity and Peace
Gender Balance, Prosperity and Peace
 
La fécontation à 0 mois
La fécontation à 0 moisLa fécontation à 0 mois
La fécontation à 0 mois
 
La réunion de alejandro del hierro y manuel de castro
La réunion de alejandro del hierro y manuel de castroLa réunion de alejandro del hierro y manuel de castro
La réunion de alejandro del hierro y manuel de castro
 
El perro fantasma
El perro fantasmaEl perro fantasma
El perro fantasma
 
Envoi bari
Envoi bariEnvoi bari
Envoi bari
 
Einlaufen TSV Kronshagen
Einlaufen TSV KronshagenEinlaufen TSV Kronshagen
Einlaufen TSV Kronshagen
 
Jeopardy !
Jeopardy !Jeopardy !
Jeopardy !
 

Mehr von menze+koch gbr

Augen zu und durch
Augen zu und durchAugen zu und durch
Augen zu und durch
menze+koch gbr
 
Schon auf Kurs?
Schon auf Kurs?Schon auf Kurs?
Schon auf Kurs?
menze+koch gbr
 
Biete Werbespot, suche Erfolg
Biete Werbespot, suche ErfolgBiete Werbespot, suche Erfolg
Biete Werbespot, suche Erfolg
menze+koch gbr
 
Mehr Inhalt, weniger Werbung
Mehr Inhalt, weniger WerbungMehr Inhalt, weniger Werbung
Mehr Inhalt, weniger Werbung
menze+koch gbr
 
Der Blog ist tot…
Der Blog ist tot…Der Blog ist tot…
Der Blog ist tot…
menze+koch gbr
 
Mehr als ein "Gefällt mir"
Mehr als ein "Gefällt mir"Mehr als ein "Gefällt mir"
Mehr als ein "Gefällt mir"
menze+koch gbr
 
Gefällt mir nicht!
Gefällt mir nicht!Gefällt mir nicht!
Gefällt mir nicht!
menze+koch gbr
 
Perlen vor die Säue
Perlen vor die SäuePerlen vor die Säue
Perlen vor die Säue
menze+koch gbr
 
Social Fast Food
Social Fast FoodSocial Fast Food
Social Fast Food
menze+koch gbr
 

Mehr von menze+koch gbr (10)

Augen zu und durch
Augen zu und durchAugen zu und durch
Augen zu und durch
 
Schon auf Kurs?
Schon auf Kurs?Schon auf Kurs?
Schon auf Kurs?
 
Biete Werbespot, suche Erfolg
Biete Werbespot, suche ErfolgBiete Werbespot, suche Erfolg
Biete Werbespot, suche Erfolg
 
Mehr Inhalt, weniger Werbung
Mehr Inhalt, weniger WerbungMehr Inhalt, weniger Werbung
Mehr Inhalt, weniger Werbung
 
Der Blog ist tot…
Der Blog ist tot…Der Blog ist tot…
Der Blog ist tot…
 
Mehr als ein "Gefällt mir"
Mehr als ein "Gefällt mir"Mehr als ein "Gefällt mir"
Mehr als ein "Gefällt mir"
 
Top oder Flop
Top oder FlopTop oder Flop
Top oder Flop
 
Gefällt mir nicht!
Gefällt mir nicht!Gefällt mir nicht!
Gefällt mir nicht!
 
Perlen vor die Säue
Perlen vor die SäuePerlen vor die Säue
Perlen vor die Säue
 
Social Fast Food
Social Fast FoodSocial Fast Food
Social Fast Food
 

DIN1450 – Die Leserlichkeit von Schriften

  • 1. DIN 1450Die Leserlichkeit von Schriften präsentieren
  • 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
  • 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.
  • 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:
  • 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