Font in HTML: Schriftarten auf Ihrer Website anpassen

Schriftfamilie und Schriftgewicht angeben

Wenn du die Schriftart deiner Website anpassen möchtest, ist der erste Schritt, die Schriftfamilie und das Schriftgewicht anzugeben. Dadurch bestimmst du das Aussehen und die "Persönlichkeit" des Texts auf deiner Seite.

Schriftfamilie

Die Schriftfamilie bezieht sich auf die Art der Schrift, die du für deine Inhalte verwenden möchtest. Es gibt zahlreiche Schriftfamilien, darunter Serifenschriften mit kleinen "Füßchen" am Ende der Buchstaben (z. B. Times New Roman), serifenlose Schriften ohne diese "Füßchen" (z. B. Arial) und Schreibschriften, die die Handschrift imitieren (z. B. Comic Sans MS).

Um eine Schriftfamilie anzugeben, verwendest du die Eigenschaft font-family in deinem CSS. Du kannst mehrere Schriftfamilien angeben, getrennt durch Kommas. Sollte die erste Schriftfamilie auf dem Computer des Besuchers nicht verfügbar sein, verwendet der Browser automatisch die nächste Schriftfamilie in der Liste.

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

Schriftgewicht

Das Schriftgewicht steuert die Dicke der Schrift. Du kannst aus verschiedenen Gewichten wählen, darunter "normal", "fett", "leicht" und "extrabold". Um das Schriftgewicht anzugeben, verwendest du die font-weight-Eigenschaft.

h1 {
  font-weight: bold;
}

Kombination von Schriftfamilie und Schriftgewicht

Durch die Kombination verschiedener Schriftfamilien und Schriftgewichte kannst du eine Hierarchie in deinen Texten erstellen und bestimmte Elemente hervorheben. Beispielsweise kannst du für Überschriften eine fette Serifenschrift und für den Textkörper eine leichtere serifenlose Schrift verwenden.

Experimentiere mit verschiedenen Schriftfamilien und Schriftgewichten, um ein visuell ansprechendes und effektives Design für deine Website zu finden.

Schriftgröße festlegen

Nachdem du die Schriftfamilie und das Schriftgewicht definiert hast, kannst du die Schriftgröße anpassen, um die Lesbarkeit und das visuelle Erscheinungsbild deines Textes zu verbessern.

Wie ändere ich die Schriftgröße in HTML?

Um die Schriftgröße festzulegen, verwendest du das Attribut font-size im CSS-Stil. Der Wert dieses Attributs kann in verschiedenen Einheiten angegeben werden, wie z. B.:

• em: Die Schriftgröße wird relativ zur aktuellen Schriftgröße des übergeordneten Elements definiert.
• rem: Die Schriftgröße wird relativ zur Schriftgröße des Wurzelelements (normalerweise html) definiert.
• px: Die Schriftgröße wird in Pixeln definiert.
• pt: Die Schriftgröße wird in Punkten definiert (ungefähr 1/72 Zoll).

p {
  font-size: 1.2em;
}

h1 {
  font-size: 2rem;
}

#intro-text {
  font-size: 16px;
}

Tipps zur Auswahl der richtigen Schriftgröße

• Verwende eine einheitliche Schriftgrößenhierarchie. Dies hilft dabei, die visuelle Harmonie und Lesbarkeit aufrechtzuerhalten.
• ** Berücksichtige die Bildschirmgröße.** Verwende für kleinere Bildschirme kleinere Schriftgrößen, um die Lesbarkeit zu verbessern.
• Teste die Lesbarkeit. Verwende Tools wie Wave, um die Lesbarkeit deines Textes zu testen und sicherzustellen, dass er für Personen mit Sehschwäche zugänglich ist.
• Denke an die Benutzererfahrung. Zu kleine Schriftgrößen können die Lesbarkeit beeinträchtigen, während zu große Schriftgrößen den Seitenfluss stören können.

Schriftfarbe anpassen

