Web Typografie

110
Web Typography.

description

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?

Transcript of Web Typografie

Page 1: Web Typografie

Web Typography.

Page 2: Web Typografie

Web Typografie.

Page 3: Web Typografie

Web Typografie.

Page 4: Web Typografie
Page 5: Web Typografie

Web Typography

01S.5

Warum Typografie?

Page 6: Web Typografie

I love Typography!

Web Typography

01S.6

BedeutungPersönlich

Page 7: Web Typografie

Web Typography

01S.7

BedeutungRolle der Typografie

Schrift

FormFarbe

CD

CB

CC

Page 8: Web Typografie

„Typografie ist eine Dienstleistung.“Kurt Weidemann

Web Typography

01S.8

BedeutungRolle des Designers

Page 9: Web Typografie

„Web Design is 95% Typography.“Oliver Reichenstein

Web Typography

01S.9

iA, 2006http://informationarchitects.net/blog/the-web-is-all-about-typography-period/

Page 10: Web Typografie

Web Typography

02S.10

Veränderung.

Page 11: Web Typografie

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

Page 12: Web Typografie

+Technologie

Web Typography

S.12

HTML, CSS, Java ScriptOpen Type, True TypeWOFF (http://hacks.mozilla.org/2009/10/woff/)TypeKit, WebInk, Google fonts, …

02

Page 13: Web Typografie

-Browser

Web Typography

S.13

Wichtiger BeeinflusserNeue Browser mit grossen MöglichkeitenAlte Browser halten sich sehr hartnäckig

02

Page 14: Web Typografie

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

Page 15: Web Typografie

Bandbreite

Web Typography

S.15

Alles gehtZumindest in der Desktop Version

02

Page 16: Web Typografie

Web Typography

03S.16

Trends in der Web Typografie

Page 17: Web Typografie

Typografie

Web Typography

S.17

Typo ist ein Thema!Designer und Entwickler nähern sich dem Thema mit viel Leidenschaft

03

Page 18: Web Typografie

Big Type

Web Typography

S.18

Grosse Monitore - grosse SchriftSchrift als wichtiges Markenbildendes Element für dynamische Inhalte

03

Page 19: Web Typografie
Page 20: Web Typografie
Page 21: Web Typografie
Page 22: Web Typografie
Page 23: Web Typografie

Focussed

Web Typography

S.23

Hier spielt die MusikDazu eignet sich grosse Typografie hervorragend: Den Fokus zu setzen und Leser zu führen

03

Page 24: Web Typografie
Page 25: Web Typografie
Page 26: Web Typografie
Page 27: Web Typografie

-Kontrast

Web Typography

S.27

Reduzierter KontrastFür ein ruhigeres Gesamtbild und edleres Erscheinungsbild

03

Page 28: Web Typografie
Page 29: Web Typografie

Serifen

Web Typography

S.29

EndlichSerifenschriften werden zunehmend eingesetzt

03

Page 30: Web Typografie

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

Page 31: Web Typografie
Page 32: Web Typografie
Page 33: Web Typografie
Page 34: Web Typografie
Page 35: Web Typografie

Moved Type

Web Typography

S.35

Kein StillstandAufwändig aber fesselnd: Typografie in Bewegung

03

Page 36: Web Typografie
Page 37: Web Typografie
Page 38: Web Typografie
Page 39: Web Typografie
Page 40: Web Typografie
Page 41: Web Typografie
Page 42: Web Typografie
Page 43: Web Typografie
Page 44: Web Typografie
Page 45: Web Typografie
Page 46: Web Typografie
Page 47: Web Typografie

Typo+Image

Web Typography

S.47

Direkt draufVergiss die BoxenAm Besten gleich aufs Video

03

Page 48: Web Typografie
Page 49: Web Typografie
Page 50: Web Typografie
Page 51: Web Typografie
Page 52: Web Typografie
Page 53: Web Typografie
Page 54: Web Typografie
Page 55: Web Typografie
Page 56: Web Typografie
Page 57: Web Typografie

Responsive

Web Typography

S.57

Optimale Typografie für jedes device

03

Page 58: Web Typografie

Web Typography

S.58

Tipps für gute (Web) Typografie

04

Page 59: Web Typografie

Satz*

Web Typography

S.59

Enge GrenzenGeht gut: Linksbündiger, rechtsbündiger, Zentrierter FlattersatzGeht nur unter Schmerzen: Blocksatz, Silbentrennung

S.59

04

Page 60: Web Typografie

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

Page 61: Web Typografie

Einzüge*

Web Typography

S.61

Helfen Gedanken innerhalb von Absätzen zu gruppierenNicht den ersten Absatz einziehen!

S.61

04

Page 62: Web Typografie

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

Page 63: Web Typografie

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

Page 64: Web Typografie

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

Page 65: Web Typografie

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

Page 66: Web Typografie

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

Page 67: Web Typografie
Page 68: Web Typografie

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

Page 69: Web Typografie

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

Page 70: Web Typografie

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

Page 71: Web Typografie

Web Typography

S.71*C

H

a b

HC

S.71

04

Page 72: Web Typografie

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

Page 73: Web Typografie

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

Page 74: Web Typografie

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

Page 75: Web Typografie

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

Page 76: Web Typografie

Web Typography

S.76

Headline Big Spacing 0

Headline Big Spacing -15

Headline Big Spacing -30

*S.76

04

Page 77: Web Typografie

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

Page 78: Web Typografie

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

Page 79: Web Typografie

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

Page 80: Web Typografie

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

Page 81: Web Typografie

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

Page 82: Web Typografie

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

Page 83: Web Typografie

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

Page 84: Web Typografie

"Zitate"

Web Typography

S.84

So nicht!

S.84

04

Page 85: Web Typografie

„Zitate“

Web Typography

S.85

So schon eherEselsbrücke 9966

S.85

04

Page 86: Web Typografie

<<Zitate>>

Web Typography

S.86

So nicht!

S.86

04

Page 87: Web Typografie

«Zitate»

Web Typography

S.87

So schon eher

S.87

04

Page 88: Web Typografie

Negativ*

Web Typography

S.88

Negativ wirkt grösserGgfs muss – wenn gleiche Grössen erzielt werden sollen – Negative Schrift verkleiner werden

S.88

04

Page 89: Web Typografie

Web Typography

S.89*

72pt 72pt

Lorem Ipsum Datur 36pt Lorem Ipsum Datur 36pt

Lorem Ipsum Datur 18ptLorem Ipsum Datur 18pt

S.89

04

Page 90: Web Typografie

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

Page 91: Web Typografie

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

Page 92: Web Typografie

Lesen.

Web Typography

S.92

Analysieren und EntschlüsselnInhalte und Texte verstehenTonality und Absicht erkennenStrukturen und Elemente

05

Page 93: Web Typografie

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

Page 94: Web Typografie

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

Page 95: Web Typografie

Mood

Web Typography

S.95

Entwickle das Look & FeelWelche Grössenverhältnisse? Welches Raster?Welches Gesamterscheinungsbild?Welche Elemente?Was sticht hervor?

05

Page 96: Web Typografie

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

Page 97: Web Typografie
Page 98: Web Typografie

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

Page 99: Web Typografie

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

Page 100: Web Typografie

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

Page 101: Web Typografie

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

Page 102: Web Typografie

Web Typography

S.102

Starte mit einem device; definiere lead-device;*05

Page 103: Web Typografie

Web Typography

S.103

Grobes Raster: Spaltenbreiten definieren*2. 3.

1.

05

Page 104: Web Typografie

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

Page 105: Web Typografie

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

Page 106: Web Typografie

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

Page 107: Web Typografie

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

Page 108: Web Typografie

vw

Web Typography

S.108

Viewport sized typography1vw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, whichever is smaller

05

Page 109: Web Typografie

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

Page 110: Web Typografie

Danke.

Web Typography

S.110

05