WMP Sites
Home Webentwicklung Frontend-Entwicklung HTML Grundlagen Responsive Design Webdesign

Die Kunst, Schriften in HTML zu beherrschen

Lukas Fuchs vor 7 Monaten in  Barrierefreiheit 3 Minuten Lesedauer

Die verschiedenen Schriftarten formatieren

Font-Attribute definieren

Jedes HTML-Element kann Schriftattribute besitzen, um dessen Schriftart zu definieren. Die wichtigsten Attribute sind:

  • font-family: Legt die Schriftartenfamilie fest, aus der die Schriftart ausgewählt werden soll.
  • font-size: Definiert die Größe der Schriftart in px, em oder %.
  • font-weight: Bestimmt die Schriftdicke als Ganzzahl von 100 (dünn) bis 900 (fett).
  • font-style: Gibt an, ob die Schriftart normal, kursiv oder schräg dargestellt werden soll.
  • font-color: Legt die Farbe der Schriftart fest.

Du kannst diese Attribute direkt im HTML-Code oder über ein CSS-Stylesheet anwenden.

Einbettung von Schriftarten aus Web-Schriftbibliotheken

Web-Schriftbibliotheken wie Google Fonts bieten eine große Auswahl an Schriftarten, die direkt auf deiner Website eingebettet werden können. So kannst du auf eine Vielzahl von Schriftarten zugreifen, ohne sie lokal hosten zu müssen. Um eine Schriftart aus einer Web-Bibliothek einzubetten, musst du den folgenden Code in den <head>-Abschnitt deiner HTML-Datei einfügen:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

Dies lädt die Schriftartfamilie "Montserrat" mit den Schriftstärken "normal" und "fett" auf deine Website.

Hochladen lokaler Schriftarten

Wenn du eine Schriftart verwenden möchtest, die nicht in einer Web-Bibliothek verfügbar ist, kannst du sie lokal hochladen. Dazu musst du die Schriftartendateien (z. B. .ttf, .woff) auf deinen Webserver hochladen und dann eine CSS-Regel erstellen, um die Schriftart zu referenzieren. Beispiel:

@font-face {
  font-family: "MeineLokaleSchrift";
  src: url("meine-lokale-schrift.ttf");
}

Schriftartfamilien und Web-sichere Schriften

Wenn du mit Schriften in HTML arbeitest, solltest du dich mit Schriftartfamilien und web-sicheren Schriften vertraut machen.

Schriftartfamilien

Eine Schriftartfamilie ist eine Gruppe von Schriftarten, die eine gemeinsame Designsprache aufweisen. Sie haben ähnliche Buchstabenformen, aber unterschiedliche Merkmale wie Dicke, Breite und Stil. Beispielsweise umfasst die Schriftartfamilie Arial die Schriftarten Arial Regular, Arial Bold, Arial Italic und Arial Bold Italic.

Web-sichere Schriften

Web-sichere Schriften sind Schriftarten, die standardmäßig auf den meisten Plattformen und Browsern installiert sind. Sie sind zuverlässig und stellen sicher, dass deine Texte auf allen Geräten gut aussehen. Einige gängige web-sichere Schriften sind:

  • Arial
  • Helvetica
  • Times New Roman
  • Georgia
  • Verdana
  • Courier New

Indem du web-sichere Schriften verwendest, vermeidest du, dass dein Text als Ersatzschriftart angezeigt wird, wenn der Browser die von dir angegebene Schriftart nicht unterstützt.

Schriftarten angeben

Du kannst Schriftartfamilien in deinem HTML-Code mit der Eigenschaft font-family angeben. So könntest du beispielsweise die Schriftartfamilie Arial für einen Text festlegen:

<p style="font-family: Arial;">Dies ist ein Text in Arial.</p>

Wenn du eine bestimmte Schriftart aus einer Familie angeben möchtest, kannst du den Font-Namen in Anführungszeichen setzen:

<p style="font-family: 'Arial Bold';">Dies ist ein Text in Arial Bold.</p>

