Typografie ist ein grundlegendes (und mein liebstes) Gestaltungselement. Sie gibt Marken ein Profil, vermittelt Emotionen und Inhalte und hat sich seit tausenden von Jahren immer weiter entwickelt.
Und ganz besonders im Web hat sich viel getan: Höhere Screen-Auflösungen, neue Technologien und Devices geben Gestaltern neue Freiheiten.
Was fällt auf? Auf welche Trends und Merkmale stosse ich beim Stöbern in verschiedenen Blogs, Foren und Awards?
8. Web Typography
01
S.8
„Typografie ist eine Dienstleistung.“
Kurt Weidemann
Bedeutung
Rolle des Designers
9. Web Typography
01
S.9
„Web Design is 95% Typography.“
Oliver Reichenstein
iA, 2006
http://informationarchitects.net/blog/the-web-is-all-about-typography-period/
11. Web Typography
02
S.11
0.290 mm 0.197 mm 0.197 mm 0.192 mm 0.115 mm 0.096 mm
(19 Zoll Formac) (Mac Book) (Mac Book) (ipad) (Mac Book Retina) (ipad Retina)
Screens und Devices
13. Web Typography
02
S.13
-Browser
Wichtiger Beeinflusser
Neue Browser mit grossen Möglichkeiten
Alte Browser halten sich sehr hartnäckig
14. Web Typography
02
S.14
Inhalte
Nix is fix
Inhalte werden zunehmend dynamisch
Inhalte werden kurzlebiger, schneller, globaler eingebunden
Kontrolle über Bilder / Videos immer schwerer
Schrift als Design- und Markenbildendes Element wird immer wichtiger
30. Web Typography
03
S.30
Vielfalt
Fett mit Dünn, Condensed mit Wide, Sans Serif mit Serif, Fraktur und Script
Die Mischung machts: Ein abwechslungsreiches und individuelles Schriftbild
31.
32.
33.
34.
35. Web Typography
03
S.35
Moved Type
Kein Stillstand
Aufwändig aber fesselnd: Typografie in Bewegung
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47. Web Typography
03
S.47
Typo+Image
Direkt drauf
Vergiss die Boxen
Am Besten gleich aufs Video
59. Web Typography
04
S.59
Satz*
Enge Grenzen
Geht gut: Linksbündiger, rechtsbündiger, Zentrierter Flattersatz
Geht nur unter Schmerzen: Blocksatz, Silbentrennung
60. Web Typography
*
04
S.60
linksbündig In es accum linksbündig In es accum linksbündig In es accum
autemquaepe paria si cum autemquaepe paria si cum autemquaepe paria si cum
eossequo vit que vel mo et odist, eossequo vit que vel mo et odist, eossequo vit que vel mo et odist,
es aut pelique re quas sime pra es aut pelique re quas sime pra es aut pelique re quas sime pra
quidiat uribus iliquibeate liquuntist quidiat uribus iliquibeate liquuntist quidiat uribus iliquibeate liquuntist
aspeles est dolloru ptatur? aspeles est dolloru ptatur? aspeles est dolloru ptatur?
linksbündig In es accum autem- linksbündig In es accum autem-
quaepe paria si cum eossequo quaepe paria si cum eossequo vit
vit que vel mo et odist, es aut pe- que vel mo et odist, es aut pelique
lique re quas sime pra quidiat uri- re quas sime pra quidiat uribus ili-
bus iliquibeate liquuntist aspeles quibeate liquuntist aspeles est dol-
est dolloru ptatur? loru ptatur?
61. Web Typography
04
S.61
Einzüge*
Helfen Gedanken innerhalb von Absätzen zu gruppieren
Nicht den ersten Absatz einziehen!
62. Web Typography
*
04
S.62
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Lanim volupta nis earciundit. aliqua. Lanim volupta nis earciundit. Vollaut aliquam alique
Vollaut aliquam alique et que rentiat re con pos derum et que rentiat re con pos derum volectem quias nonet qui
volectem quias nonet qui in posaper aeribus antionsequi ut. in posaper aeribus antionsequi ut. Quia erionse quideris
Quia erionse quideris es maion reste exerspeliam, sandame es maion reste exerspeliam, sandame nissi quamusa illat.
nissi quamusa illat. Aut et andeles est quis verum, sin non num estiori aeptas
Aut et andeles est quis verum, sin non num estiori aeptas eserum dolorrum et accus excereribus, ande dolupti usdaerf
eserum dolorrum et accus excereribus, ande dolupti usdaerf ereicto cuptusandae ea doluptur?
ereicto cuptusandae ea doluptur?
Quia dolorun temolla boreius ipiet illaceaquam apis ut
Quia dolorun temolla boreius ipiet illaceaquam apis ut quiandam, volorenis simint veri aute omnimus ea sent aut
quiandam, volorenis simint veri aute omnimus ea sent aut latemodis. Gita corersp eribus. Mo to beratquidem eum
latemodis. Gita corersp eribus. Mo to beratquidem eum eatestinis dem vit. Occae sunt, susant et venim ilicianihit
eatestinis dem vit. vollab ipsa dicit, tetur, seque maio quo ea vitioreped enit,
Occae sunt, susant et venim ilicianihit vollab ipsa dicit, consequam hita sunt velecestrum autem explaudam, sition
tetur, seque maio quo ea vitioreped enit, consequam hita por a aut restrum
sunt velecestrum autem explaudam, sition por a aut restrum
63. Web Typography
04
S.63
Font Styles*
Nur Web Fonts fürs Web, sonst nichts!
NUR Web Fonts vom ersten Design an nutzen
Höhere Auflösung erlaubt Einsatz von Kursiven, Serifenschriften, etc. ab Headlinegrösse
Kursive Schriften in kleineren Grössen meist schwierig
64. Web Typography
*
04
S.64
Design vs Implementierung
Systemfonts "Core Fonts for the Web"
Dennoch auf jedem Browser/System Unterschiede
http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
Webfonts
Im Designprozess sicherstellen, dass Fonts
1. Webtauglich sind
2. Wie/Wo eingebettet werden können
65. Web Typography
05 A
S.65
Lorem Ipsum
Ga. Nemporem estemperum liatist, esequia nestrum
fuga. Vellupi tinusci duntior atusam harum nossum
A
quam volestem vellupta
volorpos ut mo es voluptam quam rescipsunto odigenihicil mo ea vellaborpore
exeria volorro bea niam illicimus doluptur, quaestia dolum quiam quiandigento
blaboriatur suntia estiost quo qui dolupta tiusci re inumque nihilis volorio rumque
vitat fugitium sit moluptatem doluptur adigent minusda dere re liquatio. Hendit
et quasitinti ulparciis solor sim ium facidel lorehenis evellorem ut aligendem velit
quat.
A
66. Web Typography
*
04
S.66
Adobe Web Font Collection (Subset v. Font Folio11.1)
http://www.adobe.com/type/webfont/info.html
310 Fonts für Desktop UND WebINK / Typekit
(jedoch muss Collection m 2'400 Fonts gekauft werden)
Fontshop Web FontFonts wird ausgebaut
http://www.fontshop.com/fonts/webfonts/
Teilweise Einbindung über Typekit
67.
68. Web Typography
*
04
S.68
Linotype: Über 10'000 Webfonts,
Einbindung über fonts.com, Testfeature für websites
http://www.linotype.com
http://www.webfontspreview.com
Google Web Fonts (gratis)
Viele Fonts zur Einbindung, jedoch kein definiertes
Desktop Fontset vorhanden
69. Web Typography
*
04
S.69
Ansätze
Vorhandene Fonts abgleichen / sortieren
Was ist über Fonts.com/Typekit/WebIkn, ... verfügbar?
Extensis für Suitcase
Erlaubt Einbindung der Fonts von Fonts.com/Typekit/
WebIkn, ... schon im Designprozess
ToDo: Definition Standards, Sets zusammenstellen
70. Web Typography
04
S.70
Font sizes*
Generell: Grösse zählt
Grosse Schriften tun gut! Höhere Auflösung erfordert grössere Schriftgrössen, erlauben aber mehr Details
Desktop grösser als Mobile! Desktop / Laptop hat grösseren Leseabstand als Mobile
Headlines mit Hausschriften können erst ab gewisser Grösse wirken
72. Web Typography
04
S.72
45-66-75*
Nur 66 Zeichen!
Einspaltiges Layout: 45-75 Zeichen gelten als gut lesbar, 66 als optimal
Mehrspaltiges Layout: 40-50 Zeichen
Entscheidung immer nach Einzelfall / Schrift
73. Web Typography
04
S.73
45-66-75*
Nur 66 Zeichen!
Einspaltiges Layout: 45-75 Zeichen gelten als gut lesbar, 66 als optimal
Mehrspaltiges Layout: 40-50 Zeichen
Entscheidung immer nach Einzelfall / Schrift
74. Web Typography
*
04
S.74
45-75 Zeichen (optimalerweise 66 Zeichen)
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed
do eiusmod *tempor incididunt ut labore et dolore magna
40-50 Zeichen
Lorem ipsum dolor sit amet, consectetur adip Ceatem necte nos que occaborunt iliquam ium
isicing elit, sed do eiusmod tempor incididunt ut velecab inullandis alicimporro magnis magnimp
labore et dolore magna aliqua. Lit fugia sunto oratecus maion eos aut volupta turestibus apis
di alic tenimporis reribusciet ex etur ad quam ut ma quam imillum dem nus. Eperum volupidero
moluptamus dolorum volor reptatiatem. tempedi dolorum, cus, eiunt. Tio.
*45. Zeichen / *75. Zeichen
75. Web Typography
04
S.75
Spacing*
Kleine Grössen zugeben, Grosse Grössen reduzieren
Kleine Schriftgrössen: Zeichenabstand / Wortabstand zugeben
Grosse Schriftgrössen: Zeichenabstand / Wortabstand reduzieren
Entscheidung immer nach Einzelfall / Schrift
76. Web Typography
*
04
S.76
Headline Big Spacing 0
Headline Big Spacing -15
Headline Big Spacing -30
77. Web Typography
*
04
S.77
Headline Big Spacing -30
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed Lorem ipsum dolor sit amet, consectetur adip *isicing
do eiusmod * Net peribus citiae rest volum alit fugitibeatet do eiusmod * Net peribus citiae rest volum alit fugitibeatet elit, sed do eiusmod * Net peribus citiae rest volum alit
volorec tatiam rerorios eostio ommoluptiant quamus, quia sime volorec tatiam rerorios eostio ommoluptiant quamus, quia fugitibeatet volorec tatiam rerorios eostio ommoluptiant
ipsa a dolendi omnianti nus eossitisque nem landaes eicilliqui sime ipsa a dolendi omnianti nus eossitisque nem landaes quamus, quia sime ipsa a dolendi omnianti nus eossitisque
ut ped quiderum repe reici ut aut aute offici andae. At as doles eicilliqui ut ped quiderum repe reici ut aut aute offici nem landaes eicilliqui ut ped quiderum repe reici ut aut
vel int alissenimi, vellab inus aperrorum laborruntias estrum quo andae. At as doles vel int alissenimi, vellab inus aperrorum aute offici andae. At as doles vel int alissenimi, vellab inus
que pore as cum utem quuntis. laborruntias estrum quo que pore as cum utem quuntis. aperrorum laborruntias estrum quo que pore as cum utem
quuntis.
Spacing 0 Spacing +20 Spacing +40
78. Web Typography
04
S.78
Line Spacing
1.4 x Schriftgrösse - 1.5 x Schriftgrösse ist Optimal
Entscheidung immer nach Einzelfall / Schrift
79. Web Typography
*
04
S.79
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed 18px / 20px ZA (Faktor 1.1)
do eiusmod *tempor incididunt ut labore et dolore magna.
Neque plibus quatia is ea nus ad qui quia eum as aut ditatem
aut esed eari adipsam vercitat que volupis assimo ipsam
comnihi caborro minverovid magnatectur rendae culparu
metur, temolupta sunt ratur?
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed 18px / 27px ZA (Faktor 1.5)
do eiusmod *tempor incididunt ut labore et dolore magna.
Neque plibus quatia is ea nus ad qui quia eum as aut ditatem
aut esed eari adipsam vercitat que volupis assimo ipsam
comnihi caborro minverovid magnatectur rendae culparu
metur, temolupta sunt ratur?
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed 18px / 35px ZA (Faktor 1.94)
do eiusmod *tempor incididunt ut labore et dolore magna.
Neque plibus quatia is ea nus ad qui quia eum as aut ditatem
aut esed eari adipsam vercitat que volupis assimo ipsam
comnihi caborro minverovid magnatectur rendae culparu
metur, temolupta sunt ratur?
80. Web Typography
04
S.80
Rhytmus*
Das gute Grundlinienraster
Headlines, Bilder, Fussnoten, etc. sollten
auf den gleichen Grundlinien bleiben, bzw. auf teilbaren davon
81. Web Typography
*
04
S.81
Headline Blindtext
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed
do eiusmod *tempor incididunt ut labore et dolore magna.
Neque plibus quatia is ea nus ad qui quia eum as aut ditatem
aut esed eari adipsam vercitat que volupis assimo ipsam
comnihi caborro minverovid magnatectur rendae culparu Lorem ipsum dolor sit amet,
consectetur adip *isicing elit, sed do
metur, temolupta sunt ratur? eiusmod *tempor incididunt ut labore
et dolore magna. Neque plibus
quatia is ea
82. Web Typography
04
S.82
Reihen
Nicht im Fliesstext untergehen lassen
Lange Reihen von Zahlen (Telefonnummern, etc) sollten gruppiert werden
Abkürzungen sollten letterspacing erhalten, damit sie besser erfassbar sind
83. Web Typography
*
04
S.83
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed
do eiusmod *tempor incididunt ut labore et dolore magna.
Neque plibus quatia is ea nus ad +4144228735 qui quia eum
as aut ditatem aut BUM esed eari adipsam vercitat que volupis
assimo ipsam comnihi caborro HOK minverovid magnatectur
rendae culparu metur, temolupta sunt ratur?
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed
do eiusmod *tempor incididunt ut labore et dolore magna.
Neque plibus quatia is ea nus ad +41.44 22 87 35 qui quia
eum as aut ditatem aut BUM esed eari adipsam vercitat
que volupis assimo ipsam comnihi caborro HOK minverovid
magnatectur rendae culparu metur, temolupta sunt ratur?
88. Web Typography
04
S.88
Negativ*
Negativ wirkt grösser
Ggfs muss – wenn gleiche Grössen erzielt werden sollen – Negative Schrift verkleiner werden
89. Web Typography
*
04
S.89
Lorem Ipsum Datur 18pt Lorem Ipsum Datur 18pt
Lorem Ipsum Datur 36pt Lorem Ipsum Datur 36pt
72pt 72pt
90. Web Typography
04
S.90
Mehr
The Elements of Typographic Style
by Robert Bringhurst
The Elements of Typographic Style Applied to the Web
http://webtypography.net
91. Web Typography
05
S.91
Wie gute Typografie
auf das device kommt.
„For me, “ideal” on the web isn’t about pixel-perfection
anymore, but about seeking the most pragmatic approach
to balancing different kinds of content with an ever-
increasing number of screen sizes and resolutions.“
Trent Walton
http://trentwalton.com/2012/06/19/fluid-type/
92. Web Typography
05
S.92
Lesen.
Analysieren und Entschlüsseln
Inhalte und Texte verstehen
Tonality und Absicht erkennen
Strukturen und Elemente
93. Web Typography
05
S.93
Ordnen.
Beziehungen klären
Gewichtung klären. Was hat Prio 1, was Prio 2, etc.
Welche Elemente müssen wir wie anordnen? Nebeneinander? Nacheinander? Übereinander?
Grobskizzen helfen
94. Web Typography
05
S.94
Fonts
Schriften auswählen
Welche Schriften passen?
Welche darf ich nehmen? Welche sind vorgegeben?
Was erlaubt die Technologie?
Wie macht Ihr das? Wo sucht Ihr?
95. Web Typography
05
S.95
Mood
Entwickle das Look & Feel
Welche Grössenverhältnisse?
Welches Raster?
Welches Gesamterscheinungsbild?
Welche Elemente?
Was sticht hervor?
96. Web Typography
05
S.96
Details.
Investiere in Details
Standards wie next/back, Footer, Links, etc. sind lohnende Ziele für Typografische Liebe
Sie machen viel aus und definieren einen Look z.T. mehr als der Mengentext
Sie haben grosse Chancen, dass sie beim Betrachter durchkommen & sich technisch umsetzen lassen
97.
98. Web Typography
05
S.98
Decide.
Entscheide jetzt: Stimmt das Look & Feel?
Noch bevor viel Zeit und Aufwand entstanden ist:
- Gefällt es Dir?
- Stimme die Moods mit Deinem Frontend Engineer ab: Wird es sich umsetzen lassen?
- Stimme die Moods mit Deinem Berater ab: Wird es der Zielgruppe gefallen?
- Stimme die Moods mit Deinem Kunden ab: Machen wir so weiter?
Halte Dein Moodboard fest - ob ausgedruckt oder am Screen
99. Web Typography
05
S.99
Lets get real
Das Mood steht?
Jetzt gehts an Eingemachte!
Wir wollen es genau wissen!
Aber wie geht das mit fluidem Design?
100. Web Typography
05
S.100
Fluid Type
Spaltenbreiten definieren
Erstmal Mobile: Wie breit soll die Spalte hier sein, dann Desktop:
Eine? Viele? Lässt sich gut noch über Grauwerte definieren...
101. Web Typography
*
05
S.101
Bei Fluidem Design sind Browsergrösse und alle
Typografischen Einheiten miteinander verbunden:
Schriftgrösse, Zeilenabstand, Zeilenlänge, Laufweite, …
M Die Lösung: em
1 em = Breite/Höhe Geviert einer definierten Schriftgrösse
102. Web Typography
*
05
S.102
Starte mit einem device; definiere lead-device;
104. Web Typography
05
S.104
Play*
Font x Schriftgrösse x Spaltenbreite x Zeilenabstand = Fluides Design
Copy first! Schriftgrösse so berechnen, dass optimaler Lesbarkeit gewährleistet wird
Headlines und weitere Styles entsprechend Mood anpassen - je device!
105. Web Typography
*
05
S.105
Fluides Design vs. Schriftgrössen
a) Definition Spaltenbreite in Pixel, Ableitung Zeichen
>> Feste Breaking Points, feste Schriftformate
b) Definition Spaltenbreite in % Browsergrösse
>> Schriftformate passen sich dynamisch an:
c) Definition Spaltenbreite über Anzahl Zeichen
Schriftgrösse fix, Umfeld passt sich an
106. Web Typography
*
05
S.106
Ansatz a)
Definition Spaltenbreite
Kontrolliertes Design 1. Definition Spaltenbreiten
Für fixe Break Points 2. Schriftformate definieren
Ca. 66 Zeichen/Zeile Einspaltig
Ca. 45 Zeichen/Zeile Mehrspaltig
Spalte: 600 Pixel Breite
Mit Arial *Blindtext* >> 22px / +20
Lorem ipsum dolor sit amet, consectetur adip *isicing elit,
sed do eiusmod *tempor incididunt ut labore et dolore Zeilenabstand (140-160%) >> 32px
magna. Neque plibus quatia is ea nus ad qui quia eum as ZA (32px) / SG (22px) = ZA 1.45em
aut ditatem aut esed eari adipsam vercitat que.
Mehrspaltig: 300px Spaltenbreite
Lorem ipsum dolor sit amet, consectetur adip Lorem ipsum dolor sit amet, consectetur adip
Test mit Arial *Blindtext* >> 13px
*isicing elit, sed do eiusmod *tempor incididunt ut *isicing elit, sed do eiusmod *tempor incididunt ut
labore et dolore magna. Neque plibus quatia is labore et dolore magna. Neque plibus quatia is ZA = 1.45em*13px = 18.9 = 19
ea nus ad qui quia eum as aut ditatem aut esed ea nus ad qui quia eum as aut ditatem aut esed
eari adipsam vercitat que volupis assimo ipsam eari adipsam vercitat que volupis assimo ipsam
comnihi caborro minverovid magnatectur rendae comnihi caborro minverovid magnatectur rendae
3. Spielraum definieren:
culparu metur, temolupta sunt ratur? culparu metur, temolupta sunt ratur? +/- 20% ist OK
107. Web Typography
*
05 1. Annahme ø Browserbreite
S.107 (1'000 px)
Ansatz b) 2. Groblayout
Spaltenbreite in % Browsergrösse 3. Definition Spaltenbreite
Relativ zur Browserbreite:
User hat volle Kontrolle 500 px = 50%
Definition je device Oder andersrum: 4. Schriftformate definieren
Schriftformate im Design
Schriftformate definieren,
optimale Spaltenbreite ableiten 66 Zeichen bei 500 px
>> Arial 18 px, +20 LW, 27px ZA
Relativ zur Spaltenbreite (SB)
Browser: 600px
18px * X(em) = 500px
X(em) = 500px / 18px = 27.8
Spaltenbreite = 50% * 600px = 300px
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, ZA: 18px * X(em) = 26px
sed do eiusmod *tempor incididunt ut labore et dolore
magna. Neque plibus quatia is ea nus ad qui quia eum
X(em) = 26px / 18px = 1.44
as aut ditatem aut esed eari adipsam vercitat que volupis
assimo ipsam comnihi caborro minverovid magnatectur
rendae culparu metur, temolupta sunt ratur? Spaltenbreite: 50% Browserbreite
Schriftgrösse: 27.8em/Spalte
Schriftgrösse = 300px / 27.8em = 10.8 px
Zeilenabstand = 10.8px * 1.44em = 15.5px
Zeilenabstand: 1.44* Schriftgrösse
Laufweite: +20
108. Web Typography
05
S.108
vw
Viewport sized typography
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
109. Web Typography
05
S.109
Mehr
Viewport sized typography
http://css-tricks.com/viewport-sized-typography/
Trent Walton on Fluid Type
http://trentwalton.com/2012/06/19/fluid-type/