CSS - Schriftarten

Allgemeine Schriftfamilien

In CSS gibt es fünf allgemeine Schriftfamilien, die verwendet werden können, um das Erscheinungsbild von Text auf einer Webseite festzulegen:

1. Serif: Serif-Schriften haben kleine Linien oder Striche an den Enden der Buchstaben. Sie werden oft für Fließtext in Printmedien verwendet und können dem Text ein formelles Aussehen verleihen. Beispiele für Serif-Schriften sind Times New Roman, Georgia und Garamond.

2. Sans-serif: Sans-serif-Schriften haben keine Linien an den Enden der Buchstaben. Sie haben ein klares Erscheinungsbild, was sie für digitale Bildschirme beliebt macht. Sans-serif-Schriften werden oft für Überschriften, Menüs und Fließtext auf Websites verwendet. Beispiele für Sans-serif-Schriften sind Arial, Helvetica und Verdana.

3. Monospace: Monospace-Schriften haben Zeichen, die alle die gleiche feste Breite haben. Jedes Zeichen nimmt den gleichen horizontalen Platz ein, was sie ideal für die Anzeige von Code-Snippets oder tabellarischen Daten macht. Beispiele für Monospace-Schriften sind Courier, Courier New und Lucida Console.

4. Cursive: Cursive-Schriften ahmen handgeschriebenen Text nach und haben ein informelles Erscheinungsbild. Sie werden oft für spezielle Überschriften oder Zitate verwendet, sollten aber sparsam eingesetzt werden, da sie in großen Mengen schwerer zu lesen sein können. Beispiele für Cursive-Schriften sind Brush Script, Lucida Handwriting und Comic Sans.

5. Fantasy: Fantasy-Schriften sind dekorative und fantasievolle Schriften, die nicht in andere Kategorien passen. Sie können einzigartige Formen oder Designs haben, sollten aber vorsichtig verwendet werden, da sie in längeren Passagen schwer zu lesen sein können. Beispiele sind Impact, Papyrus und Chiller.

Schrift-Stacks

Ein Schrift-Stack ist eine Liste von Schriften, die in der CSS-Eigenschaft font-family angegeben werden. Er ermöglicht es Ihnen, mehrere Ausweichoptionen zu definieren, falls die primäre Schrift auf dem Gerät des Benutzers nicht verfügbar ist. Um einen Schrift-Stack zu erstellen, listen Sie Namen durch Kommas getrennt auf. Der Browser wird die erste Schrift versuchen und dann zur nächsten übergehen, bis er eine verfügbare findet.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Der Browser wird zuerst Arial versuchen. Wenn nicht verfügbar, greift er auf Helvetica zurück. Wenn beide nicht verfügbar sind, verwendet er die allgemeine Sans-serif-Schrift. Beim Erstellen von Stacks sollten Sie diese Praktiken berücksichtigen:

1. Beginnen Sie mit der bevorzugten Option und fügen Sie dann Ausweichmöglichkeiten hinzu.
2. Verwenden Sie die allgemeine Familie zuletzt, damit der Text auch dann lesbar bleibt, wenn keine der angegebenen Schriften verfügbar ist.
3. Wählen Sie ähnliche Typen (z.B. Serif, Sans-serif), um ein einheitliches Erscheinungsbild zu bewahren.
4. Begrenzen Sie die Anzahl, da jede zusätzliche Schrift die Seitenladezeit verlangsamen kann.
5. Testen Sie Stacks auf verschiedenen Geräten und Browsern, um die beabsichtigte Darstellung zu erreichen.

Schriftgröße

Die font-size-Eigenschaft in CSS legt die Größe des Textes fest. Sie können verschiedene Einheiten verwenden, um die Schriftgröße anzugeben, wie Pixel (px), em und rem.

1. Pixel (px): Die Festlegung der Schriftgröße in Pixeln gibt Ihnen eine präzise Kontrolle über die Textgröße. Die Verwendung von Pixeln kann es Benutzern jedoch erschweren, die Textgröße in ihren Browsern anzupassen.

font-size: 16px;

2. Em (em): Die em-Einheit ist relativ zur Schriftgröße des übergeordneten Elements. Wenn die Schriftgröße des übergeordneten Elements 16px beträgt, würde die Festlegung der Schriftgröße des untergeordneten Elements auf 1.5em zu einer Schriftgröße von 24px (16px * 1.5) führen. Die Verwendung von em ermöglicht flexiblere und skalierbare Schriftgrößen.

font-size: 1.2em;

3. Rem (rem): Die rem-Einheit ähnelt em, bezieht sich aber auf die Schriftgröße des Wurzelelements (html) anstatt auf die des übergeordneten Elements. Dies erleichtert die Beibehaltung einheitlicher Größen im gesamten Dokument, da der Standardwert bei 16px liegt, sodass ein Wert wie 1.5rem einem Äquivalent von etwa 24 Pixeln entspricht.

font-size: 1.2rem;