Fallbacks für Schriftarten festlegen

Manchmal kann es vorkommen, dass die von dir angegebene Schriftart nicht auf dem Gerät des Benutzers verfügbar ist. Um dieses Problem zu lösen, kannst du alternative Schriftarten festlegen, die verwendet werden sollen, falls die primäre Schriftart nicht verfügbar ist. Dies wird als Font-Fallback bezeichnet.

Beispielsweise kannst du die web-sichere Schriftart Helvetica als Fallback für die Schriftart Arial festlegen:

<p style="font-family: Arial, Helvetica, sans-serif;">Dies ist ein Text in Arial, oder Helvetica, wenn Arial nicht verfügbar ist.</p>

Die letzte Option im Fallback-Stack, sans-serif, ist eine allgemeine Schriftartfamilie, die Schriftarten ohne Serifen umfasst, wie z. B. Arial und Helvetica.

Schriften aus einer Bibliothek einbetten

Mithilfe von Web-Schriftbibliotheken kannst du auf eine Vielzahl von Schriftarten zugreifen, ohne sie auf deinem eigenen Server hosten zu müssen. Dies kann die Ladezeit deiner Website verbessern und die Dateigröße reduzieren.

Google Fonts

Google Fonts ist eine der beliebtesten Schriftbibliotheken. Sie bietet Hunderte von kostenlosen Schriftarten, die du deiner Website ganz einfach hinzufügen kannst.

So bettest du Schriftarten von Google Fonts ein:

  1. Gehe zur Google Fonts-Website: https://fonts.google.com/
  2. Wähle die Schriftarten aus, die du verwenden möchtest.
  3. Klicke auf den Button "Ausgewählte Schriftarten", um den HTML-Code zu generieren.
  4. Füge den HTML-Code in den <head>-Bereich deiner Website ein.

Weitere Web-Schriftbibliotheken

Neben Google Fonts gibt es auch andere Web-Schriftbibliotheken, die du verwenden kannst. Zu den beliebten Optionen gehören:

Tipps für die Einbettung von Schriften aus einer Bibliothek

  • Verwende nur Schriftarten, die für die Webnutzung lizenziert sind.
  • Lade nur die Schriftarten, die du benötigst, um die Dateigröße zu minimieren.
  • Überprüfe, ob die Schriftarten in allen gängigen Browsern unterstützt werden.
  • Teste deine Website auf verschiedenen Geräten und Auflösungen, um sicherzustellen, dass die Schriftarten richtig dargestellt werden.

Lokale Schriften hochladen

Neben der Einbettung von Schriften aus einer Bibliothek kannst du auch lokale Schriftdateien auf deinem eigenen Server hochladen. Dies bietet dir mehr Flexibilität bei der Verwendung von benutzerdefinierten Schriftarten, die nicht in Web-sicheren Schriftartenfamilien verfügbar sind.

Vorteile des Hochladens lokaler Schriften

  • Maßgeschneiderte Typografie: Du kannst Schriftarten hochladen, die perfekt zu deinem Markenstil passen.
  • Einzigartige Ästhetik: Lokale Schriften ermöglichen es dir, dich von anderen Websites abzuheben und ein unverwechselbares visuelles Erlebnis zu schaffen.
  • Hohe Qualität: Lokale Schriftdateien bieten in der Regel eine bessere Qualität als Web-sichere Schriftarten.

Schritte zum Hochladen lokaler Schriften

  1. Konvertiere deine Schriftart: Konvertiere deine Schriftartdatei in ein Web-freundliches Format wie WOFF (Web Open Font Format) oder WOFF2.
  2. Erstelle ein @font-face-Regel: Erstelle im CSS deiner Website eine @font-face-Regel, die auf die hochgeladene Schriftartdatei verweist.
  3. Lade die Schriftdatei hoch: Lade die Schriftartdatei in einen Ordner auf deinem Server hoch.
  4. Aktualisiere deine CSS-Datei: Verweise in deiner CSS-Datei auf die URL des hochgeladenen Schriftartdatei.

