2. Wo findet man den richtigen Webfont
Free Webfonts
http://www.fontsquirrel.com/
https://edgewebfonts.adobe.com/
Kostenpflichtige Webfonts
https://www.fontshop.com
http://www.myfonts.de/
http://www.linotype.com/de/
http://www.fonts.com/de
https://typekit.com/plans
3. e im Web
n „schiefgehen
Typografie im Web
Was kann „schiefgehen“?
4. Unterschied zwischen Leserlichkeit und Lesbarkeit
Leserlichkeit sind typografische Faktoren
• Schriftart
• Schrift-Größe
• Buchstabenabstand
• Zeilenabstand
• Zeilenlänge
Lesbarkeit
• Rechtschreibfehler
• falsche Interpunktion
• Bandwurmsätze
• zu viele Füllwörter
5. Abstand & Weißraum
„Zu viel Abstand gibt es eigentlich nicht!“ 1
Weißraum
• „Weißraum bezeichnet die Gesamtheit der Abstands- und Leerflächen in einem Layout.“ 1
Abstand
• Spaltenabstand, Zeilenabstand, Randabstand
6. AbstandLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, vene-
natis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curab-
itur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimen-
tum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. xbibend-
um sodales, augue velit cursus nunc.
Dies ist ein sehr sehr sehr sehr
sehr lange Headline
Dies ist ein gutes Beispiel für
die Leserlichkeit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligu-
la eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis partu-
rient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes-
que eu, pretium quis, sem. Nulla consequat massa quis enim.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam
eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, et ante tincidunt tempus. Donec vitae sapien ut libero venenatis
faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
Der Zeilenabstand ist hier
zu gering, die Leserlichkeit
wird dadurch verringert.
Der Zeilenabstand ist hier
zu groß. Die Headline wird
nicht mehr als zusammen-
hängend wahrgenommen.
7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam fe-
lis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Zeilenlänge & Spalten
Aenean vulputate eleifend tellus.
Aenean leo ligula, porttitor
eu, consequat vitae, eleifend
ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat
a, tellus. Phasellus viverra nulla
ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam
ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam
eget dui. Etiam rhoncus. Maecenas
tempus, tellus eget condimentum
rhoncus, sem quam semper libero,
sit amet adipiscing sem neque sed
ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id,
lorem. Maecenas nec odio et
ante tincidunt tempus. Donec
vitae sapien ut libero venenatis
faucibus. Nullam quis ante. Etiam
sit amet orci eget eros faucibus
tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec
sodales sagittis magna. Sed
consequat, leo eget bibendum
sodales, augue velit cursus nunc,
Aenean vulputate eleifend tellus.
Aenean leo ligula, porttitor
eu, consequat vitae, eleifend
ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat
a, tellus. Phasellus viverra nulla
ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam
ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam
eget dui. Etiam rhoncus. Maecenas
tempus, tellus eget condimentum
rhoncus, sem quam semper libero,
sit amet adipiscing sem neque sed
ipsum. Nam quam nunc, blandit
vel, luctus pulvinar, hendrerit id,
lorem. Maecenas nec odio et
ante tincidunt tempus. Donec
vitae sapien ut libero venenatis
faucibus. Nullam quis ante. Etiam
sit amet orci eget eros faucibus
tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec
sodales sagittis magna. Sed
consequat, leo eget bibendum
sodales, augue velit cursus nunc,
Bei großen Bildschirmen mit hoher Auflösung sollte
die Zeilenläge nicht zu lang werden. Man sollte die
Zeilen durch eine max-width Angabe begrenzen.
Bei mobilen Geräten sollte die
Zeilenlänge nicht zu kurz werden.
8. • Zeilenlänge von ca. 50–80 Zeichen
• Bei Spalten und auf mobilen Geräten reicht eine Zeilenlänge von ca. 40–50 Zeichen
• Es empfiehlt sich immer, über max-width eine Maximalbreite für den Textbereich festzulegen.
• Spalten nach Möglichkeit nur bei kurzen Textabschnitten verwenden
Fazit
9. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
ante, dapibus in, viverra quis, feugiat a, tellus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Ausrichtung
Der Blocksatz ist in den Printmedien Handarbeit. Im Web wird der
Blocksatz automatisch generiert und somit erzwungen. Dadurch, dass
Textboxen flexibel für die mobilen Geräte und die unterschiedlichen
Bildschirmformate bleiben müssen, werden die Wortabstände
ungleichmäßig und der Text verliert durch zu große Wortabstände
seine Leserlichkeit.
Zentrierter Text ist nur für kurze Textabschnitte geeignet
Rechtsbündigen Text findet man sehr selten. Diese Textausrichtung
entspricht nicht unserer Leserichtung von links nach rechts.
10. Ich bin ein schön gestalteter Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum
rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, et ante tincidunt
tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros
faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
Silbentrennung
Im Web steckt die automatische Silbentrennung immer noch in
den Kinderschuhen. Deshalb kommt es immer wieder zu falschen
Silbentrennungen.
Der Flattersatz ist ein links ausgerichteter Text. In den Printmedien ist
der Flattersatz durch sein unruhiges Zeilenende weniger beliebt und
wird nur mit Silbertrennung eingesetzt. Dies gilt aber nicht für das
Web, denn...
...im Web darf Text flattern!
11. Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, justo.
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a. Nullam
dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum.
Headline
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a. Nullam
dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum.
Kontraste
Zu wenig Kontrast zwischen Hintergrundfarbe und Textfarbe
verringert die Leserlichkeit.
Ist die Hintergrundfarbe zu dunkel, beginnt der Text zu flackern und
ermüdet so schneller die Augen.
Ein Beispiel für ein gutes Kontrastverhältniss ist ein weißer Hintergrund mit
einer Textfarbe von 80% schwarz.
Eine weitere Orientierung zur Kontrastfreiheit und ihrer Grenzen sind die
offiziellen Verordnungen zur Barrierefreiheit.
Ein nettes Tool zum Kontrast zwischen Hintergrundsfarbe und Textfarbe
findet Ihr hier:
http://leaverou.github.io/contrast-ratio/
