Wie man Schriftarten für eine Website oder einen Artikel auswählt

Dieser Leitfaden hilft Ihnen bei der Auswahl der richtigen Schriftart mit weniger Theorie
Die Schriftart ist sehr wichtig. Mit der richtigen Schriftart ist es wie mit dem Atmen, man merkt es gar nicht, wenn die Voraussetzungen dafür perfekt sind. Die meisten Menschen haben jedoch keine Ahnung von der Schriftart, den Namen und den Eigenschaften (und das ist auch gut so). Sie könnten jedoch leicht spüren, dass etwas fehlt, wenn sie die falsche Schriftart auf ihrer Website verwenden.
In diesem Artikel haben wir einige der wichtigsten Punkte erläutert, die Sie für die richtige Auswahl benötigen, wenn Sie Ihre Website auf Tilda erstellen, der All-in-One-Plattform, die es jedem ermöglicht, eine Website zu erstellen, ohne einen Webentwickler oder einen professionellen Designer einstellen zu müssen.
Ändern und Anpassen von Schriftarten
Sie können die Schriftart auf einer Website leicht ändern und den Effekt auf alle Blöcke und Seiten anwenden. Diese Funktion ermöglicht es Ihnen, einen einheitlichen und klaren Stil zu schaffen.
Sie können maximal zwei Schriftarten hochladen. Die Verwendung einer begrenzten Anzahl von Schriftarten sorgt für ein gutes visuelles Erlebnis. Außerdem kann die Verwendung zusätzlicher Schriftarten die Ladegeschwindigkeit der Seite verlangsamen. Aus diesem Grund gibt es nur zwei Schriftarten.

Klicken Sie in den "Website-Einstellungen" auf "Schriftarten und Farben". Dieser Befehl führt Sie zu den Grundschriftarten, die von unseren professionellen Designern ausgewählt wurden. Sobald Sie die bevorzugte Schriftart gefunden haben, klicken Sie auf "Auswählen" und "Änderungen speichern". Danach ändert sich die Schriftart auf der Website automatisch.
Wenn keine der Basisschriftarten geeignet ist, klicken Sie auf "Benutzerdefinierte Einstellungen". Daraufhin wird eine Liste mit verschiedenen Optionen angezeigt, mit denen Sie Tilda eine bevorzugte Schriftart hinzufügen können:

1) Wählen Sie eine Schriftart aus der vorinstallierten Schriftartensammlung
2) Laden Sie Ihre eigene Schriftart hoch
3) Installieren Sie die Schriftart mit Adobe Fonts
4) Verwenden Sie Google Fonts
5) Laden Sie Ihre CSS-Datei hoch

Ausführliche Anleitungen finden Sie unter den oben genannten Links.
Wenn Sie auf der Seite nach unten blättern, finden Sie die Einstellungen für Schriftgröße, Gewicht und Farbe. Die in dieser Phase verwendeten Parameter werden für die gesamte Website übernommen. Wenn Sie die Schriftart ändern möchten, können Sie dies in dem für jeden Block angegebenen Editor tun.
Was sind Schriftstärken?
Die Schriftstärke gibt an, wie dick die einzelnen Schriftarten sind. Schriftarten haben zwei Grundtypen - normal oder fett - und eine zusätzliche Stärke, die von superleicht bis superfett reicht. Tilda unterstützt fünf grundlegende Schriftstärken wie light, regular, medium, semibold und bold. Allerdings sind diese Schriftstärken begrenzt, und einige Schriften haben nur zwei Schriftstärken: Regular und Bold.
Es gibt sieben Varianten von font-weight für Avenir.
Was ist die beste Schriftgröße für eine Website?
Die Größe der Schrift, die Sie verwenden möchten, hängt von der Menge der auf der Website verwendeten Inhalte ab. Wenn die Website, an der Sie arbeiten, Inhalte wie Überschriften und Kommentare enthält, können Sie die Schriftgröße auf 22 px erhöhen (die Standardschriftgröße beträgt 20 px). Wenn die Website hingegen viel Text enthält, können Sie die Schriftgröße verkleinern (18 px), um die Lesbarkeit zu verbessern.
Festlegen von Schrifteigenschaften auf der Grundlage des Projekts
Fragen Sie sich selbst: An welcher Art von Webprojekt arbeiten Sie gerade? Handelt es sich um einen Artikel, einen Blogbeitrag oder eine lange Lektüre, bei der der Inhalt im Vordergrund steht? Es könnte eine Website, eine Landing Page oder eine Fotostory mit wenig Text sein.
Schriftarten für eine Website in Übereinstimmung mit der Botschaft einstellen
Wenn Sie mit der Gestaltung einer Website beginnen, ist es wichtig zu entscheiden, ob die Standardschriftart zu den Merkmalen der Website passt. Man kann nämlich nicht erwarten, dass eine Website für ein Kindersportcamp und eine Architektur-Website gleich aussehen. Und einer der besten Wege, den Unterschied auszudrücken, ist die Verwendung von Schriftschnitten.
In der nächsten Phase werden die vier verschiedenen Schriftgrößen für Titel und Text empfohlen. Diese Funktion hilft dabei, ein Gleichgewicht im Tonfall zu finden.