Beispielcode

@font-face {
  font-family: 'MeineBenutzerdefinierteSchriftart';
  src: url('meine-benutzerdefinierte-schriftart.woff2') format('woff2'),
       url('meine-benutzerdefinierte-schriftart.woff') format('woff');
}

Überlegungen bei der Verwendung lokaler Schriften

  • Dateigröße: Lokale Schriftdateien können groß sein, was die Ladezeit deiner Website beeinträchtigen kann.
  • Kompatibilität: Nicht alle Browser unterstützen alle Schriftformate. Stelle sicher, dass du ein Format wählst, das mit den gängigsten Browsern kompatibel ist.
  • Lizenzierung: Einige Schriftarten unterliegen möglicherweise Lizenzgebühren. Überprüfe die Lizenzbestimmungen, bevor du lokale Schriftdateien verwendest.

Tools zum Hochladen lokaler Schriften

Schriftgröße, -farbe und -stil anpassen

Dein HTML-Code ermöglicht es dir, die Darstellung deiner Schriften anzupassen, um die Lesbarkeit und Ästhetik deiner Website zu verbessern. Hier erfährst du, wie du Schriftgröße, -farbe und -stil steuerst:

Schriftgröße

Mit der Eigenschaft font-size kannst du die Größe deiner Schrift anpassen. Du kannst eine absolute Einheit (z. B. px oder em) oder eine relative Einheit (z. B. % oder rem) verwenden. So änderst du beispielsweise die Schriftgröße auf 18 Pixel:

<p style="font-size: 18px;">Dein Text</p>

Schriftfarbe

Verwende die Eigenschaft color, um die Farbe deiner Schrift zu ändern. Du kannst einen hexadezimalen Farbcode oder einen Farbnamen angeben. Um beispielsweise deine Schrift rot zu machen, verwendest du:

<p style="color: #FF0000;">Dein Text</p>

Schriftstil

Mit der Eigenschaft font-style kannst du den Stil deiner Schrift ändern. Du kannst zwischen "normal", "italic" und "oblique" wählen. So stellst du deine Schrift beispielsweise kursiv dar:

<p style="font-style: italic;">Dein Text</p>

Schriftarteneffekte wie Schatten und Deckkraft

Mit HTML kannst du nicht nur die Schriftart, -größe und -familie definieren, sondern auch verschiedene Effekte anwenden, um deinen Text hervorzuheben und optisch ansprechender zu gestalten. Hier sind einige gängige Schriftarteneffekte, die du verwenden kannst:

Textschatten

Ein Textschatten erzeugt einen versetzten Schatten hinter dem Text, um ihm Tiefe und Dimension zu verleihen. Du kannst die folgenden CSS-Eigenschaften verwenden, um einen Textschatten hinzuzufügen:

  • text-shadow-color: Die Farbe des Schattens
  • text-shadow-offset-x: Die horizontale Verschiebung des Schattens in Pixel
  • text-shadow-offset-y: Die vertikale Verschiebung des Schattens in Pixel
  • text-shadow-blur: Der Unschärfegrad des Schattens in Pixel

Beispiel:

p {
  text-shadow: 2px 2px 5px #ccc;
}

Textdekoration

Die Textdekorationseigenschaft ermöglicht es dir, eine Unterstreichung, eine Überstreichung oder eine Durchstreichung unter deinem Text hinzuzufügen. Du kannst die folgenden Werte verwenden:

  • underline: Fügt eine Unterstreichung hinzu
  • overline: Fügt eine Überstreichung hinzu
  • line-through: Fügt eine Durchstreichung hinzu

Beispiel:

h1 {
  text-decoration: underline;
}

Textabstand

Mit dem Textabstand kannst du den Abstand zwischen den Buchstaben steuern. Dies kann verwendet werden, um Text stärker oder leichter lesbar zu machen. Du kannst die folgende CSS-Eigenschaft verwenden:

  • letter-spacing: Der Abstand zwischen den Buchstaben in Pixel