Die Schriftfarbe ist ein wesentlicher Bestandteil des Designs deiner Website, da sie die Lesbarkeit, visuelle Attraktivität und Markenidentität beeinflusst. Du kannst die Schriftfarbe folgendermaßen anpassen:

Angabe der Schriftfarbe mit hexadezimalen Werten

Verwende hexadezimale Werte, um eine genaue Farbauswahl zu treffen. Beispiel:

color: #123456;

Angabe der Schriftfarbe mit RGB-Werten

RGB-Werte (Rot, Grün, Blau) ermöglichen es dir, die Farbe anhand einzelner Komponenten zu definieren. Beispiel:

color: rgb(255, 100, 50);

Verwendung von CSS-Farbschlüsselwörtern

Einige gängige CSS-Farbschlüsselwörter sind:

• Schwarz
• Weiß
• Rot
• Grün
• Blau

Beispiel:

color: red;

Anpassung der Farbtransparenz

Mit dem rgba()-Wert kannst du die Transparenz der Farbe angeben. Der vierte Wert (alpha) gibt die Transparenz von 0 (transparent) bis 1 (undurchsichtig) an. Beispiel:

color: rgba(255, 100, 50, 0.5);

Barrierefreiheit beachten

Stelle sicher, dass die Schriftfarbe einen ausreichenden Kontrast zum Hintergrund hat, um die Lesbarkeit für alle Nutzer zu gewährleisten. Verwende z. B. Tools wie den Contrast Checker von WebAIM.

Schriftfarbe aus Bildern extrahieren

Wenn du eine Farbe aus einem Bild extrahieren möchtest, kannst du Tools wie die Color Thief Library verwenden.

Empfehlung: ColorZilla-Erweiterung

Die ColorZilla-Erweiterung für Browser ist ein praktisches Tool, mit dem du Farben von Websites extrahieren und verwalten kannst.

CSS-Schriftarteneigenschaften verwenden

Neben den grundlegenden Schriftarteigenschaften kannst du auch erweiterte CSS-Schriftarteneigenschaften verwenden, um das Aussehen deiner Texte noch präziser zu steuern.

Schriftvarianten

Mit der font-variant-Eigenschaft kannst du verschiedene Schriftvarianten festlegen, z. B.:

• normal (Standard)
• small-caps (Kleinbuchstaben in Großbuchstabenhöhe)
• all-small-caps (alle Buchstaben in Großbuchstabenhöhe)
• petite-caps (Kleinbuchstaben in der Höhe von Großbuchstaben mit Oberlängen)
• unicase (Alle Buchstaben in Großbuchstabenhöhe, ohne Groß-/Kleinschreibung)

Schrift-Stretching

Mit der font-stretch-Eigenschaft kannst du die Breite deiner Schrift anpassen, um sie beispielsweise zu komprimieren oder auszudehnen:

• ultra-condensed (sehr komprimiert)
• extra-condensed (komprimiert)
• condensed (leicht komprimiert)
• normal (Standard)
• expanded (leicht gedehnt)
• extra-expanded (gedehnt)
• ultra-expanded (sehr gedehnt)

Weitere Eigenschaften

Zusätzlich zu diesen Eigenschaften kannst du auch Folgendes festlegen:

• font-style: Normal, kursiv oder schräg (z. B. font-style: italic;)
• text-decoration: Unterstreichung, Überstreichung oder Durchstreichung (z. B. text-decoration: underline;)
• text-transform: Groß-/Kleinschreibung, Kleinbuchstaben oder Großbuchstaben (z. B. text-transform: uppercase;)
• letter-spacing: Abstand zwischen einzelnen Buchstaben (z. B. letter-spacing: 0.1em;)

Diese Eigenschaften bieten dir eine präzise Kontrolle über das Erscheinungsbild deiner Texte.

Google Fonts einbinden

Wenn du die Auswahl an Schriftarten auf deiner Website erweitern möchtest, bietet Google Fonts eine umfangreiche Bibliothek mit qualitativ hochwertigen Schriften zur kostenlosen Nutzung. Die Einbindung von Google Fonts ist einfach und kann die visuelle Attraktivität deiner Website erheblich verbessern.

