Web Typografie
-
Upload
felix-widmaier -
Category
Design
-
view
609 -
download
5
description
Transcript of Web Typografie
Web Typography.
Web Typografie.
Web Typografie.
Web Typography
01S.5
Warum Typografie?
I love Typography!
Web Typography
01S.6
BedeutungPersönlich
Web Typography
01S.7
BedeutungRolle der Typografie
Schrift
FormFarbe
CD
CB
CC
„Typografie ist eine Dienstleistung.“Kurt Weidemann
Web Typography
01S.8
BedeutungRolle des Designers
„Web Design is 95% Typography.“Oliver Reichenstein
Web Typography
01S.9
iA, 2006http://informationarchitects.net/blog/the-web-is-all-about-typography-period/
Web Typography
02S.10
Veränderung.
Web Typography
S.11
Screens und Devices
0.290 mm(19 Zoll Formac)
0.197 mm(Mac Book)
0.197 mm(Mac Book)
0.192 mm(ipad)
0.115 mm(Mac Book Retina)
0.096 mm(ipad Retina)
02
+Technologie
Web Typography
S.12
HTML, CSS, Java ScriptOpen Type, True TypeWOFF (http://hacks.mozilla.org/2009/10/woff/)TypeKit, WebInk, Google fonts, …
02
-Browser
Web Typography
S.13
Wichtiger BeeinflusserNeue Browser mit grossen MöglichkeitenAlte Browser halten sich sehr hartnäckig
02
Inhalte
Web Typography
S.14
Nix is fixInhalte werden zunehmend dynamischInhalte werden kurzlebiger, schneller, globaler eingebundenKontrolle über Bilder / Videos immer schwererSchrift als Design- und Markenbildendes Element wird immer wichtiger
02
Bandbreite
Web Typography
S.15
Alles gehtZumindest in der Desktop Version
02
Web Typography
03S.16
Trends in der Web Typografie
Typografie
Web Typography
S.17
Typo ist ein Thema!Designer und Entwickler nähern sich dem Thema mit viel Leidenschaft
03
Big Type
Web Typography
S.18
Grosse Monitore - grosse SchriftSchrift als wichtiges Markenbildendes Element für dynamische Inhalte
03
Focussed
Web Typography
S.23
Hier spielt die MusikDazu eignet sich grosse Typografie hervorragend: Den Fokus zu setzen und Leser zu führen
03
-Kontrast
Web Typography
S.27
Reduzierter KontrastFür ein ruhigeres Gesamtbild und edleres Erscheinungsbild
03
Serifen
Web Typography
S.29
EndlichSerifenschriften werden zunehmend eingesetzt
03
Vielfalt
Web Typography
S.30
Fett mit Dünn, Condensed mit Wide, Sans Serif mit Serif, Fraktur und ScriptDie Mischung machts: Ein abwechslungsreiches und individuelles Schriftbild
03
Moved Type
Web Typography
S.35
Kein StillstandAufwändig aber fesselnd: Typografie in Bewegung
03
Typo+Image
Web Typography
S.47
Direkt draufVergiss die BoxenAm Besten gleich aufs Video
03
Responsive
Web Typography
S.57
Optimale Typografie für jedes device
03
Web Typography
S.58
Tipps für gute (Web) Typografie
04
Satz*
Web Typography
S.59
Enge GrenzenGeht gut: Linksbündiger, rechtsbündiger, Zentrierter FlattersatzGeht nur unter Schmerzen: Blocksatz, Silbentrennung
S.59
04
Web Typography
S.60
linksbündig In es accum autemquaepe paria si cum eossequo vit que vel mo et odist, es aut pelique re quas sime pra quidiat uribus iliquibeate liquuntist aspeles est dolloru ptatur?
linksbündig In es accum autemquaepe paria si cum
eossequo vit que vel mo et odist, es aut pelique re quas sime pra
quidiat uribus iliquibeate liquuntist aspeles est dolloru ptatur?
linksbündig In es accum autemquaepe paria si cum
eossequo vit que vel mo et odist, es aut pelique re quas sime pra
quidiat uribus iliquibeate liquuntist aspeles est dolloru ptatur?
*
linksbündig In es accum autem-quaepe paria si cum eossequo vit que vel mo et odist, es aut pe-lique re quas sime pra quidiat uri-bus iliquibeate liquuntist aspeles est dolloru ptatur?
linksbündig In es accum autem-quaepe paria si cum eossequo vit que vel mo et odist, es aut pelique re quas sime pra quidiat uribus ili-quibeate liquuntist aspeles est dol-loru ptatur?
S.60
04
Einzüge*
Web Typography
S.61
Helfen Gedanken innerhalb von Absätzen zu gruppierenNicht den ersten Absatz einziehen!
S.61
04
Web Typography
S.62
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lanim volupta nis earciundit. Vollaut aliquam alique et que rentiat re con pos derum volectem quias nonet qui in posaper aeribus antionsequi ut. Quia erionse quideris es maion reste exerspeliam, sandame nissi quamusa illat. Aut et andeles est quis verum, sin non num estiori aeptas eserum dolorrum et accus excereribus, ande dolupti usdaerf ereicto cuptusandae ea doluptur?
Quia dolorun temolla boreius ipiet illaceaquam apis ut quiandam, volorenis simint veri aute omnimus ea sent aut latemodis. Gita corersp eribus. Mo to beratquidem eum eatestinis dem vit. Occae sunt, susant et venim ilicianihit vollab ipsa dicit, tetur, seque maio quo ea vitioreped enit, consequam hita sunt velecestrum autem explaudam, sition por a aut restrum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lanim volupta nis earciundit. Vollaut aliquam alique et que rentiat re con pos derum volectem quias nonet qui in posaper aeribus antionsequi ut. Quia erionse quideris es maion reste exerspeliam, sandame nissi quamusa illat. Aut et andeles est quis verum, sin non num estiori aeptas eserum dolorrum et accus excereribus, ande dolupti usdaerf ereicto cuptusandae ea doluptur?
Quia dolorun temolla boreius ipiet illaceaquam apis ut quiandam, volorenis simint veri aute omnimus ea sent aut latemodis. Gita corersp eribus. Mo to beratquidem eum eatestinis dem vit. Occae sunt, susant et venim ilicianihit vollab ipsa dicit, tetur, seque maio quo ea vitioreped enit, consequam hita sunt velecestrum autem explaudam, sition por a aut restrum
*S.62
04
Font Styles*
Web Typography
S.63
Nur Web Fonts fürs Web, sonst nichts!NUR Web Fonts vom ersten Design an nutzenHöhere Auflösung erlaubt Einsatz von Kursiven, Serifenschriften, etc. ab HeadlinegrösseKursive Schriften in kleineren Grössen meist schwierig
S.63
04
Web Typography
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 Fonts1. Webtauglich sind2. Wie/Wo eingebettet werden können
*S.64
04
Web Typography
S.65
Lorem IpsumGa. Nemporem estemperum liatist, esequia nestrum fuga. Vellupi tinusci duntior atusam harum nossum 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
A
A
05
Web Typography
S.66
Adobe Web Font Collection (Subset v. Font Folio11.1)http://www.adobe.com/type/webfont/info.html310 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
*S.66
04
Web Typography
S.68
Linotype: Über 10'000 Webfonts, Einbindung über fonts.com, Testfeature für websiteshttp://www.linotype.comhttp://www.webfontspreview.com
Google Web Fonts (gratis)Viele Fonts zur Einbindung, jedoch kein definiertes Desktop Fontset vorhanden
*S.68
04
Web Typography
S.69
Ansätze
Vorhandene Fonts abgleichen / sortierenWas ist über Fonts.com/Typekit/WebIkn, ... verfügbar?
Extensis für SuitcaseErlaubt Einbindung der Fonts von Fonts.com/Typekit/ WebIkn, ... schon im Designprozess
ToDo: Definition Standards, Sets zusammenstellen
*S.69
04
Font sizes*
Web Typography
S.70
Generell: Grösse zähltGrosse Schriften tun gut! Höhere Auflösung erfordert grössere Schriftgrössen, erlauben aber mehr DetailsDesktop grösser als Mobile! Desktop / Laptop hat grösseren Leseabstand als MobileHeadlines mit Hausschriften können erst ab gewisser Grösse wirken
S.70
04
Web Typography
S.71*C
H
a b
HC
S.71
04
45-66-75*
Web Typography
S.72
Nur 66 Zeichen!Einspaltiges Layout: 45-75 Zeichen gelten als gut lesbar, 66 als optimalMehrspaltiges Layout: 40-50 Zeichen
Entscheidung immer nach Einzelfall / Schrift
S.72
04
45-66-75*
Web Typography
S.73
Nur 66 Zeichen!Einspaltiges Layout: 45-75 Zeichen gelten als gut lesbar, 66 als optimalMehrspaltiges Layout: 40-50 Zeichen
Entscheidung immer nach Einzelfall / Schrift
S.73
04
Web Typography
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
*45. Zeichen / *75. Zeichen
40-50 ZeichenLorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lit fugia sunto di alic tenimporis reribusciet ex etur ad quam ut moluptamus dolorum volor reptatiatem.
Ceatem necte nos que occaborunt iliquam ium velecab inullandis alicimporro magnis magnimp oratecus maion eos aut volupta turestibus apis ma quam imillum dem nus. Eperum volupidero tempedi dolorum, cus, eiunt. Tio.
*S.74
04
Spacing*
Web Typography
S.75
Kleine Grössen zugeben, Grosse Grössen reduzierenKleine Schriftgrössen: Zeichenabstand / Wortabstand zugebenGrosse Schriftgrössen: Zeichenabstand / Wortabstand reduzieren Entscheidung immer nach Einzelfall / Schrift
S.75
04
Web Typography
S.76
Headline Big Spacing 0
Headline Big Spacing -15
Headline Big Spacing -30
*S.76
04
Web Typography
S.77
Headline Big Spacing -30
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed do eiusmod * Net peribus citiae rest volum alit fugitibeatet volorec tatiam rerorios eostio ommoluptiant quamus, quia sime ipsa a dolendi omnianti nus eossitisque nem landaes eicilliqui ut ped quiderum repe reici ut aut aute offici andae. At as doles vel int alissenimi, vellab inus aperrorum laborruntias estrum quo que pore as cum utem quuntis.
Spacing 0
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed do eiusmod * Net peribus citiae rest volum alit fugitibeatet volorec tatiam rerorios eostio ommoluptiant quamus, quia sime ipsa a dolendi omnianti nus eossitisque nem landaes eicilliqui ut ped quiderum repe reici ut aut aute offici andae. At as doles vel int alissenimi, vellab inus aperrorum laborruntias estrum quo que pore as cum utem quuntis.
Spacing +20
Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed do eiusmod * Net peribus citiae rest volum alit fugitibeatet volorec tatiam rerorios eostio ommoluptiant quamus, quia sime ipsa a dolendi omnianti nus eossitisque nem landaes eicilliqui ut ped quiderum repe reici ut aut aute offici andae. At as doles vel int alissenimi, vellab inus aperrorum laborruntias estrum quo que pore as cum utem quuntis.
Spacing +40
*S.77
04
Line Spacing
Web Typography
S.78
1.4 x Schriftgrösse - 1.5 x Schriftgrösse ist Optimal Entscheidung immer nach Einzelfall / Schrift
S.78
04
Web Typography
S.79*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 metur, temolupta sunt ratur?
18px / 27px ZA (Faktor 1.5)
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 metur, temolupta sunt ratur?
18px / 20px ZA (Faktor 1.1)
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
metur, temolupta sunt ratur?
18px / 35px ZA (Faktor 1.94)
S.79
04
Rhytmus*
Web Typography
S.80
Das gute Grundlinienraster Headlines, Bilder, Fussnoten, etc. sollten auf den gleichen Grundlinien bleiben, bzw. auf teilbaren davon
S.80
04
Web Typography
S.81*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 metur, temolupta sunt ratur?
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
S.81
04
Reihen
Web Typography
S.82
Nicht im Fliesstext untergehen lassenLange Reihen von Zahlen (Telefonnummern, etc) sollten gruppiert werdenAbkürzungen sollten letterspacing erhalten, damit sie besser erfassbar sind
S.82
04
Web Typography
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?
S.83
04
"Zitate"
Web Typography
S.84
So nicht!
S.84
04
„Zitate“
Web Typography
S.85
So schon eherEselsbrücke 9966
S.85
04
<<Zitate>>
Web Typography
S.86
So nicht!
S.86
04
«Zitate»
Web Typography
S.87
So schon eher
S.87
04
Negativ*
Web Typography
S.88
Negativ wirkt grösserGgfs muss – wenn gleiche Grössen erzielt werden sollen – Negative Schrift verkleiner werden
S.88
04
Web Typography
S.89*
72pt 72pt
Lorem Ipsum Datur 36pt Lorem Ipsum Datur 36pt
Lorem Ipsum Datur 18ptLorem Ipsum Datur 18pt
S.89
04
Mehr
Web Typography
S.90
The Elements of Typographic Styleby Robert Bringhurst
The Elements of Typographic Style Applied to the Webhttp://webtypography.net
S.90
04
Web Typography
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 Waltonhttp://trentwalton.com/2012/06/19/fluid-type/
S.91
05
Lesen.
Web Typography
S.92
Analysieren und EntschlüsselnInhalte und Texte verstehenTonality und Absicht erkennenStrukturen und Elemente
05
Ordnen.
Web Typography
S.93
Beziehungen klärenGewichtung klären. Was hat Prio 1, was Prio 2, etc.Welche Elemente müssen wir wie anordnen? Nebeneinander? Nacheinander? Übereinander?Grobskizzen helfen
05
Fonts
Web Typography
S.94
Schriften auswählenWelche Schriften passen?Welche darf ich nehmen? Welche sind vorgegeben?Was erlaubt die Technologie?Wie macht Ihr das? Wo sucht Ihr?
05
Mood
Web Typography
S.95
Entwickle das Look & FeelWelche Grössenverhältnisse? Welches Raster?Welches Gesamterscheinungsbild?Welche Elemente?Was sticht hervor?
05
Details.
Web Typography
S.96
Investiere in DetailsStandards wie next/back, Footer, Links, etc. sind lohnende Ziele für Typografische LiebeSie machen viel aus und definieren einen Look z.T. mehr als der MengentextSie haben grosse Chancen, dass sie beim Betrachter durchkommen & sich technisch umsetzen lassen
05
Decide.
Web Typography
S.98
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
05
Lets get real
Web Typography
S.99
Das Mood steht?Jetzt gehts an Eingemachte!Wir wollen es genau wissen!Aber wie geht das mit fluidem Design?
05
Fluid Type
Web Typography
S.100
Spaltenbreiten definierenErstmal Mobile: Wie breit soll die Spalte hier sein, dann Desktop: Eine? Viele? Lässt sich gut noch über Grauwerte definieren...
05
Web Typography
S.101
Bei Fluidem Design sind Browsergrösse und alle Typografischen Einheiten miteinander verbunden:Schriftgrösse, Zeilenabstand, Zeilenlänge, Laufweite, …
Die Lösung: em
*
1 em = Breite/Höhe Geviert einer definierten Schriftgrösse
M
05
Web Typography
S.102
Starte mit einem device; definiere lead-device;*05
Web Typography
S.103
Grobes Raster: Spaltenbreiten definieren*2. 3.
1.
05
Play*
Web Typography
S.104
Font x Schriftgrösse x Spaltenbreite x Zeilenabstand = Fluides DesignCopy first! Schriftgrösse so berechnen, dass optimaler Lesbarkeit gewährleistet wirdHeadlines und weitere Styles entsprechend Mood anpassen - je device!
05
Web Typography
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 ZeichenSchriftgrösse fix, Umfeld passt sich an
*05
Web Typography
S.106
Ansatz a) Definition SpaltenbreiteKontrolliertes DesignFür fixe Break Points
*
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.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 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 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?
1. Definition Spaltenbreiten
2. Schriftformate definierenCa. 66 Zeichen/Zeile EinspaltigCa. 45 Zeichen/Zeile Mehrspaltig
Spalte: 600 Pixel BreiteMit Arial *Blindtext* >> 22px / +20
Zeilenabstand (140-160%) >> 32pxZA (32px) / SG (22px) = ZA 1.45em
Mehrspaltig: 300px SpaltenbreiteTest mit Arial *Blindtext* >> 13pxZA = 1.45em*13px = 18.9 = 19
3. Spielraum definieren:+/- 20% ist OK
05
Web Typography
S.107
Ansatz b) Spaltenbreite in % BrowsergrösseUser hat volle KontrolleDefinition je device
*
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 metur, temolupta sunt ratur?
1. Annahme ø Browserbreite(1'000 px)
2. Groblayout
3. Definition Spaltenbreite Relativ zur Browserbreite: 500 px = 50%
4. Schriftformate definierenSchriftformate im Design66 Zeichen bei 500 px >> Arial 18 px, +20 LW, 27px ZA
Relativ zur Spaltenbreite (SB)18px * X(em) = 500pxX(em) = 500px / 18px = 27.8
ZA: 18px * X(em) = 26pxX(em) = 26px / 18px = 1.44
Spaltenbreite: 50% BrowserbreiteSchriftgrösse: 27.8em/SpalteZeilenabstand: 1.44* SchriftgrösseLaufweite: +20
Oder andersrum:Schriftformate definieren,
optimale Spaltenbreite ableiten
Browser: 600px
Spaltenbreite = 50% * 600px = 300px
Schriftgrösse = 300px / 27.8em = 10.8 pxZeilenabstand = 10.8px * 1.44em = 15.5px
05
vw
Web Typography
S.108
Viewport sized typography1vw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, whichever is smaller
05
Mehr
Web Typography
S.109
Viewport sized typographyhttp://css-tricks.com/viewport-sized-typography/
Trent Walton on Fluid Typehttp://trentwalton.com/2012/06/19/fluid-type/
05
Danke.
Web Typography
S.110
05