Lukas G.
Wenn es eine Sache gibt, die über das Design einer Website entscheiden kann, dann sind es HTML-Schriftarten. Die Wahl der richtigen Schriftart ist entscheidend für den Erfolg und nicht nur eine ästhetische Entscheidung, denn die Wahl einer schwer lesbaren Schriftart kann Besucher abschrecken.
Daher muss die Schriftart einfach zu erstellen sein, die richtige Größe haben und eine Farbe haben, die nicht mit dem Hintergrund verschmilzt. Auch wenn dies wie die Grundlagen klingt, machen es viele Websites immer noch nicht richtig, und die Chancen stehen gut, dass Sie wahrscheinlich auf die ein oder andere Website gestoßen sind, die schwer zu lesen ist.
Heute werde ich alles behandeln, was Sie über HTML-Schriftarten in WordPress wissen müssen.
Was sind HTML-Schriftarten?
Eine HTML-Schriftart oder Web-Schriftart ist der in CSS geschriebene Textstil, der auf Websites angezeigt wird. In den meisten Fällen verfügt die Plattform, auf der Sie Ihre Website erstellen, nur über eine begrenzte Auswahl an Schriftarten, in Wirklichkeit sind jedoch Hunderte verfügbar.
Allerdings ist ihre Verwendung mit einem ziemlich großen Kompromiss verbunden. Sie dürfen nicht auf den Servern gespeichert werden, mit denen Sie kommunizieren.
Mit anderen Worten: Das Laden Ihrer Seite kann länger dauern, wenn Sie eine ungewöhnliche Schriftart verwenden, da der Server und die Webbrowser die von Ihnen verwendete Schriftart finden und installieren müssen, bevor die Seite geladen werden kann.
Aus diesem Grund verwenden die meisten Websites tatsächlich eine sehr ähnliche Schriftart.
Ein weiterer Aspekt von HTML-Schriftarten ist ihre Fähigkeit, sich an unterschiedliche Bildschirmgrößen anzupassen. Oder mit anderen Worten: Reaktionsfähigkeit.
Es ist auch wichtig zu erwähnen, dass jede Schriftart hinsichtlich ihrer Größe und der von Ihnen gewählten Farbe anpassbar ist. Es gibt auch andere Standardanpassungen wie Fett- und Kursivschrift, die Sie anwenden können. Diese Optionen sind für fast jede Schriftart verfügbar.
Wie ändere ich Schriftarten in WordPress?
Welche Schriftarten Ihnen zur Verfügung stehen, hängt vom verwendeten Thema ab. Jedes Theme bietet normalerweise mehrere Standardschriftarten, aus denen Sie wählen können. Allerdings können Sie, wie bei den meisten Dingen in WordPress, mit Plugins weitere hinzufügen.
Werfen wir einen Blick darauf, wie man eine Schriftart in WordPress auswählt.
Methode 1: Theme-Anpasser
Vor WordPress 5.9 konnten Sie bei praktisch allen Themes in WordPress die Schriftart über den Theme-Customizer ändern. Dadurch können Sie die Schriftart in jedem Bereich Ihrer Website ändern. Und es ist wirklich einfach zu machen.
Das einzige Problem besteht darin, dass für einige Themes nicht dieselben Optionen verfügbar sind. Wenn Sie also keine Typografieoption sehen, fahren Sie mit Methode 2 fort.
Klicken Sie im WordPress-Admin-Bereich auf „Darstellung“ und wählen Sie die Option „Anpassen“.
Wie ich bereits sagte, ist dies bei jedem Thema anders. Manchmal erscheint die Typografie-Option in den Optionen der obersten Ebene. In anderen Fällen wird es an einem anderen Ort begraben.
In meinem Fall verwende ich das Astra-Theme. Ich muss zuerst auf „Global“ klicken, bevor ich die Option „Typografie“ auswählen kann.
Die verfügbaren Optionen sind themenabhängig, aber normalerweise haben Sie Optionen zum Ändern von Abständen, Rändern, Schriftgröße und mehr. Mit der Schriftartenauswahl können Sie aus den Standardeinstellungen Ihres Themes auswählen. Einige bieten mehr als andere.
Sie können sehen, wie die Schriftart in den Bereichen aussieht, in denen sie sich ändert. Manchmal sind es globale Optionen und manchmal gelten sie für bestimmte Abschnitte.
Methode 2: Code
Nicht alle Themes bieten Typografie als Option an, stattdessen müssen Sie die Schriftarten tatsächlich in das Stylesheet codieren. Die gute Nachricht ist, dass das viel schwieriger klingt, als es tatsächlich ist.
Gehen Sie in das Backend Ihrer Website und suchen Sie das CSS-Stylesheet Ihres Themes. Um auf Ihrer gesamten Website eine Schriftart zu verwenden, fügen Sie oben im Blatt die folgende Codezeile ein:
* font-family:“Name der Schriftart“
Sie müssen den „Namen der Schriftart“ durch den tatsächlichen Namen der Schriftart ersetzen (z. B. Arial). Speichern Sie die Änderungen und das ist Ihre neue Schriftart. Bei der Schriftart muss es sich um eine Standard-HTML-Schriftart handeln. Andernfalls müssen Sie die Schriftart herunterladen, um sie verwenden zu können.
In diesen Fällen können Sie manchmal eine Codezeile in Ihren Header-Bereich einbetten. Ein gutes Beispiel hierfür sind Google-Schriftarten.
Methode 3: Site-Editor (WordPress 5.9)
Der Site-Editor ist seit dem neuesten Update 5.9 eine neue Ergänzung zu WordPress. Es ist für die meisten Themes nicht verfügbar und die entsprechenden Themes befinden sich noch in der Beta-Phase. Allerdings wird dies in Zukunft langsam aber sicher den Theme-Customizer ersetzen.
In den kommenden Monaten werden Themes ausschließlich mit diesem Editor veröffentlicht und bestehende Themes werden ihn als Ersatz oder in Verbindung mit dem Theme-Customizer aus Methode 1 hinzufügen.
TL;DR: Der Site-Editor bleibt erhalten und ermöglicht es Ihnen, Änderungen an Ihrer gesamten Site auf einmal vorzunehmen. Und ja, dazu gehören auch Typografieoptionen.
Klicken Sie auf „Darstellung“ und wählen Sie die Option „Editor“.
Das erste, was Sie sehen sollten, ist die Option „Typografie“ auf der rechten Seite. Klick es an.
Anschließend werden Sie aufgefordert, zwischen Text und Links zu wählen. Links beziehen sich auf von Ihnen erstellte Hyperlinks, während sich Text auf alles andere bezieht. Wählen Sie die Option Text.
Verwenden Sie das Dropdown-Feld „Schriftfamilie“, um die zu verwendende Schriftart auszuwählen. Ähnlich wie zuvor sind die Optionen, die Ihnen zur Verfügung stehen, themenabhängig.
Und das ist es. Dieser Editor wird sicherlich in zukünftigen Updates erweitert, sodass es in Zukunft definitiv mehr Optionen geben wird, die Sie nutzen können.
Was ist mit Plugins?
WordPress verfügt über eine riesige Auswahl an Plugins, mit denen Sie benutzerdefinierte Schriftarten hinzufügen können. Benutzerdefinierte Schriftarten beziehen sich jedoch nicht auf die Standard-HTML-Schriftarten. Dies sind einzigartige Schriftarten, auf die Sie kostenlos zugreifen können.
Das hört sich vielleicht verlockend an, aber in den meisten Fällen gibt es bei der Verwendung dieser Schriftarten ein großes Problem. Sie verlangsamen Ihre Website.
Ich habe dies bereits erwähnt, aber damit eine Seite geladen werden kann, muss der Webbrowser, den der Besucher verwendet, diese Schriftart vom Server herunterladen, auf dem sie gespeichert ist. Dies ist ein zusätzlicher Schritt und je mehr benutzerdefinierte Schriftarten Sie verwenden, desto länger dauert es.
Dies ist ein wichtiger Grund, warum HTML-Schriftarten weit verbreitet sind. Sie sind Standard und überall zu finden. Und das ist auch der Grund, warum sich die meisten Websites für eine einzige Schriftart entscheiden. Je mehr Sie hinzufügen, desto länger dauert das Laden.
Die gute Nachricht ist, dass Google daran gearbeitet hat, die Schriftartenauswahl zu erweitern, die Ihnen mit Google Fonts zur Verfügung steht.
Was sind Google-Schriftarten?
Google-Schriftarten sind benutzerdefinierte Schriftarten, die direkt von Google erhältlich sind. Und sie bieten über 1000 Schriftarten zur Auswahl. Am wichtigsten ist, dass sie die Probleme vermeiden, die bei benutzerdefinierten Schriftarten auftreten, da diese direkt auf Google-Servern gespeichert werden.
Anschließend wird die Schriftart allen Benutzern auf die bestmögliche Weise bereitgestellt. Das Endergebnis ist, dass Ihre Website schneller geladen wird, als wenn Sie sonst eine Datei eines Drittanbieters verwenden.
Da Google Fonts nicht im Mittelpunkt dieser Anleitung stehen, belasse ich es dabei, aber wenn Sie interessiert sind, haben wir bereits eine Anleitung, wie Sie sie lokal in WordPress hosten können.
Tipps, um Ihre HTML-Schriftart lesbar zu machen
Eines der größten Probleme für Anfänger ist die Lesbarkeit. In der Hälfte der Fälle merken sie nicht einmal, dass es sich um ein Problem handelt. Wenn Besucher Ihre Inhalte nicht lesen können, werden sie nicht wiederkommen, um mehr zu erfahren. Und es wird weniger wahrscheinlich sein, dass sie es teilen.
Werfen wir einen Blick auf die wichtigsten Überlegungen, die alle Websites bei der Auswahl ihrer Schriftart berücksichtigen sollten.
1. Verwenden Sie keinen kursiven Stil
Es gibt eine Menge Schriftarten, aus denen Sie wählen können, und es gibt viele, die Kursivschrift als Stil verwenden. Während es für einige Websites gut geeignet sein kann, beispielsweise für solche, die sich auf die Geschichte konzentrieren, ist es nicht die beste Wahl für die Barrierefreiheit.
Zunächst ist es wichtig, den größten Fehler dieser Designwahl anzugehen: Viele Menschen können keine Kursivschrift lesen.
Tatsächlich haben viele Schulen in Amerika den Kursivunterricht abgeschafft, so dass diese Gruppe nur noch größer wird. Und die Chancen stehen gut, dass nicht nur Amerikaner Ihre Website besuchen.
Personen, die Englisch als Zweitsprache lernen, haben auch Schwierigkeiten, Kursivschrift zu lesen.
Man denkt vielleicht, dass es stilvoll ist, aber ich kann Ihnen versichern, dass es viele vom Inhalt abschrecken wird.
2. Wählen Sie die richtige Farbe
Einer der größten Fehler, den Anfänger machen, ist das Ändern der Schriftfarbe. Dies kann dazu führen, dass der Text für normale Besucher nur schwer lesbar und für Menschen mit Sehbehinderungen nicht mehr lesbar ist.
Vor allem sollten Sie bedenken, dass es Farbenblindheit gibt. Nur in Amerika, vorbei 12 Millionen Menschen leiden an irgendeiner Form von Farbenblindheit.
Allerdings müssen Sie sich hier nicht nur um den Text kümmern, sondern auch um die Hintergrundfarbe. Beispielsweise ist schwarzer Text für die meisten Websites eine gute Wahl, jedoch nicht auf einem schwarzen oder dunklen Hintergrund. Stattdessen funktioniert weißer Text besser.
Farbe ist mit Sicherheit einer der größten Faktoren, die die Lesbarkeit von Webinhalten erschweren.
3. Machen Sie den Text nicht zu klein
Nun, ich weiß, was Sie denken: Die Leute können einfach die Zoomfunktion verwenden, um den Text lesbar zu machen, oder? Das trifft zwar durchaus zu, aber wie viele Leute werden sich tatsächlich die Zeit nehmen, die Zoomstufen anzupassen? Wie viele Leute wissen eigentlich, wie es geht?
Die Wahrheit ist: Wenn jemand den Text zu klein findet, wird er einfach gehen.
Die empfohlene Textgröße für einen Blog liegt zwischen 16 und 20 Pixel. Es ist wichtig, nicht nur Desktop-Benutzer in Betracht zu ziehen, da mobile Benutzer weitaus anfälliger für kleine Texte sind. Auch wenn es einfach ist, hineinzuzoomen, wissen die meisten nicht, dass es existiert.
Die richtige Textgröße ist entscheidend für den Erfolg.
FAQ
Wie groß ist die HTML-Schriftfamilie?
Obwohl es eine große Auswahl an Schriftarten gibt, besteht die eigentliche Liste der HTML-Schriftfamilien nur aus fünf Mitgliedern:
- Serife
- Serifenlos
- Kursiv
- Fantasie
- Monospace
Die Familien bezeichnen einen bestimmten Stil, dem zumindest größtenteils alle darin enthaltenen Schriftarten folgen. Es gibt ein paar Ausreißer, aber Sie können davon ausgehen, dass die Kursivfamilie Schriftarten erzeugt, die gut kursiv aussehen.
Innerhalb jeder Schriftfamilie stehen Hunderte von Schriftarten zur Auswahl und die Liste wächst jedes Jahr. Die meisten sind jedoch nicht websicher.
Was sind websichere Schriftarten?
Websichere Schriftarten sind die am häufigsten verwendeten Schriftarten im Internet. Sie sind websicher, da alle Geräte und Browser an ihre Verwendung gewöhnt sind.
Die Gesamtzahl der websicheren Schriftarten ist schwer zu bestimmen, aber es gibt etwa 20. Die Liste wächst, da sich immer mehr Websites für Schriftarten mit unterschiedlichen Stilen entscheiden.
Infolgedessen werden immer mehr Webbrowser die beliebtesten Schriftarten nativ unterstützen, weshalb die Liste immer länger wird.
Hier sind einige der am häufigsten verwendeten Schriftarten im Internet und die Familien, aus denen sie stammen:
- Arial (serifenlos)
- Times New Roman (Serife)
- Verdana (serifenlos)
- Tahoma (serifenlos)
- Trebuchet MS (serifenlos)
- Impact (serifenlos)
- Didot (Serife)
- Georgia (Serife)
- Amerikanische Schreibmaschine (Serife)
Ist eine Schriftart eine Schriftart?
Per Definition besteht eine Schriftart aus Buchstaben, Zahlen und Zeichen, die alle das gleiche Design haben. Die Schriftart hingegen ist der spezifische Stil, den die Schriftart mit einer bestimmten Breite, Größe und Stärke verwendet.
Das kann immer noch verwirrend sein, deshalb gebe ich ein Beispiel. Betrachten Sie Times New Roman; Es handelt sich per Definition um eine Schriftart. Sobald Sie ihm jedoch eine bestimmte Größe geben, beispielsweise 20 Pixel, und ihn fett formatieren, wird daraus eine Schriftart.
Die beiden sind sich sehr ähnlich und werden oft synonym verwendet, aber eigentlich sind sie nicht dasselbe.
Ist Fett eine Schriftart?
Die Verwendung ist durchaus üblich Deutlich, Kursivschriftoder Fette Kursivschrift um Schlüsselwörter oder Phrasen hervorzuheben. Allerdings handelt es sich bei Bold eigentlich nicht um eine Schriftart.
Stattdessen handelt es sich um einen Modifikator für die Schriftart selbst. Es kann erheblich dazu beitragen, dass Ihre Inhalte besser lesbar sind, insbesondere wenn immer mehr Benutzer die Seiten nur überfliegen, um eine bestimmte Phrase oder einen bestimmten Begriff zu finden. Und in dieser Hinsicht ist es äußerst effektiv.
Es ist jedoch kein Ersatz für einen tatsächlichen Header.
Was ist der Unterschied zwischen einer Web-Schriftart und einer Desktop-Schriftart?
Eine Desktop-Schriftart wird auf Ihrem Computer installiert, um sie in einer bestimmten Anwendung verwenden zu können. Stellen Sie sich beispielsweise vor, Sie installieren eine Schriftart zur Verwendung in Microsoft Word oder Photoshop.
Eine Webschriftart ist speziell für Websites konzipiert und verwendet CSS zur Anzeige auf Webseiten. Viele Schriftarten können tatsächlich sowohl als Web- als auch als Desktop-Schriftarten existieren, wie Times New Roman oder Arial, aber aus Code-Perspektive unterscheiden sie sich tatsächlich stark voneinander.
Daher verschwimmt die Grenze zwischen ihnen im Laufe der Zeit.
Sollte ich das HTML-Font-Tag verwenden?
Ich habe das HTML-Font-Tag nicht erwähnt, da der klassische Editor weit hinter uns liegt. Wenn Sie es jedoch noch verwenden, können Sie die Schriftart mit dem HTML-Editor bearbeiten. Dies ist jedoch nicht erforderlich, da der visuelle Editor vorhanden ist.
Für Neugierige: Das Schriftart-Tag lautet „“ und Sie können damit die Schriftart in einem Beitrag oder einer Seite bearbeiten. Es wird auch heute noch verwendet, aber die Zahl nimmt ab.
Die von Ihnen ausgewählten HTML-Schriftarten sind wirklich wichtig
Es lässt sich nicht leugnen, dass bei den meisten Websites der Großteil des Inhalts auf Ihrer Website in Form von Text vorliegt. Oder mit anderen Worten: Verwenden Sie eine Schriftart.
Daher kann die von Ihnen gewählte Schriftart über Erfolg oder Misserfolg Ihrer Website entscheiden. Und es ist nicht nur der Stil. Sie müssen sicherstellen, dass es die richtige Größe hat, eine sichtbare Farbe hat und zum Erscheinungsbild Ihrer Website passt.
Viele Anfänger wählen einfach eine generische Schriftart wie Arial, was eigentlich eine kluge Wahl ist, da sie am beliebtesten ist. Wenn Sie jedoch selektiv vorgehen, kann dies das Erlebnis, das Sie den Besuchern bieten, erheblich verbessern.
Welche HTML-Schriftarten verwenden Sie auf Ihrer Website? Verwenden Sie eine websichere Schriftart?