1
Halbfetter Titel + Normaler Text
Dies ist eine grundlegende Mischung, die mit den meisten Websites kompatibel ist. Wir empfehlen dies, wenn Sie beabsichtigen, den Stil der Website einheitlich zu halten und die Aufmerksamkeit nicht auf ein bestimmtes Element zu lenken.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftstärke des Fließtextes - Normal
Schriftstärke der Überschriften - Semi-Bold
Website-Einstellungen → Schriftart und Farben → Größe und Gewicht
Beispiel
Webseite mit Stellenanzeigen. Schriftarten: Open Sans (Überschrift) und Roboto (Fließtext)
2
Fettgedruckter Titel + Normaler Text
Wir empfehlen diese Kombination, wenn Sie an einem Antriebs- und Energieprojekt arbeiten.

Sie wird für Websites empfohlen, die für Konzerte, Tournee-Promotionen, Bars, Coworking Spaces, Sportwettbewerbe usw. gedacht sind.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftstärke des Textes - Normal
Schriftstärke der Überschriften - Fett
Website-Einstellungen → Schriftart und Farben → Größe und Gewicht
Beispiel
Website für einenCoworking Space. Schriftarten: Ubuntu (Überschrift) und PT Sans (Fließtext)
3
Fett gedruckter Titel + dünner Text
Diese Kombination ist ziemlich selten; sie wirkt durch den Kontrast der Schriftarten dramatisch. Dennoch ist es eine perfekte Mischung aus Dynamik und Stil. Zum Beispiel spiegeln auffällige und leicht lesbare Titel und Texte ein ästhetisch ansprechendes Design in dieser Landing-Page-Kurs-Website wider.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftart für Fließtext - Light
Schriftart für Überschriften - Bold
Website-Einstellungen → Schriftart und Farben → Größe und Gewicht
Beispiel
Webseite des Designstudios. Schriftarten: Noto Sans (Überschrift) und Open Sans (Fließtext)
4
Dünner Titel + Dünner Text
Dies ist eine perfekte Kombination für Projekte, die attraktiv und stark aussehen sollen, um Aufmerksamkeit zu erregen, wie z. B. modernste Technologie, Fortschritt oder Hightech. Diese Schriftmischung wirkt perfekt, wenn sie auf einer Seite mit viel Weißraum verwendet wird, der mit hellen Farbtupfern und schönen Bildern akzentuiert wird.