Vorteile der Verwendung von Google Fonts

• Große Auswahl: Google Fonts bietet Hunderte von Schriftfamilien, sodass du die perfekte Schriftart für den Stil und das Thema deiner Website finden kannst.
• Web-optimiert: Google Fonts sind speziell für die Anzeige im Web optimiert und sorgen für klare und lesbare Texte.
• Kostenlos und offen: Die Verwendung von Google Fonts ist kostenlos und du kannst sie sowohl für kommerzielle als auch für nicht-kommerzielle Projekte nutzen.

Einbindung von Google Fonts

Es gibt zwei Möglichkeiten, Google Fonts in deine Website einzubinden:

• Über den Link-Tag: Diese Methode ist die einfachste und ermöglicht es dir, mehrere Schriftfamilien gleichzeitig einzubinden. Füge einfach den folgenden Code in den <head>-Bereich deines HTML-Dokuments ein:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

• Über @import-Regel: Diese Methode ist für die Einbindung einzelner Schriftfamilien besser geeignet. Füge den folgenden Code in dein CSS-Dokument ein:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

Auswahl und Verwendung von Schriftfamilien

Nachdem du Google Fonts in deine Website eingebunden hast, kannst du die Schriftfamilien in deinen CSS-Regeln verwenden. Gib dazu die Schriftfamilienamen an, die du im Einbindungscode verwendet hast:

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

Du kannst auch Schriftgewichte und andere Schriftarteneigenschaften angeben, um die Darstellung des Texts zu steuern.

Tipps zur Verwendung von Google Fonts

• Wähle Schriftfamilien, die gut lesbar sind und zum Gesamtdesign deiner Website passen.
• Verwende nicht zu viele Schriftfamilien, da dies überwältigend wirken kann.
• Lade nur die benötigten Schriftgewichte herunter, um die Ladezeit deiner Website zu minimieren.
• Verwende Fallbacks, um sicherzustellen, dass die Schrift auch dann angezeigt wird, wenn die Google-Font-Ressource nicht verfügbar ist.

Schriftartendateien hosten

Wenn du deine eigenen Schriftarten verwenden möchtest, die nicht in Google Fonts enthalten sind, musst du sie selbst hosten. Dies gibt dir mehr Kontrolle über das Erscheinungsbild deiner Website und ermöglicht es dir, Schriftarten zu verwenden, die nicht allgemein verfügbar sind.

Vorgehensweise

1. Schriftartendateien beschaffen: Du benötigst die Schriftartendateien in den Formaten WOFF, WOFF2, TTF und EOT. Du kannst sie von Foundry-Websites wie Adobe Typekit oder FontShop erwerben oder sie selbst erstellen.

2. Dateien auf deinen Server hochladen: Lade die Schriftartendateien in ein Verzeichnis auf deinem Webserver hoch. Beispielsweise könntest du ein Verzeichnis namens "fonts" innerhalb deines öffentlichen Ordners erstellen.

3. CSS-Code hinzufügen: Füge deinem CSS-Code die folgende Regel hinzu, um die Schriftarten zu registrieren:

@font-face {
  font-family: "Meine Schriftart";
  src: url("fonts/meine-schriftart.woff") format("woff"),
       url("fonts/meine-schriftart.woff2") format("woff2"),
       url("fonts/meine-schriftart.ttf") format("truetype"),
       url("fonts/meine-schriftart.eot") format("embedded-opentype");
}

4. Schriftart in deinem HTML verwenden: Verwende die font-family-Eigenschaft in deinen HTML-Elementen, um die Schriftart anzuwenden:

<p style="font-family: 'Meine Schriftart';">Dies ist ein Beispieltext.</p>

Vorteile

