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

@font-face

Schriften laden und deklarieren

font-family

Schriftart zuweisen

http://jsbin.com/hozuzi/edit?html,css,output

Web Font Formate

https://css-tricks.com/snippets/css/using-font-face/​

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!

http://jsbin.com/qidoro/edit?html,css,output

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

http://jsbin.com/madoku/edit?html,css,output

@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

https://www.google.com/fonts

Modular Scale

Harmonische Verhältnisse

http://www.modularscale.com

Hallo

Hallo

Hallo

Hallo

square ratio (2/1)

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

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

http://font-combinator.com/

http://femmebot.github.io/google-type/

Weitere JSBins

http://jsbin.com