Bei der Entscheidung zwischen absoluten und relativen Größen beachten Sie:

• Absolute Größen geben Ihnen präzise Kontrolle, können aber von Benutzern möglicherweise nicht einfach angepasst werden.
• Relative Größen bieten mehr Flexibilität und Anpassungsfähigkeit, da sie sich basierend auf den Größeneigenschaften des übergeordneten oder des Wurzelelements anpassen.

Um responsive Schriften zu erstellen, die sich an verschiedene Bildschirmbreiten anpassen, verwenden Sie CSS-Medienabfragen und passen Sie die Größe entsprechend der Viewport-Breite an:

body {
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

Schriftstärke

Die font-weight-Eigenschaft legt fest, wie dick oder dünn Zeichen erscheinen, und verwendet Schlüsselwörter oder numerische Werte:

• Schlüsselwörter: normal (Standard), bold, lighter, bolder
• Numerisch: 100, 200, 300, 400 (normal), 500, 600, 700 (fett), 800, 900

Nicht alle Stärken sind für jede Schriftfamilie bei Verwendung numerischer Werte verfügbar. Beachten Sie diese bewährten Praktiken:

Verwenden Sie 400 für normalen Text und 700 für fetten Text, um einheitliche Ergebnisse über verschiedene Schriftarten hinweg zu gewährleisten. Vermeiden Sie extreme Stärken wie 100 oder 900, da sie in kleineren Größen möglicherweise nicht lesbar sind. Halten Sie sich für Fließtexte an gängige Stärken (400/700) und nutzen Sie zusätzliche Stärken bei Bedarf für Überschriften.

body {
    font-weight: 400;
}

h1 {
    font-weight: 700;
}

Schriftstil

Die font-style-Eigenschaft legt den Stil als normal, kursiv oder schräg fest. Kursiv neigt die Schrift, während schräg die normale Schrift neigt. Vermeiden Sie große Textblöcke in kursiver oder schräger Schrift, da dies die Lesbarkeit beeinträchtigt. Verwenden Sie diese Stile, um einzelne Wörter, Titel, technische Begriffe oder fremdsprachige Ausdrücke hervorzuheben.

p {
    font-style: normal;
}

em {
    font-style: italic;
}

Schriftvariante

Die font-variant-Eigenschaft ermöglicht die Einstellung von Kapitälchen, die Kleinbuchstaben als kleinere Versionen von Großbuchstaben darstellen. Dies eignet sich gut für Abkürzungen und Akronyme, um sie hervorzuheben, ohne vollständige Großbuchstaben zu verwenden. Kapitälchen können auch visuelles Interesse in Überschriften und Unterüberschriften erzeugen.

h2 {
    font-variant: small-caps;
}

abbr {
    font-variant: small-caps;
}

Zeilenhöhe

Die line-height-Eigenschaft legt den Abstand zwischen den Zeilen fest. Einheitenlose Werte werden empfohlen, da sie proportional zur Schriftgröße skalieren. Ein guter Ausgangspunkt liegt im Bereich von 1,2 bis 1,6, abhängig von der Schriftfamilie und dem Größenkontext.

body {
    line-height: 1.5;
}

h1 {
    line-height: 1.2;
}

Was sind Web-Schriftarten?

Web-Schriftarten sind spezielle Schriftarten, die auf einer Website geladen und verwendet werden können. Sie ermöglichen Designern, über die begrenzte Auswahl an Systemschriften auf den Geräten der Nutzer hinauszugehen. Dadurch wird ein vielfältigeres typografisches Design möglich, was die optische Attraktivität und das Branding einer Website verbessert.

Die wichtigsten Vorteile von Web-Schriftarten sind:

1. Erhöhte Gestaltungsfreiheit: Web-Schriftarten bieten viele Stile und Optionen, sodass Designer Schriften wählen können, die zu ihrem gewünschten Look und ihrer Markenidentität passen.

2. Einheitlichkeit auf verschiedenen Geräten: Durch den Einsatz von Web-Schriftarten können Designer sicherstellen, dass die Typografie auf verschiedenen Geräten und Plattformen einheitlich bleibt, da die Schriften von einem entfernten Server geladen werden und nicht von den Systemschriften des Nutzers abhängen.

3. Verbesserte Nutzererfahrung: Web-Schriftarten können die Lesbarkeit verbessern und machen den Inhalt für die Nutzer ansprechender.

Wie man Web-Schriftarten verwendet

Es gibt mehrere Möglichkeiten, Web-Schriftarten auf einer Website zu verwenden:

1. Importieren von Web-Schriftarten mit @font-face: Die CSS-Regel @font-face ermöglicht es, eine benutzerdefinierte Schriftdatei anzugeben, die heruntergeladen und auf Ihrer Website verwendet wird. Sie können die Schriftdateien auf Ihrem eigenen Server hosten oder einen Schriftarten-Dienstleister nutzen.

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font-file.woff2') format('woff2'),
       url('path/to/font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

2. Lokales Hosten von Web-Schriftarten: Sie können die Schriftdateien herunterladen und auf Ihrem eigenen Server hosten, was Ihnen volle Kontrolle gibt, aber mehr Einrichtung und Wartung erfordert.

3. Nutzung von Web-Schriftarten-Diensten: Viele Anbieter wie Google Fonts und Adobe Fonts bieten zahlreiche Web-Schriftarten, die sich einfach in Ihre Website integrieren lassen, ohne dass Sie sie selbst hosten müssen.

Web-Schriftarten-Formate

Es gibt mehrere Web-Schriftarten-Formate, jedes mit eigenen Eigenschaften und Browser-Unterstützung:

1. TTF (TrueType Font): TTF ist ein altes Format, das von den meisten Browsern unterstützt wird, aber im Vergleich zu neueren Formaten größere Dateien hat.

2. WOFF (Web Open Font Format): WOFF wurde für das Web entwickelt und bietet Komprimierungsfunktionen; es wird von modernen Browsern weitgehend unterstützt.

3. WOFF2: WOFF2 bietet eine bessere Komprimierung als WOFF, was zu kleineren Dateien und schnelleren Ladezeiten führt; es hat gute Browser-Unterstützung, funktioniert aber möglicherweise nicht in älteren Browsern.

4. EOT (Embedded OpenType): EOT wurde von Internet Explorer verwendet; es hat begrenzte Unterstützung in modernen Browsern, daher wird es für neue Projekte generell nicht empfohlen.

5. SVG-Schriften: SVG-Schriften sind vektorbasiert und können ohne Qualitätsverlust skaliert werden. Sie haben jedoch begrenzte Browser-Unterstützung und werden nicht häufig verwendet.

Bei der Verwendung von Web-Schriftarten ist es gute Praxis, mehrere Formate anzubieten, um die Browser-Kompatibilität zu maximieren. Sie können die @font-face-Regel verwenden, um verschiedene Dateiformate anzugeben, und der Browser wählt dann das am besten geeignete Format, das er unterstützt.

Was sind Schrift-Icons?

Schrift-Icons sind Symbole, die Teil einer Schriftart sind. Sie können als Icons auf Websites verwendet und mit CSS wie normaler Text gestaltet werden. Schrift-Icons sind vektorbasiert, sodass sie ohne Qualitätsverlust skaliert werden können und sich an verschiedene Bildschirmgrößen anpassen.

Die wichtigsten Vorteile der Verwendung von Schrift-Icons sind:

1. Flexibilität: Sie können Schrift-Icons leicht mit CSS-Eigenschaften wie Farbe, Größe und Schatten gestalten, um sie an das Design Ihrer Website anzupassen.

2. Leistung: Schrift-Icons laden schneller als herkömmliche Bild-Icons, da sie Teil einer Schriftdatei sind.

3. Skalierbarkeit: Da sie vektorbasiert sind, bleiben Schrift-Icons in jeder Größe scharf, ohne zu verpixeln oder an Qualität zu verlieren.

4. Barrierefreiheit: Sie können Schrift-Icons für Screenreader zugänglich machen, indem Sie eine korrekte semantische Auszeichnung verwenden und alternativen Text bereitstellen.

Wie man Schrift-Icons verwendet

Um Schrift-Icons auf einer Website zu verwenden, können Sie entweder eine vorhandene Bibliothek importieren oder eigene benutzerdefinierte Icons erstellen:

1. Bibliotheken importieren: Es gibt viele beliebte Bibliotheken wie Font Awesome, Material Icons und Ionicons. Diese Bibliotheken bieten vorgefertigte Icons, die Sie einfach in Ihr Projekt einbinden können, indem Sie auf die CSS-Datei der Bibliothek verlinken und die bereitgestellten Klassennamen verwenden.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i class="fas fa-home"></i>

2. Benutzerdefinierte Schriften erstellen: Wenn vorhandene Bibliotheken Ihren Bedürfnissen nicht entsprechen, können Sie benutzerdefinierte Schriften mit Tools wie Icomoon oder Fontello erstellen. Diese ermöglichen es Ihnen, SVGs auszuwählen oder hochzuladen und eine benutzerdefinierte Schriftdatei zusammen mit dem notwendigen CSS-Code zu generieren.

Bei der Verwendung von Schrift-Icons:

1. Wählen Sie eine zuverlässige Bibliothek.
2. Verwenden Sie semantische Auszeichnungen wie <i> oder <span> Elemente zur Anzeige des Icons.
3. Optimieren Sie die Icon-Datei, indem Sie nur notwendige Glyphen einbeziehen.
4. Bieten Sie Fallback-Optionen für Benutzer, die benutzerdefinierte Schriften deaktiviert haben.
5. Verwenden Sie CSS für eine einheitliche Größe und Ausrichtung des Icons.

Schrift-Icons bieten eine effiziente Möglichkeit, skalierbare und stilvolle Symbole zu Ihrer Website hinzuzufügen und dabei gute Leistungspraktiken beizubehalten.