• Vollständige Kontrolle: Du hast die volle Kontrolle über das Aussehen und die Verwendung deiner Schriftarten.
• Einzigartige Schriftarten: Du kannst Schriftarten verwenden, die in Google Fonts nicht verfügbar sind.
• Leistung: Das Hosten deiner eigenen Schriftarten kann die Ladezeiten deiner Website verbessern, da sie nicht von externen Servern geladen werden müssen.

Nachteile

• Dateigröße: Das Hosten deiner eigenen Schriftartendateien kann die Dateigröße deiner Website erhöhen.
• Komplexität: Das selbstständige Hosten von Schriftarten kann komplexer sein als die Verwendung von Google Fonts.
• Wartung: Du bist für die Wartung und Aktualisierung deiner Schriftartendateien verantwortlich.

Fazit

Das Hosten deiner eigenen Schriftartendateien ist eine gute Option, wenn du mehr Kontrolle über das Erscheinungsbild deiner Website haben möchtest. Allerdings ist es wichtig, die Vorteile und Nachteile abzuwägen, bevor du dich für diese Methode entscheidest.

Textumbruch und Textausrichtung

Bei der Anpassung der Schriftart deines Website-Textes musst du auch den Textumbruch und die Textausrichtung berücksichtigen, um die Lesbarkeit und Benutzerfreundlichkeit deiner Website zu verbessern.

Textumbruch

Der Textumbruch bestimmt, wie Textzeilen umgebrochen werden, wenn sie das Ende des Containerblocks erreichen. Du kannst ihn mit der CSS-Eigenschaft white-space steuern:

• white-space: normal;: Standardumbruch, der Leerzeichen und Zeilenumbrüche beachtet.
• white-space: nowrap;: Kein Textumbruch, der lange Textzeilen am Zeilenende abschneidet.
• white-space: pre;: Behält Leerzeichen und Zeilenumbrüche im Code bei, um vorformatierten Text darzustellen.
• white-space: pre-line;: Behält Zeilenumbrüche im Code bei, ermöglicht aber den Textumbruch within Zeilen.

Textausrichtung

Die Textausrichtung bestimmt, wie der Text innerhalb des Containerblocks ausgerichtet wird:

• text-align: left;: Linksbündig ausgerichtet
• text-align: center;: Zentriert
• text-align: right;: Rechtsbündig ausgerichtet
• text-align: justify;: Blocksatz, Textzeilen werden an beiden Seiten ausgerichtet (nicht zu empfehlen für Webtexte)

Die Auswahl der Textausrichtung hängt vom Design deiner Website und dem Zweck des Textes ab. Beispielsweise kann zentrierter Text für Überschriften und Call-to-Actions wirksam sein, während linksbündiger Text für größeren Text einfacher zu lesen ist.

Kombination von Textumbruch und Textausrichtung

Du kannst Textumbruch und Textausrichtung kombinieren, um eine benutzerdefinierte Textpräsentation zu erstellen. Beispielsweise kannst du den Textumbruch auf pre-line setzen und die Textausrichtung auf justify festlegen, um lange Textzeilen in einem Blocksatz darzustellen, der am Zeilenende umbrochen wird.

Indem du den Textumbruch und die Textausrichtung anpasst, kannst du die Lesbarkeit deiner Website verbessern, das Nutzererlebnis optimieren und deinen Inhalten ein professionelles Aussehen verleihen.

Schriftart für unterschiedliche Bildschirmgrößen

Wenn du deine Website für verschiedene Geräte und Bildschirmgrößen optimierst, ist es wichtig, auch die Schriftart für unterschiedliche Auflösungen anzupassen.

Schriftgröße für unterschiedliche Bildschirmgrößen

Die Schriftgröße sollte so gewählt werden, dass sie auf allen Geräten leicht lesbar ist. Auf kleinen Bildschirmen kann eine größere Schriftgröße erforderlich sein, während auf größeren Bildschirmen eine kleinere Schriftgröße verwendet werden kann.

Du kannst die Schriftgröße mithilfe der CSS-Eigenschaft font-size festlegen. Beispielsweise kannst du folgende CSS-Regel verwenden, um die Schriftgröße für verschiedene Bildschirmgrößen festzulegen:

