HTML / CSS LEVEL 3

Teil 1 - Web Fonts

Was sind web fonts?

  • Eigene Schriften im Web einbinden
  • Systemunabhängig
  • Schriften werden über CSS eingebunden

Relevante CSS Eigenschaften

Web Font Formate

woff

Moderne browser

woff2

Moderne browser

svg

Alte Safari und iOS

eot

Alte Microsoft IE

ttf

Meisten Browser und alte aber viel zu gross

otf

Meisten Browser und alte mit ligatures

Best practice

Für alle was dabei...

@font-face {
  font-family: 'MyWebFont';
       /* IE9 Compat Modes */
  src: url('webfont.eot');
       /* IE6-IE8 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
       /* Super Modern Browsers */
       url('webfont.woff2') format('woff2'), 
       /* Pretty Modern Browsers */
       url('webfont.woff') format('woff'), 
       /* Safari, Android, iOS */
       url('webfont.ttf')  format('truetype'), 
       /* Legacy iOS */
       url('webfont.svg#svgFontName') format('svg');
}

Font Synthesis

Ein typographisches no-go!

Falls die Schrift in einem benötigtem Schnitt nicht verfügbar ist, erstellt der Browser eine künstliche Version, die meist sehr schlecht lesbar ist

Schnitte Angeben

In @font-face können varianten und gewichte angegeben werden

@font-face {
  font-family: "myfont";
  src: url("font-regular.woff2") format("woff2");
  font-weight: normal;
}

@font-face {
  font-family: "myfont";
  src: url("font-bold.woff2") format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: "myfont";
  src: url("font-bold.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

Google Font Service

  • Ein CSS kann über einen <link> tag eingebunden werden
  • @font-face werden dynamisch generiert für Gerät optimiert
  • Sehr viele Schriften können ausgewählt werden
  • Sehr gutes hosting bei Google

Übung mit Google Fonts

Modular Scale

Harmonische Verhältnisse

Hallo

Hallo

Hallo

Hallo

square ratio (2/1)

  • Ist nicht nur auf Schrift bezogen sondern auf alle grafischen Elemente

Goldener Schnitt

Die magisch harmonische Konstante in unserem Universum

1.618

\frac{1 + \sqrt{5}}{2}
1+52\frac{1 + \sqrt{5}}{2}

Übung mit modular scale

Fonts kombinieren

Eine Kunst für sich

  • Lieber auf bewährte Kombinationen zurückgreifen
  • Nie mehr als 2 Schriften, mit Schnitten variieren
  • Figur - Grund Variationen
  • Nie 2 Schriftarten mit Serifen

Übung Fonts kombinieren

Weitere JSBins

http://jsbin.com

HTML / CSS III - Teil 1 - Web Fonts

By Gion Kunz

HTML / CSS III - Teil 1 - Web Fonts

  • 2,257