Beispiel:

p {
  letter-spacing: 1px;
}

Textfarbe

Die Textfarbe kann verwendet werden, um den Text hervorzuheben oder ihm einen bestimmten Stil zu verleihen. Du kannst die folgende CSS-Eigenschaft verwenden:

  • color: Die Farbe des Textes

Beispiel:

h2 {
  color: #ff0000;
}

Texttransparenz

Die Texttransparenz ermöglicht es dir, die Deckkraft des Textes zu steuern. Dadurch kannst du Text transparent machen oder ihn mit einem Hintergrundbild überlagern. Du kannst die folgende CSS-Eigenschaft verwenden:

  • opacity: Die Deckkraft des Textes (0 ist transparent, 1 ist vollständig deckend)

Beispiel:

p {
  opacity: 0.5;
}

Durch die Verwendung dieser Schriftarteneffekte kannst du einzigartigen und ansprechenden Text auf deiner Webseite erstellen. Experimentiere mit verschiedenen Kombinationen, um den gewünschten Effekt zu erzielen.

Schriften für verschiedene Browser optimieren

Um eine konsistente Darstellung deiner Schriften in verschiedenen Browsern zu gewährleisten, sind einige zusätzliche Schritte erforderlich:

Überprüfe die Browserkompatibilität

Jeder Browser unterstützt eine bestimmte Anzahl von Schriftarten. Du solltest recherchieren, welche Schriftarten in den Browsern unterstützt werden, die deine Zielgruppe nutzt. Websites wie Can I use können dir dabei helfen, die Browserkompatibilität verschiedener Schriftarten zu überprüfen.

Erwäge Fallbacks

Wenn ein Browser eine bestimmte Schriftart nicht unterstützt, kannst du Fallback-Schriftarten angeben. Dies sind alternative Schriftarten, die verwendet werden, wenn die primäre Schriftart nicht verfügbar ist. Zu diesem Zweck verwendest du die font-family-Eigenschaft. Beispielsweise kannst du folgendes angeben:

font-family: Arial, Helvetica, sans-serif;

In diesem Beispiel wird Arial als erste Wahl verwendet, gefolgt von Helvetica und dann einer beliebigen anderen serifenlosen Schriftart, die der Browser unterstützt.

Verwende Web-sichere Schriftarten

Web-sichere Schriftarten sind solche, die auf den meisten Geräten und Betriebssystemen vorinstalliert sind. Durch die Verwendung web-sicherer Schriftarten kannst du die Kompatibilität und Konsistenz über verschiedene Browser hinweg erhöhen. Zu den gängigen web-sicheren Schriftarten gehören Arial, Helvetica, Verdana und Times New Roman.

Nutze Webfont-Dienste

Webfont-Dienste wie Google Fonts und Typekit ermöglichen es dir, eine breite Palette von Schriften in deine Website einzubinden. Diese Dienste stellen Schriftdateien bereit, die für den Einsatz im Web optimiert sind und auf verschiedenen Browsern konsistent gerendert werden.

Teste gründlich

Nachdem du deine Schriften optimiert hast, solltest du deine Website in verschiedenen Browsern und auf verschiedenen Geräten testen. Stelle sicher, dass deine Schriften auf allen Plattformen wie erwartet angezeigt werden. Achte auf Inkonsistenzen, verschwommene Schriftarten oder andere Darstellungsprobleme.

Barrierefreiheit und Schriftartenauswahl

Wenn du Schriften in HTML verwendest, ist es wichtig, Barrierefreiheit und Lesbarkeit für alle Nutzer zu berücksichtigen. Hier sind einige Faktoren, die du beachten solltest:

Schriftgröße und -kontrast

  • Wähle Schriftgrößen, die groß genug sind, um leicht gelesen werden zu können, auch für Nutzer mit Sehschwäche.
  • Stelle sicher, dass der Kontrast zwischen der Schriftfarbe und dem Hintergrund ausreicht, um die Lesbarkeit zu gewährleisten.

