SlideShare ist ein Scribd-Unternehmen logo
Web Typography.
Web Typografie.
Web Typografie.
Web Typography

01
S.5




      Warum Typografie?
Web Typography

01
S.6




                 I love Typography!




Bedeutung
Persönlich
Web Typography

01
S.7


                                         Schrift




                CC          CD


                                 Farbe             Form




                       CB


Bedeutung
Rolle der Typografie
Web Typography

01
S.8




  „Typografie ist eine Dienstleistung.“
                      Kurt Weidemann




Bedeutung
Rolle des Designers
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/
Web Typography

02
S.10




   Veränderung.
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
Web Typography

02
S.12




+Technologie
HTML, CSS, Java Script
Open Type, True Type
WOFF (http://hacks.mozilla.org/2009/10/woff/)
TypeKit, WebInk, Google fonts, …
Web Typography

02
S.13




                 -Browser
Wichtiger Beeinflusser
Neue Browser mit grossen Möglichkeiten
Alte Browser halten sich sehr hartnäckig
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
Web Typography

02
S.15




        Bandbreite
Alles geht
Zumindest in der Desktop Version
Web Typography

03
S.16




   Trends in der Web
   Typografie
Web Typography

03
S.17




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

03
S.18




                   Big Type
Grosse Monitore - grosse Schrift
Schrift als wichtiges Markenbildendes Element für dynamische Inhalte
Web Typography

03
S.23




                Focussed
Hier spielt die Musik
Dazu eignet sich grosse Typografie hervorragend:
Den Fokus zu setzen und Leser zu führen
Web Typography

03
S.27




               -Kontrast
Reduzierter Kontrast
Für ein ruhigeres Gesamtbild und edleres Erscheinungsbild
Web Typography

03
S.29




                        Serifen
Endlich
Serifenschriften werden zunehmend eingesetzt
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
Web Typography

03
S.35




    Moved Type
Kein Stillstand
Aufwändig aber fesselnd: Typografie in Bewegung
Web Typography

03
S.47




  Typo+Image
Direkt drauf
Vergiss die Boxen
Am Besten gleich aufs Video
Web Typography

03
S.57




       Responsive
Optimale Typografie für jedes device
Web Typography

04
S.58




   Tipps für gute
   (Web) Typografie
Web Typography

04
S.59




                                   Satz*
Enge Grenzen
Geht gut: Linksbündiger, rechtsbündiger, Zentrierter Flattersatz
Geht nur unter Schmerzen: Blocksatz, Silbentrennung
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?
Web Typography

04
S.61




               Einzüge*
Helfen Gedanken innerhalb von Absätzen zu gruppieren
Nicht den ersten Absatz einziehen!
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
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
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
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
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
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
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
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
Web Typography




       *
04
S.71




             a   b




        H
         C
                     H
                     C
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
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
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
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
Web Typography




       *
04
S.76




Headline Big         Spacing 0




Headline Big       Spacing -15




Headline Big     Spacing -30
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
Web Typography

04
S.78




 Line Spacing
1.4 x Schriftgrösse - 1.5 x Schriftgrösse ist Optimal

Entscheidung immer nach Einzelfall / Schrift
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?
Web Typography

04
S.80




             Rhytmus*
Das gute Grundlinienraster

Headlines, Bilder, Fussnoten, etc. sollten
auf den gleichen Grundlinien bleiben, bzw. auf teilbaren davon
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
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
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?
Web Typography

04
S.84




                 "Zitate"
So nicht!
Web Typography

04
S.85




                   „Zitate“
So schon eher
Eselsbrücke 9966
Web Typography

04
S.86




       <<Zitate>>
So nicht!
Web Typography

04
S.87




                 «Zitate»
So schon eher
Web Typography

04
S.88




                  Negativ*
Negativ wirkt grösser
Ggfs muss – wenn gleiche Grössen erzielt werden sollen – Negative Schrift verkleiner werden
Web Typography




       *
04
S.89




Lorem Ipsum Datur 18pt   Lorem Ipsum Datur 18pt




Lorem Ipsum Datur 36pt                            Lorem Ipsum Datur 36pt



72pt                     72pt
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
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/
Web Typography

05
S.92




                         Lesen.
Analysieren und Entschlüsseln
Inhalte und Texte verstehen
Tonality und Absicht erkennen
Strukturen und Elemente
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
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?
Web Typography

05
S.95




                            Mood
Entwickle das Look & Feel
Welche Grössenverhältnisse?
Welches Raster?
Welches Gesamterscheinungsbild?
Welche Elemente?
Was sticht hervor?
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
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
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?
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...
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
Web Typography




     *
05
S.102

 Starte mit einem device; definiere lead-device;
Web Typography




     *
05
S.103

Grobes Raster: Spaltenbreiten definieren



                                  1.

  2.             3.
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!
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
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
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
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
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/
Web Typography

05
S.110




                 Danke.

Weitere ähnliche Inhalte

Andere mochten auch

Systematische auswahl von it lösunen zur planung teil 1
Systematische auswahl von it lösunen zur planung teil 1Systematische auswahl von it lösunen zur planung teil 1
Systematische auswahl von it lösunen zur planung teil 1ICV_eV
 
Madurez. coherencia
Madurez. coherenciaMadurez. coherencia
Madurez. coherencia
Centro Universitario Villanueva
 
Revistasjulio02.compressed
Revistasjulio02.compressedRevistasjulio02.compressed
Revistasjulio02.compressed
Tatiana Villalobos
 
Microsoft Dynamics CRM und Social Networking
Microsoft Dynamics CRM und Social NetworkingMicrosoft Dynamics CRM und Social Networking
Microsoft Dynamics CRM und Social Networking
Custemotion Unternehmensberatung UG (haftungsbeschränkt)
 
Plan de accion
Plan de accionPlan de accion
Plan de accion
Gonzalo Navarro
 
Bayern International Firmenpräsentation
Bayern International FirmenpräsentationBayern International Firmenpräsentation
Bayern International Firmenpräsentation
Bayern International
 
Ak kärnten 1203 one page only
Ak kärnten 1203 one page onlyAk kärnten 1203 one page only
Ak kärnten 1203 one page onlyICV_eV
 
PDVSA ¿Buenas noticias al fin?S230615s
PDVSA ¿Buenas noticias al fin?S230615sPDVSA ¿Buenas noticias al fin?S230615s
PDVSA ¿Buenas noticias al fin?S230615s
Mario Abate Liotti Falco
 
Paul klee
Paul kleePaul klee
Paul klee
noemicervera
 
LIBRO- FRACCIONES-4TO
LIBRO- FRACCIONES-4TOLIBRO- FRACCIONES-4TO
LIBRO- FRACCIONES-4TO
aldomat07
 
Universidad popular del cesar
Universidad popular del cesarUniversidad popular del cesar
Universidad popular del cesar
Jorge Ospino Rodriguez
 
Cc2012 programm final
Cc2012 programm finalCc2012 programm final
Cc2012 programm finalICV_eV
 
Webinar: HR als Treiber der Enterprise 2.0 Transformation
Webinar: HR als Treiber der Enterprise 2.0 TransformationWebinar: HR als Treiber der Enterprise 2.0 Transformation
Webinar: HR als Treiber der Enterprise 2.0 Transformation
Sebastian Thielke
 
15 04 28_cscmp einladung 'consumer electronics' bei grundig
15 04 28_cscmp einladung 'consumer electronics' bei grundig15 04 28_cscmp einladung 'consumer electronics' bei grundig
15 04 28_cscmp einladung 'consumer electronics' bei grundig
Jeroen Bolt
 
La presentacion ya
La presentacion yaLa presentacion ya
La presentacion ya
Brayan Becerril Perez
 
Suiza ricos y-pobres-pjm-x-a-e-...xx-
Suiza ricos y-pobres-pjm-x-a-e-...xx-Suiza ricos y-pobres-pjm-x-a-e-...xx-
Suiza ricos y-pobres-pjm-x-a-e-...xx-
Mario Abate Liotti Falco
 

Andere mochten auch (20)

2014 05-24-i a-konferenz-frombrand2experience
2014 05-24-i a-konferenz-frombrand2experience2014 05-24-i a-konferenz-frombrand2experience
2014 05-24-i a-konferenz-frombrand2experience
 
Systematische auswahl von it lösunen zur planung teil 1
Systematische auswahl von it lösunen zur planung teil 1Systematische auswahl von it lösunen zur planung teil 1
Systematische auswahl von it lösunen zur planung teil 1
 
Madurez. coherencia
Madurez. coherenciaMadurez. coherencia
Madurez. coherencia
 
Revistasjulio02.compressed
Revistasjulio02.compressedRevistasjulio02.compressed
Revistasjulio02.compressed
 
Microsoft Dynamics CRM und Social Networking
Microsoft Dynamics CRM und Social NetworkingMicrosoft Dynamics CRM und Social Networking
Microsoft Dynamics CRM und Social Networking
 
Plan de accion
Plan de accionPlan de accion
Plan de accion
 
Bayern International Firmenpräsentation
Bayern International FirmenpräsentationBayern International Firmenpräsentation
Bayern International Firmenpräsentation
 
Ak kärnten 1203 one page only
Ak kärnten 1203 one page onlyAk kärnten 1203 one page only
Ak kärnten 1203 one page only
 
PDVSA ¿Buenas noticias al fin?S230615s
PDVSA ¿Buenas noticias al fin?S230615sPDVSA ¿Buenas noticias al fin?S230615s
PDVSA ¿Buenas noticias al fin?S230615s
 
Paul klee
Paul kleePaul klee
Paul klee
 
LIBRO- FRACCIONES-4TO
LIBRO- FRACCIONES-4TOLIBRO- FRACCIONES-4TO
LIBRO- FRACCIONES-4TO
 
4
44
4
 
Bodegón h.k.
Bodegón h.k.Bodegón h.k.
Bodegón h.k.
 
Musik power
Musik powerMusik power
Musik power
 
Universidad popular del cesar
Universidad popular del cesarUniversidad popular del cesar
Universidad popular del cesar
 
Cc2012 programm final
Cc2012 programm finalCc2012 programm final
Cc2012 programm final
 
Webinar: HR als Treiber der Enterprise 2.0 Transformation
Webinar: HR als Treiber der Enterprise 2.0 TransformationWebinar: HR als Treiber der Enterprise 2.0 Transformation
Webinar: HR als Treiber der Enterprise 2.0 Transformation
 
15 04 28_cscmp einladung 'consumer electronics' bei grundig
15 04 28_cscmp einladung 'consumer electronics' bei grundig15 04 28_cscmp einladung 'consumer electronics' bei grundig
15 04 28_cscmp einladung 'consumer electronics' bei grundig
 
La presentacion ya
La presentacion yaLa presentacion ya
La presentacion ya
 
Suiza ricos y-pobres-pjm-x-a-e-...xx-
Suiza ricos y-pobres-pjm-x-a-e-...xx-Suiza ricos y-pobres-pjm-x-a-e-...xx-
Suiza ricos y-pobres-pjm-x-a-e-...xx-
 

Ähnlich wie Web Typografie

Erste Hilfe Web Typografie
Erste Hilfe Web TypografieErste Hilfe Web Typografie
Erste Hilfe Web Typografie
Oliver Schöndorfer
 
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und EntwicklerWebdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Daniela Wibbeke
 
Einführung in die (Web-)Typografie
Einführung in die (Web-)TypografieEinführung in die (Web-)Typografie
Einführung in die (Web-)Typografie
jensweigel_de
 
Webfonts in der Praxis - Teil 1 -
Webfonts in der Praxis - Teil 1 - Webfonts in der Praxis - Teil 1 -
Webfonts in der Praxis - Teil 1 -
Sylvia Egger
 
Creative Camp 2014: Pretotypen Sie es by Dr. Ralf Allrutz
Creative Camp 2014: Pretotypen Sie es by Dr. Ralf AllrutzCreative Camp 2014: Pretotypen Sie es by Dr. Ralf Allrutz
Creative Camp 2014: Pretotypen Sie es by Dr. Ralf Allrutz
MFG Innovationsagentur
 
The Guide to Facebook Live & Viral Videos 2017
The Guide to Facebook Live & Viral Videos 2017The Guide to Facebook Live & Viral Videos 2017
The Guide to Facebook Live & Viral Videos 2017
Robert Seeger
 
Wie kommen die Staben ins Buch?
Wie kommen die Staben ins Buch?Wie kommen die Staben ins Buch?
Wie kommen die Staben ins Buch?
Oliver Linke
 

Ähnlich wie Web Typografie (7)

Erste Hilfe Web Typografie
Erste Hilfe Web TypografieErste Hilfe Web Typografie
Erste Hilfe Web Typografie
 
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und EntwicklerWebdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler
 
Einführung in die (Web-)Typografie
Einführung in die (Web-)TypografieEinführung in die (Web-)Typografie
Einführung in die (Web-)Typografie
 
Webfonts in der Praxis - Teil 1 -
Webfonts in der Praxis - Teil 1 - Webfonts in der Praxis - Teil 1 -
Webfonts in der Praxis - Teil 1 -
 
Creative Camp 2014: Pretotypen Sie es by Dr. Ralf Allrutz
Creative Camp 2014: Pretotypen Sie es by Dr. Ralf AllrutzCreative Camp 2014: Pretotypen Sie es by Dr. Ralf Allrutz
Creative Camp 2014: Pretotypen Sie es by Dr. Ralf Allrutz
 
The Guide to Facebook Live & Viral Videos 2017
The Guide to Facebook Live & Viral Videos 2017The Guide to Facebook Live & Viral Videos 2017
The Guide to Facebook Live & Viral Videos 2017
 
Wie kommen die Staben ins Buch?
Wie kommen die Staben ins Buch?Wie kommen die Staben ins Buch?
Wie kommen die Staben ins Buch?
 

Web Typografie

  • 4.
  • 5. Web Typography 01 S.5 Warum Typografie?
  • 6. Web Typography 01 S.6 I love Typography! Bedeutung Persönlich
  • 7. Web Typography 01 S.7 Schrift CC CD Farbe Form CB Bedeutung Rolle der Typografie
  • 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/
  • 10. Web Typography 02 S.10 Veränderung.
  • 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
  • 12. Web Typography 02 S.12 +Technologie HTML, CSS, Java Script Open Type, True Type WOFF (http://hacks.mozilla.org/2009/10/woff/) TypeKit, WebInk, Google fonts, …
  • 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
  • 15. Web Typography 02 S.15 Bandbreite Alles geht Zumindest in der Desktop Version
  • 16. Web Typography 03 S.16 Trends in der Web Typografie
  • 17. Web Typography 03 S.17 Typografie Typo ist ein Thema! Designer und Entwickler nähern sich dem Thema mit viel Leidenschaft
  • 18. Web Typography 03 S.18 Big Type Grosse Monitore - grosse Schrift Schrift als wichtiges Markenbildendes Element für dynamische Inhalte
  • 19.
  • 20.
  • 21.
  • 22.
  • 23. Web Typography 03 S.23 Focussed Hier spielt die Musik Dazu eignet sich grosse Typografie hervorragend: Den Fokus zu setzen und Leser zu führen
  • 24.
  • 25.
  • 26.
  • 27. Web Typography 03 S.27 -Kontrast Reduzierter Kontrast Für ein ruhigeres Gesamtbild und edleres Erscheinungsbild
  • 28.
  • 29. Web Typography 03 S.29 Serifen Endlich Serifenschriften werden zunehmend eingesetzt
  • 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
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57. Web Typography 03 S.57 Responsive Optimale Typografie für jedes device
  • 58. Web Typography 04 S.58 Tipps für gute (Web) Typografie
  • 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
  • 71. Web Typography * 04 S.71 a b H C H C
  • 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?
  • 84. Web Typography 04 S.84 "Zitate" So nicht!
  • 85. Web Typography 04 S.85 „Zitate“ So schon eher Eselsbrücke 9966
  • 86. Web Typography 04 S.86 <<Zitate>> So nicht!
  • 87. Web Typography 04 S.87 «Zitate» So schon eher
  • 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;
  • 103. Web Typography * 05 S.103 Grobes Raster: Spaltenbreiten definieren 1. 2. 3.
  • 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/