Geeignet für Websites, die Gadgets, Schmuck, gehobene Cafés oder Restaurants und Schönheitssalons vorstellen.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftstärke des Fließtextes - Light
Schriftstärke der Überschriften - Light
Website-Einstellungen → Schriftart und Farben → Größe und Gewicht
Beispiel
Landing Page für eine mobile Fotobearbeitungs-App. Schriftarten: Open Sans (Überschrift) und Open Sans (Fließtext)
Beispiele für schöne Schriftkombinationen
Durch die Kombination verschiedener Schriftarten in den Überschriften und im Fließtext können Sie verschiedene Grade der visuellen Wirkung erzielen und den Charakter und den Tonfall Ihrer Website zum Ausdruck bringen.
Auswahl der Schriftarten für einen Artikel
Möchten Sie, dass Ihre Artikel leicht zu überfliegen sind? Dann achten Sie auf gute Kontraste und eine mittelgroße, nicht zu große Schrift.

Wenn der Inhalt, mit dem Sie arbeiten, lang ist, versuchen Sie, eine Schriftgröße von 18px zu verwenden. Wenn Sie einen Fotoaufsatz entwerfen, bei dem der Text hauptsächlich in den Bildunterschriften verwendet wird, sollten Sie die Schriftgröße auf 20px oder 22px erhöhen.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftgrad des Fließtextes - Normal
Schriftgrad der Überschriften - Fett / Halbfett
Schriftgröße des Fließtextes - 18px
Website-Einstellungen → Schriftart und Farben → Größe und Gewicht
Beispiel
Mode-Blog
Beispiel
Unternehmensblog
Beispiel
Online-Marketing-Artikel
Mit oder ohne Serifen?
Schriftart Serif
Sans-serif-Schrift
Die kleinen orangefarbenen Linien im Beispiel links werden als Serifen bezeichnet. Für das Massimo Vignelli-Zitat auf der linken Seite wurde Baskerville Regular verwendet, für das rechte Beispiel Helvetica Light.
Serifenschriften haben eine Leitlinie, die es dem Auge ermöglicht, schnell und reibungslos zu gleiten. Als die ersten Computer aufkamen, setzten sich serifenlose Schriften durch, da diese Schriften auf einem Bildschirm mit niedriger Auflösung besser lesbar sind.

Die meisten modernen Monitore zeigen beide Schriften perfekt an. Deshalb hängt die Wahl zwischen Serifen- und serifenlosen Schriften allein von der Botschaft ab, die Sie vermitteln wollen, und nicht von der Lesbarkeit. Serifenschriften eignen sich zwar für den formalen Bereich und werden für bestimmte Marken empfohlen.
Zusätzliche Schriftarten hinzufügen
In den vorangegangenen Beispielen haben wir einige der gängigsten Schriftfamilien verwendet. Um eine Schriftart zu ändern, öffnen Sie die Website-Einstellungen und wählen Sie die Schriftart aus der Liste aus. Außerdem können Sie auf Tilda jede beliebige benutzerdefinierte Schriftart hochladen und verwenden.
Wo man Schriftarten kaufen oder kostenlos finden kann
Bei Tilda gibt es fünf Möglichkeiten, Schriftarten hinzuzufügen:
1
Wählen Sie in den Site-Einstellungen eine der 18 Schriftarten aus, die wir aus offenen Quellen vorausgewählt haben.
2
Laden Sie Ihre Datei mit einer Schriftart hoch, die Sie anderswo gekauft haben. Sie können zum Beispiel hier Schriftarten kaufen:

MyFonts.com
Die Preise beginnen bei etwa $19/29/49 pro Schriftart. Einige der billigsten Schriftarten kosten 2 $, während andere bis zu 89 $ kosten können, während einige kostenlos sind. Sie können auch die verfügbare 30-tägige Testversion der Webschriftarten in Anspruch nehmen.

Fonts.com
Ein Dienst auf Abonnementbasis. Sie können kostenlos auf 3 000 Schriftarten zugreifen, während die kostenpflichtigen Angebote zwischen 5 und 100 Dollar pro Monat liegen.