Schriftartenauswahl

  • Verwende leicht lesbare Schriftarten wie Arial, Helvetica oder Verdana.
  • Vermeide stark dekorative oder schnörkelige Schriftarten, die schwer zu lesen sein können.
  • Denke an Nutzer mit Dyslexie und wähle Schriftarten, die diese Erkrankung berücksichtigen, wie OpenDyslexic oder Dyslexie.

Schriftlayout

  • Richte den Text linksbündig aus, da dies die Lesbarkeit verbessert.
  • Verwende Absätze und Überschriften, um den Text zu unterteilen und die Lesbarkeit zu erleichtern.
  • Denke an Nutzer mit kognitiven Beeinträchtigungen und vermeide verwirrende Schriftartkombinationen oder zu viele Schriftartänderungen.

Alternative Texte

  • Wenn du dekorative Schriften verwendest, die schwer zu lesen sind, stelle sicher, dass du alternative Texte bereitstellst, die den Inhalt beschreiben.

Unterstützung für Bildschirmlesegeräte

  • Teste deine Website mit Bildschirmlesegeräten wie NVDA oder JAWS, um sicherzustellen, dass sie für Nutzer mit Sehbehinderungen zugänglich ist.
  • Verwende ARIA-Attribute, um die Schriftartinformationen für Bildschirmlesegeräte bereitzustellen.

Indem du diese Richtlinien befolgst, kannst du sicherstellen, dass deine Website für alle Nutzer zugänglich und lesbar ist, unabhängig von ihren individuellen Bedürfnissen.

Best Practices für die Verwendung von Schriften in HTML

Um die bestmögliche Benutzererfahrung zu gewährleisten, befolge diese Best Practices beim Verwenden von Schriften in HTML:

Optimiere für Lesbarkeit und Barrierefreiheit

  • Wähle kontrastreiche Schriftfarben: Verwende Schriften, die sich deutlich vom Hintergrund abheben.
  • Vermeide zu kleine Schriftgrößen: Verwende für den Haupttext eine Schriftgröße von mindestens 16px.
  • Nutze Schriftarten, die für Web lesbar sind: Verwende Web-sichere Schriften oder bette Schriften mit @font-face ein.
  • Beachte Farbkontraste für Sehbehinderte: Verwende einen Kontrastprüfer, um sicherzustellen, dass deine Farben für alle sichtbar sind.

Berücksichtige die Dateigröße

Lade Schriften asynchron

  • Verwende die asynchrone @font-face-Regel: Dies ermöglicht das Laden von Schriften im Hintergrund, ohne die Seitendarstellung zu blockieren.

Vermeide zu viele Schriftarten

  • Beschränke die Anzahl der Schriftarten auf zwei bis drei: Zu viele Schriftarten können die Seite überladen und die Lesbarkeit beeinträchtigen.

Verwende semantische Schrift-Tags

  • Nutze die HTML5-Schrift-Tags: und zur Definition von Schriftarteneigenschaften. Dies verbessert die Zugänglichkeit und Suchmaschinenoptimierung.

Testen in verschiedenen Browsern

  • Überprüfe die Schriftanzeige in verschiedenen Browsern: Verwende BrowserStack (https://www.browserstack.com/) oder ein ähnliches Tool, um die Konsistenz der Schriftanzeige zu gewährleisten.

Berücksichtige die Lizenzbedingungen

  • Überprüfe die Lizenzbedingungen der Schriftarten: Stelle sicher, dass du die Schriften für den beabsichtigten Verwendungszweck verwenden darfst.

Folge uns

Neue Posts

Thumbnail

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Thumbnail

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts

SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern

Sicherheitsrichtlinien

POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web

Webentwicklung

LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben

Dokumentenerstellung

Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden

Fehlerbehebung

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers

Fehlerbehebung

Linux Mint Themes: Personalisieren Sie Ihren Desktop

Open Source

TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose

Fehlerbehebung

Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung

Anleitungen

Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal

Open Source