@media (max-width: 480px) {
  body {
    font-size: 1.2rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}

@media (min-width: 769px) {
  body {
    font-size: 1.6rem;
  }
}

Schriftart für hochauflösende Displays

Hochauflösende Displays (z. B. Retina-Displays) können Schriften mit einer höheren Auflösung anzeigen. Wenn du deine Website für solche Displays optimierst, solltest du Schriftarten verwenden, die auch in hoher Auflösung scharf aussehen.

Du kannst Schriftarten verwenden, die speziell für hochauflösende Displays entwickelt wurden, wie z. B. Webfont-Formate wie WOFF oder WOFF2. Du kannst diese Schriftarten mit den Google Fonts-API einbinden oder selbst hosten.

Anpassung der Schriftgröße für unterschiedliche Gerätetypen

Verschiedene Gerätetypen haben unterschiedliche Anzeigeskalen. Beispielsweise haben mobile Geräte in der Regel eine höhere Anzeigeskala als Desktop-Computer.

Um sicherzustellen, dass deine Schriftarten auf allen Geräten in der richtigen Größe angezeigt werden, solltest du die CSS-Eigenschaft font-size in Kombination mit der Anzeigeskala des Geräts verwenden.

Beispiel:

body {
  font-size: calc(1.2rem * (100vw / 992px));
}

Barrierefreiheit der Schriftarten

Als Webentwickler ist es wichtig, die Barrierefreiheit deiner Website für alle Nutzer zu gewährleisten, einschließlich derer mit Sehbehinderungen oder anderen Einschränkungen. Die Schriftart deiner Website spielt dabei eine entscheidende Rolle.

### Schriftgröße und -kontrast

Verwende angemessene Schriftgrößen, die auch für Nutzer mit Sehschwäche gut lesbar sind. Der empfohlene Mindestwert für die Schriftgröße ist 16px. Achte außerdem auf einen ausreichenden Farbkontrast zwischen Text und Hintergrund. WCAG (Web Content Accessibility Guidelines) empfiehlt ein Kontrastverhältnis von mindestens 4,5:1. Du kannst Tools wie den Chrome Contrast Checker verwenden, um den Kontrast deiner Schriftarten zu prüfen.

### Schriftbild und Typografie

Verwende Schriftarten, die gut leserlich sind und keine Schnörkel oder andere Verzierungen enthalten, die das Lesen erschweren könnten. Vermeide auch die Verwendung von Schriftbildern wie Kursiv, Fett oder Unterstreichung, da diese die Lesbarkeit beeinträchtigen können.

### Schriftalternativen

Biete Textalternativen für dekorative oder Bildschriften an. Dies kann in Form von Alt-Texten für Bilder oder Transkripten für Audio- oder Videodateien erfolgen. Damit ermöglichst du Nutzern mit Sehbehinderungen, den Textinhalt deiner Website zu verstehen, auch wenn sie die Schriftart nicht sehen können.

### Ausreichender Zeilenabstand und Textausrichtung

Verwende einen ausreichenden Zeilenabstand und eine linke Textausrichtung, um die Lesbarkeit zu verbessern. Dies reduziert die Überlappung von Zeilen und macht den Text leichter zu erfassen.

### Barrierefreie Schriftarten verwenden

Es gibt spezialisierte barrierefreie Schriftarten, die für Nutzer mit Sehbehinderungen entwickelt wurden. Beispiele sind Dyslexie-freundliche Schriftarten wie OpenDyslexic oder Lexia Readable, die Buchstabenformen verwenden, die die Verwechslung von Buchstaben minimieren. Diese Schriftarten können die Lesbarkeit für Menschen mit Dyslexie oder anderen Lesestörungen verbessern.

### Fazit

Die Barrierefreiheit von Schriftarten ist ein wesentlicher Aspekt der Webentwicklung. Durch die Einhaltung der WCAG-Richtlinien kannst du sicherstellen, dass deine Website für alle Nutzer zugänglich und einfach zu lesen ist.