Type.today
Die Preise beginnen bei etwa 25 $ pro Schrift.
3
Hinzufügen einer Schriftart über Adobe-Schriftarten. Dies ist eine Schriftartenbibliothek.
- Die Basic-Schriftensammlung ist mit einer Adobe-ID kostenlos verfügbar;
- Abonnenten der Adobe Creative Cloud erhalten unbegrenzten Zugriff auf die gesamte Schriftartenbibliothek.
4
Verwenden Sie Google Fonts. Die Schriftarten sind kostenlos. Sehen Sie sich unseren Leitfaden an.
5
Laden Sie Ihre CSS-Datei hoch. Sehen Sie sich unseren Leitfaden an.
Liste unserer empfohlenen Schriftarten
Futura. Diese Schrift kaufen: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Diese Schrift kaufen: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gotisch. Diese Schriftart kaufen: myfonts.com/fonts/itc/franklin-gothic
Graphik. Diese Schriftart kaufen: type.today/de/Graphik
Museo. Diese Schrift kaufen: myfonts.com/fonts/exljbris/museo-sans
Gotham. Diese Schriftart kaufen: typography.com/fonts/gotham
GT Walsheim. Diese Schriftart kaufen: grillitype.com/schriftarten/gt-walsheim
Helvetica Neu. Diese Schrift kaufen: myfonts.com/fonts/linotype/helvetica-neue
21 Cent. Diese Schriftart kaufen: myfonts.com/fonts/letterheadrussia/21-cent/
Wie Sie die Lesbarkeit Ihrer Website verbessern können
Unabhängig von der gewählten Schriftart muss sie gut lesbar sein, insbesondere wenn Sie ein Hintergrundfoto verwenden. Wenn Sie eine dünne Schrift auf einem Bild mit vielen kleinen visuellen Elementen verwenden, kann der Text schwer zu lesen sein. Behalten Sie dies immer im Hinterkopf!
Was können Sie tun? Erstens: Verwenden Sie das richtige Foto für den Hintergrund mit großen, homogenen Elementen. Wenden Sie zweitens einen Überblendfilter an, um das Bild weicher zu machen. Dadurch wird die Lesbarkeit verbessert. Drittens können Sie die Schriftstärke für einen bestimmten Block erhöhen, indem Sie einen Inline-Stil verwenden. Das bedeutet, dass Sie die Einstellungen einem bestimmten Abschnitt Ihres Textes zuweisen können und nicht der gesamten Website. Markieren Sie den Text mit dem Inline-Website-Editor.
Stile, die auf diese Weise angewendet werden, haben immer Vorrang vor den Standardeinstellungen. Wenn Sie also Schriftarten in den Website-Einstellungen ändern und die Änderungen auf der Website nicht sichtbar sind, bedeutet dies, dass Sie zuvor den Inline-Stil festgelegt haben. Um den Inlinestil zu entfernen, markieren Sie den Text und klicken Sie auf "Alle Formatierungen löschen".
Text ist nicht gut lesbar
Der Text ist leicht zu lesen
Auf dem linken Cover ist der Text sehr schwer zu lesen. Um ihn zu verbessern, haben wir ein Foto ohne viele kleine Details gewählt, einen Blaufilter mit 40 % Deckkraft verwendet und die Schriftstärke erhöht.
Wenn Sie mehr über Typografie erfahren möchten, besuchen Sie eine Website, die dem Projekt, an dem Sie arbeiten, ähnlich ist, und prüfen Sie, welche Schriftarten verwendet werden. Die Browsererweiterung What Font hilft Ihnen, Schriften auf Webseiten schnell zu identifizieren.

Stöbern Sie auch in diesem unabhängigen typografischen Archiv. Es enthält eine Sammlung von Websites und gedruckten Beispielen, die nach der Art der verwendeten Schriftart sortiert sind.

Hat Ihnen der Artikel gefallen? Teilen Sie ihn mit Ihren Freunden! Herzlichen Dank!
Siehe auch:
Kostenloses Kursbuch über das Entwerfen, Einrichten und Betreiben von
Landing Pages mit hoher Konversionsrate

Kostenloser praktischer Leitfaden für Webanimation mit Beispielen und Techniken,

und Tipps zu ihrer Verwendung