Web Typografie

  • 342 views
Uploaded on

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 …

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?

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
342
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
16
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Typography.
  • 2. Web Typografie.
  • 3. Web Typografie.
  • 4. Web Typography01S.5 Warum Typografie?
  • 5. Web Typography01S.6 I love Typography!BedeutungPersönlich
  • 6. Web Typography01S.7 Schrift CC CD Farbe Form CBBedeutungRolle der Typografie
  • 7. Web Typography01S.8 „Typografie ist eine Dienstleistung.“ Kurt WeidemannBedeutungRolle des Designers
  • 8. Web Typography01S.9 „Web Design is 95% Typography.“ Oliver ReichensteiniA, 2006http://informationarchitects.net/blog/the-web-is-all-about-typography-period/
  • 9. Web Typography02S.10 Veränderung.
  • 10. Web Typography02S.110.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
  • 11. Web Typography02S.12+TechnologieHTML, CSS, Java ScriptOpen Type, True TypeWOFF (http://hacks.mozilla.org/2009/10/woff/)TypeKit, WebInk, Google fonts, …
  • 12. Web Typography02S.13 -BrowserWichtiger BeeinflusserNeue Browser mit grossen MöglichkeitenAlte Browser halten sich sehr hartnäckig
  • 13. Web Typography02S.14 InhalteNix is fixInhalte werden zunehmend dynamischInhalte werden kurzlebiger, schneller, globaler eingebundenKontrolle über Bilder / Videos immer schwererSchrift als Design- und Markenbildendes Element wird immer wichtiger
  • 14. Web Typography02S.15 BandbreiteAlles gehtZumindest in der Desktop Version
  • 15. Web Typography03S.16 Trends in der Web Typografie
  • 16. Web Typography03S.17 TypografieTypo ist ein Thema!Designer und Entwickler nähern sich dem Thema mit viel Leidenschaft
  • 17. Web Typography03S.18 Big TypeGrosse Monitore - grosse SchriftSchrift als wichtiges Markenbildendes Element für dynamische Inhalte
  • 18. Web Typography03S.23 FocussedHier spielt die MusikDazu eignet sich grosse Typografie hervorragend:Den Fokus zu setzen und Leser zu führen
  • 19. Web Typography03S.27 -KontrastReduzierter KontrastFür ein ruhigeres Gesamtbild und edleres Erscheinungsbild
  • 20. Web Typography03S.29 SerifenEndlichSerifenschriften werden zunehmend eingesetzt
  • 21. Web Typography03S.30 VielfaltFett mit Dünn, Condensed mit Wide, Sans Serif mit Serif, Fraktur und ScriptDie Mischung machts: Ein abwechslungsreiches und individuelles Schriftbild
  • 22. Web Typography03S.35 Moved TypeKein StillstandAufwändig aber fesselnd: Typografie in Bewegung
  • 23. Web Typography03S.47 Typo+ImageDirekt draufVergiss die BoxenAm Besten gleich aufs Video
  • 24. Web Typography03S.57 ResponsiveOptimale Typografie für jedes device
  • 25. Web Typography04S.58 Tipps für gute (Web) Typografie
  • 26. Web Typography04S.59 Satz*Enge GrenzenGeht gut: Linksbündiger, rechtsbündiger, Zentrierter FlattersatzGeht nur unter Schmerzen: Blocksatz, Silbentrennung
  • 27. Web Typography *04S.60linksbündig In es accum linksbündig In es accum linksbündig In es accumautemquaepe paria si cum autemquaepe paria si cum autemquaepe paria si cumeossequo 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 praquidiat uribus iliquibeate liquuntist quidiat uribus iliquibeate liquuntist quidiat uribus iliquibeate liquuntistaspeles 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 vitvit que vel mo et odist, es aut pe- que vel mo et odist, es aut peliquelique 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?
  • 28. Web Typography04S.61 Einzüge*Helfen Gedanken innerhalb von Absätzen zu gruppierenNicht den ersten Absatz einziehen!
  • 29. Web Typography *04S.62Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magna do eiusmod tempor incididunt ut labore et dolore magnaaliqua. 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 quivolectem quias nonet qui in posaper aeribus antionsequi ut. in posaper aeribus antionsequi ut. Quia erionse quiderisQuia 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 usdaerfeserum dolorrum et accus excereribus, ande dolupti usdaerf ereicto cuptusandae ea doluptur?ereicto cuptusandae ea doluptur? Quia dolorun temolla boreius ipiet illaceaquam apis utQuia dolorun temolla boreius ipiet illaceaquam apis ut quiandam, volorenis simint veri aute omnimus ea sent autquiandam, volorenis simint veri aute omnimus ea sent aut latemodis. Gita corersp eribus. Mo to beratquidem eumlatemodis. Gita corersp eribus. Mo to beratquidem eum eatestinis dem vit. Occae sunt, susant et venim ilicianihiteatestinis 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, sitiontetur, seque maio quo ea vitioreped enit, consequam hita por a aut restrumsunt velecestrum autem explaudam, sition por a aut restrum
  • 30. Web Typography04S.63 Font Styles*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
  • 31. Web Typography *04S.64Design vs ImplementierungSystemfonts "Core Fonts for the Web"Dennoch auf jedem Browser/System Unterschiedehttp://en.wikipedia.org/wiki/Core_fonts_for_the_WebWebfontsIm Designprozess sicherstellen, dass Fonts1. Webtauglich sind2. Wie/Wo eingebettet werden können
  • 32. Web Typography05 AS.65Lorem IpsumGa. Nemporem estemperum liatist, esequia nestrumfuga. Vellupi tinusci duntior atusam harum nossum Aquam volestem vellupta volorpos ut mo es voluptam quam rescipsunto odigenihicil mo ea vellaborporeexeria volorro bea niam illicimus doluptur, quaestia dolum quiam quiandigentoblaboriatur suntia estiost quo qui dolupta tiusci re inumque nihilis volorio rumquevitat fugitium sit moluptatem doluptur adigent minusda dere re liquatio. Henditet quasitinti ulparciis solor sim ium facidel lorehenis evellorem ut aligendem velitquat. A
  • 33. Web Typography *04S.66Adobe 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 2400 Fonts gekauft werden)Fontshop Web FontFonts wird ausgebauthttp://www.fontshop.com/fonts/webfonts/Teilweise Einbindung über Typekit
  • 34. Web Typography *04S.68Linotype: Über 10000 Webfonts,Einbindung über fonts.com, Testfeature für websiteshttp://www.linotype.comhttp://www.webfontspreview.comGoogle Web Fonts (gratis)Viele Fonts zur Einbindung, jedoch kein definiertesDesktop Fontset vorhanden
  • 35. Web Typography *04S.69AnsätzeVorhandene 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 DesignprozessToDo: Definition Standards, Sets zusammenstellen
  • 36. Web Typography04S.70 Font sizes*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
  • 37. Web Typography *04S.71 a b H C H C
  • 38. Web Typography04S.72 45-66-75*Nur 66 Zeichen!Einspaltiges Layout: 45-75 Zeichen gelten als gut lesbar, 66 als optimalMehrspaltiges Layout: 40-50 ZeichenEntscheidung immer nach Einzelfall / Schrift
  • 39. Web Typography04S.73 45-66-75*Nur 66 Zeichen!Einspaltiges Layout: 45-75 Zeichen gelten als gut lesbar, 66 als optimalMehrspaltiges Layout: 40-50 ZeichenEntscheidung immer nach Einzelfall / Schrift
  • 40. Web Typography *04S.7445-75 Zeichen (optimalerweise 66 Zeichen)Lorem ipsum dolor sit amet, consectetur adip *isicing elit, seddo eiusmod *tempor incididunt ut labore et dolore magna40-50 ZeichenLorem ipsum dolor sit amet, consectetur adip Ceatem necte nos que occaborunt iliquam iumisicing elit, sed do eiusmod tempor incididunt ut velecab inullandis alicimporro magnis magnimplabore et dolore magna aliqua. Lit fugia sunto oratecus maion eos aut volupta turestibus apisdi alic tenimporis reribusciet ex etur ad quam ut ma quam imillum dem nus. Eperum volupideromoluptamus dolorum volor reptatiatem. tempedi dolorum, cus, eiunt. Tio. *45. Zeichen / *75. Zeichen
  • 41. Web Typography04S.75 Spacing*Kleine Grössen zugeben, Grosse Grössen reduzierenKleine Schriftgrössen: Zeichenabstand / Wortabstand zugebenGrosse Schriftgrössen: Zeichenabstand / Wortabstand reduzierenEntscheidung immer nach Einzelfall / Schrift
  • 42. Web Typography *04S.76Headline Big Spacing 0Headline Big Spacing -15Headline Big Spacing -30
  • 43. Web Typography *04S.77Headline Big Spacing -30Lorem 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 *isicingdo 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 alitvolorec tatiam rerorios eostio ommoluptiant quamus, quia sime volorec tatiam rerorios eostio ommoluptiant quamus, quia fugitibeatet volorec tatiam rerorios eostio ommoluptiantipsa 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 eossitisqueut 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 autvel 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 inusque 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
  • 44. Web Typography04S.78 Line Spacing1.4 x Schriftgrösse - 1.5 x Schriftgrösse ist OptimalEntscheidung immer nach Einzelfall / Schrift
  • 45. Web Typography *04S.79Lorem 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 ditatemaut esed eari adipsam vercitat que volupis assimo ipsamcomnihi caborro minverovid magnatectur rendae culparumetur, 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 ditatemaut esed eari adipsam vercitat que volupis assimo ipsamcomnihi caborro minverovid magnatectur rendae culparumetur, 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 ditatemaut esed eari adipsam vercitat que volupis assimo ipsamcomnihi caborro minverovid magnatectur rendae culparumetur, temolupta sunt ratur?
  • 46. Web Typography04S.80 Rhytmus*Das gute GrundlinienrasterHeadlines, Bilder, Fussnoten, etc. solltenauf den gleichen Grundlinien bleiben, bzw. auf teilbaren davon
  • 47. Web Typography *04S.81Headline BlindtextLorem ipsum dolor sit amet, consectetur adip *isicing elit, seddo eiusmod *tempor incididunt ut labore et dolore magna.Neque plibus quatia is ea nus ad qui quia eum as aut ditatemaut esed eari adipsam vercitat que volupis assimo ipsamcomnihi caborro minverovid magnatectur rendae culparu Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed dometur, temolupta sunt ratur? eiusmod *tempor incididunt ut labore et dolore magna. Neque plibus quatia is ea
  • 48. Web Typography04S.82 ReihenNicht im Fliesstext untergehen lassenLange Reihen von Zahlen (Telefonnummern, etc) sollten gruppiert werdenAbkürzungen sollten letterspacing erhalten, damit sie besser erfassbar sind
  • 49. Web Typography *04S.83Lorem ipsum dolor sit amet, consectetur adip *isicing elit, seddo eiusmod *tempor incididunt ut labore et dolore magna.Neque plibus quatia is ea nus ad +4144228735 qui quia eumas aut ditatem aut BUM esed eari adipsam vercitat que volupisassimo ipsam comnihi caborro HOK minverovid magnatecturrendae culparu metur, temolupta sunt ratur?Lorem ipsum dolor sit amet, consectetur adip *isicing elit, seddo eiusmod *tempor incididunt ut labore et dolore magna.Neque plibus quatia is ea nus ad +41.44 22 87 35 qui quiaeum as aut ditatem aut BUM esed eari adipsam vercitatque volupis assimo ipsam comnihi caborro HOK minverovidmagnatectur rendae culparu metur, temolupta sunt ratur?
  • 50. Web Typography04S.84 "Zitate"So nicht!
  • 51. Web Typography04S.85 „Zitate“So schon eherEselsbrücke 9966
  • 52. Web Typography04S.86 <<Zitate>>So nicht!
  • 53. Web Typography04S.87 «Zitate»So schon eher
  • 54. Web Typography04S.88 Negativ*Negativ wirkt grösserGgfs muss – wenn gleiche Grössen erzielt werden sollen – Negative Schrift verkleiner werden
  • 55. Web Typography *04S.89Lorem Ipsum Datur 18pt Lorem Ipsum Datur 18ptLorem Ipsum Datur 36pt Lorem Ipsum Datur 36pt72pt 72pt
  • 56. Web Typography04S.90 MehrThe Elements of Typographic Styleby Robert BringhurstThe Elements of Typographic Style Applied to the Webhttp://webtypography.net
  • 57. Web Typography05S.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/
  • 58. Web Typography05S.92 Lesen.Analysieren und EntschlüsselnInhalte und Texte verstehenTonality und Absicht erkennenStrukturen und Elemente
  • 59. Web Typography05S.93 Ordnen.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
  • 60. Web Typography05S.94 FontsSchriften auswählenWelche Schriften passen?Welche darf ich nehmen? Welche sind vorgegeben?Was erlaubt die Technologie?Wie macht Ihr das? Wo sucht Ihr?
  • 61. Web Typography05S.95 MoodEntwickle das Look & FeelWelche Grössenverhältnisse?Welches Raster?Welches Gesamterscheinungsbild?Welche Elemente?Was sticht hervor?
  • 62. Web Typography05S.96 Details.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
  • 63. Web Typography05S.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
  • 64. Web Typography05S.99 Lets get realDas Mood steht?Jetzt gehts an Eingemachte!Wir wollen es genau wissen!Aber wie geht das mit fluidem Design?
  • 65. Web Typography05S.100 Fluid TypeSpaltenbreiten definierenErstmal Mobile: Wie breit soll die Spalte hier sein, dann Desktop:Eine? Viele? Lässt sich gut noch über Grauwerte definieren...
  • 66. Web Typography *05S.101Bei Fluidem Design sind Browsergrösse und alleTypografischen Einheiten miteinander verbunden:Schriftgrösse, Zeilenabstand, Zeilenlänge, Laufweite, …M Die Lösung: em1 em = Breite/Höhe Geviert einer definierten Schriftgrösse
  • 67. Web Typography *05S.102 Starte mit einem device; definiere lead-device;
  • 68. Web Typography *05S.103Grobes Raster: Spaltenbreiten definieren 1. 2. 3.
  • 69. Web Typography05S.104 Play*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!
  • 70. Web Typography *05S.105Fluides Design vs. Schriftgrössena) Definition Spaltenbreite in Pixel, Ableitung Zeichen>> Feste Breaking Points, feste Schriftformateb) Definition Spaltenbreite in % Browsergrösse>> Schriftformate passen sich dynamisch an:c) Definition Spaltenbreite über Anzahl ZeichenSchriftgrösse fix, Umfeld passt sich an
  • 71. Web Typography *05S.106Ansatz a)Definition SpaltenbreiteKontrolliertes Design 1. Definition SpaltenbreitenFü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 / +20Lorem ipsum dolor sit amet, consectetur adip *isicing elit,sed do eiusmod *tempor incididunt ut labore et dolore Zeilenabstand (140-160%) >> 32pxmagna. Neque plibus quatia is ea nus ad qui quia eum as ZA (32px) / SG (22px) = ZA 1.45emaut ditatem aut esed eari adipsam vercitat que. Mehrspaltig: 300px SpaltenbreiteLorem 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 utlabore et dolore magna. Neque plibus quatia is labore et dolore magna. Neque plibus quatia is ZA = 1.45em*13px = 18.9 = 19ea nus ad qui quia eum as aut ditatem aut esed ea nus ad qui quia eum as aut ditatem aut esedeari adipsam vercitat que volupis assimo ipsam eari adipsam vercitat que volupis assimo ipsamcomnihi 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
  • 72. Web Typography *05 1. Annahme ø BrowserbreiteS.107 (1000 px)Ansatz b) 2. GroblayoutSpaltenbreite 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
  • 73. Web Typography05S.108 vwViewport sized typography1vw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, whichever is smaller
  • 74. Web Typography05S.109 MehrViewport sized typographyhttp://css-tricks.com/viewport-sized-typography/Trent Walton on Fluid Typehttp://trentwalton.com/2012/06/19/fluid-type/
  • 75. Web Typography05S.110 Danke.