A B E G

Startseite Skripte für das Wintersemester 2017/18 Webdesign Interaction, Webfonts, Webtypografie Exakte Font-weights angeben


Exakte Font-weights angeben

https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans:300,300i,400,400i,800,800i

Achtung: Verwendet Ihr viele Schriften und Schriftschnitte, kann sich die Ladezeit Eurer Website deutlich erhöhen – behaltet hier Augenmaß!

Umfangreiche Font-Familien enthalten viele Schnitte und Strichstärken – diese kann man in CSS über die Angabe „font-weight“ exakt ansprechen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    …
    <!-- Webfont von Google -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,800,800i" rel="stylesheet">
    <link href="c/style.css" rel="stylesheet">
</head>

Die jeweiligen Schnitte sind direkt im Source-Code zu sehen…

CSS

body {
    font-family: 'Open Sans', Verdana, sans-serif;
}

h1 {
    /* sehr fetter Schnitt */
    font-weight: 800;
}

p {
    /* sehr dünner Schnitt */
    font-weight: 300;
}

em {
    font-weight: 300;

    /* hierdurch wird der kursive Schnitt aufgerufen */
    font-style: italic;
}

Bisher hatten wir bei font-weight nur die Angaben normal oder bold zur Verfügung…

Demo

Demo mit unterschiedlichen Schriftschnitten