Entwurf

Wie man die richtige Schriftart
für eine Website oder einen Artikel auswählt

Diese Leitlinien helfen Ihnen bei der Auswahl einer Schriftart -
- ohne zu viel Theorie.
Die Schrift ist sehr wichtig. Sie ist wie Luft, man merkt sie nicht, wenn alles in Ordnung ist. Die meisten Menschen haben keine Ahnung von Schriftarten, ihren Namen oder Eigenschaften (und das ist auch gut so), aber sie werden definitiv spüren, dass etwas nicht stimmt, wenn Sie eine ungeeignete Schriftart für Ihre Website verwenden.
Mit Tilda, der All-in-One-Plattform, kann jeder eine Website erstellen, ohne einen Webentwickler oder professionellen Designer einstellen zu müssen.
Ändern und Anpassen von Schriftarten
Die Schriftarten können in den Website-Einstellungen geändert und auf alle Blöcke und Seiten angewendet werden. So entsteht ein einheitlicher und klarer Stil für Ihre Website.
Sie können maximal zwei Schriftarten hinzufügen. Einerseits sorgt die Verwendung einer begrenzten Anzahl von Schriftarten für einen guten visuellen Eindruck. Andererseits verlangsamt jede zusätzliche Schriftart die Ladegeschwindigkeit der Seite.

Gehen Sie zu "Website-Einstellungen" und klicken Sie dann auf "Schriftarten und Farben", was Sie zu Schriftfamilienpaaren führt. Dies sind die von unseren Designern empfohlenen Kombinationen von zwei Schriftarten. Scrollen Sie nach unten, bis Sie das Paar gefunden haben, das Ihnen gefällt. Klicken Sie auf "Auswählen" und "Änderungen speichern". Die Schriftarten auf Ihrer Website werden nun geändert.
Wenn Ihnen die von uns angebotenen Kombinationen nicht zusagen, klicken Sie auf "Benutzerdefinierte Einstellungen". Es wird eine Liste mit weiteren Optionen für das Hinzufügen einer Schriftart zu Tilda angezeigt, z. B.:
1) Wählen Sie eine Schriftart aus dem Standardsatz
2) Laden Sie Ihre eigene Schriftart hoch
3) Installieren Sie eine Schriftart mit Typekit
4) Verwenden Sie Google Fonts
5) Laden Sie Ihre CSS-Datei hoch
Für detaillierte Anleitungen folgen Sie einfach den obigen Links.
Wenn Sie auf der Seite nach unten scrollen, finden Sie Einstellungen zu Schriftgröße, -gewicht und -farbe. Die Parameter, die Sie dort einstellen, werden für die gesamte Website übernommen. Wenn Sie die Schriftarten in einem Block ändern müssen, können Sie dies im Editor für jeden Block tun.
Was sind Schriftstärken?
Die Schriftstärke bestimmt die Dicke jeder Schrift. Normalerweise haben Schriftarten zwei Stile - normal oder fett. Sie können weitere Abstufungen der Stärke haben, von superleicht bis superfett. Tilda unterstützt fünf grundlegende Schriftstärken, nämlich light, regular, medium, semi-bold und bold. Nicht jede Schrift hat viele Schnitte, manche haben nur zwei: normal und fett.
Für die Avenir gibt es sieben Varianten der Schriftstärke.
Was ist die beste Schriftgröße für eine Website?
Die Schriftgröße hängt von der Menge des Textes auf Ihrer Website ab. Wenn Sie nicht viel Text haben und ihn hauptsächlich für Überschriften und Kommentare verwenden, erhöhen Sie die Schriftgröße auf 22px (die Standardschriftgröße ist 20px). Wenn Sie viel Text haben, sollten Sie die Schriftgröße verkleinern (18 px), um die Lesbarkeit zu verbessern.
So legen Sie die Schrifteigenschaften projektabhängig fest
Fragen Sie sich: Was ist Ihr Webprojekt? Handelt es sich um einen Artikel, einen Blogbeitrag oder eine lange Lektüre, bei der Text die Hauptrolle spielt? Oder haben Sie eine Website, eine Landing Page oder eine Fotostory mit nur ein bisschen Text?
Einstellung von Schriftarten für eine Website entsprechend ihrer Botschaft
Wenn Sie gerade erst mit der Gestaltung einer Website beginnen, sollten Sie entscheiden, ob die Standardschriftart zum Erscheinungsbild Ihrer Website passt. Sie würden ja auch nicht die Websites für ein Kindersportcamp und ein Architekturbüro gleich aussehen lassen, oder? Sie können den Unterschied mit Schriftschnitten ausdrücken.
Als Nächstes werden wir uns mit vier verschiedenen Schriftschnitten für Titel und Text befassen. Sie tragen dazu bei, den Tonfall einer Website zu bestimmen, damit ihre Seiten ausgewogen und richtig aussehen.
1
Halbfetter Titel + Normaler Text
Dies ist die einfachste Kombination, die für die meisten Websites gut funktioniert. Verwenden Sie sie, wenn Sie einfach eine gut aussehende Webseite erstellen möchten, ohne die Aufmerksamkeit auf bestimmte Elemente zu lenken. Sie eignet sich für jede Website.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftgrad des Textes - Normal
Schriftgrad der Überschrift - Semi-Bold
Website-Einstellungen > Schriftart und Farben > Größe und Gewicht
Beispiel
Webseite mit Stellenanzeigen. Schriftarten: Open Sans (Titel) und Roboto (Text)
2
Fettgedruckter Titel + Normaler Text
Wir empfehlen die Verwendung dieser beliebten Kombination, wenn es bei Ihrem Projekt um Dynamik und Energie geht.

Sie eignet sich besonders für Websites für Bars, Coworking Spaces, Konzert- und Tournee-Promotions, Sportwettbewerbe und so weiter.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftgrad des Textes - Normal
Schriftgrad der Überschrift - Bold
Website-Einstellungen> Schriftart und Farben > Größe und Gewicht
Beispiel
Website für einenCoworking Space. Schriftarten: Ubuntu (Titel) und PT Sans (Text)
3
Fett gedruckter Titel + dünner Text
Dies ist eine seltenere Kombination, die durch den Kontrast der Schriftarten dramatisch wirkt. Sie eignet sich hervorragend, wenn Sie den Antrieb mit dem Stil in Einklang bringen müssen. Zum Beispiel spiegeln auffällige und gut lesbare Titel und Texte ein ästhetisches Design auf dieser Website für einen Marketingkurs wider.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftstärke des Textes - Light
Schriftstärke der Überschrift - Bold
Website-Einstellungen> Schriftart und Farben > Größe und Gewicht
Beispiel
Webseite des Designstudios. Schriftarten: Noto Sans (Titel) und Open Sans (Text)
4
Dünner Titel + Dünner Text
Diese Kombination eignet sich sehr gut für Projekte, bei denen es um Hightech, Fortschritt, modernste Technologie oder um etwas geht, das schön und stark aussehen soll. Sie ist besonders gut, wenn Sie viel weißen Raum haben, der mit hellen Farbtupfern und schönen Bildern akzentuiert wird.

Geeignet für Websites, die sich mit Gadgets, Schmuck, gehobenen Cafés oder Restaurants und Schönheitssalons beschäftigen.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Text font weight - Light
Headline font weight - Light
Website-Einstellungen> Schriftart und Farben > Größe und Gewicht
Beispiel
Landing Page für eine mobile Fotobearbeitungs-App. Schriftarten: Open Sans (Titel) und Open Sans (Text)
Beispiele für schöne Schriftkombinationen
Durch die Kombination verschiedener Schriftarten in Titeln und Texten können Sie verschiedene Grade der visuellen Gesamtwirkung erzielen und den Charakter und den Tonfall Ihrer Website zum Ausdruck bringen.
Auswahl von Schriftarten für einen Artikel
Sie möchten, dass Ihr Artikel für Ihre Nutzer leicht zu lesen ist? Dann achten Sie darauf, dass er gute Kontraste aufweist und die Schrift nicht zu groß ist.

Wenn Sie einen langen Text oder einen Artikel mit viel Text haben, wählen Sie die Schriftgröße 18px. Für einen Fotoessay, der Text hauptsächlich für Bildunterschriften verwendet, erhöhen Sie die Schriftgröße auf 20px oder sogar 22px.

Verwenden Sie die folgenden Parameter in den Website-Einstellungen:
Schriftstärke des Textes - Normal
Schriftstärke der Überschrift - Fett / Halbfett
Schriftgröße des Textes - 18px
Website-Einstellungen > Schriftart und Farben > Größe und Gewicht
Beispiel
Mode-Blog
Beispiel
Unternehmensblog
Beispiel
Artikel über Online-Marketing
Mit oder ohne Serifen?
Schriftart Serif
Sans-serif-Schrift
Die kleinen orangefarbenen Linien im Beispiel links sind Serifen. Für das Massimo-Vignelli-Zitat auf der linken Seite wurde Baskerville Regular verwendet, für das auf der rechten Seite Helvetica Light.
Serifen erzeugen eine Führungslinie, die das Gleiten der Augen erleichtert und beschleunigt. Als die ersten Computer aufkamen, setzten sich serifenlose Schriften durch, weil serifenlose Schriften auf einem Bildschirm mit geringer Auflösung besser lesbar waren.

Auf modernen Monitoren werden beide Schriftarten gleich gut dargestellt. Aus diesem Grund wird die Wahl zwischen serifenlosen und serifenbetonten Schriften heute von der Art Ihrer Botschaft und nicht von der Lesbarkeit bestimmt. Serifenschriften vermitteln manchmal einen eher formalen Eindruck und passen zu einigen, aber nicht zu allen Marken.
Hinzufügen zusätzlicher Schriftarten
In allen bisherigen Beispielen haben wir einige sehr einfache Schriftarten verwendet. Wenn Sie die Schriftart ändern möchten, gehen Sie zu den Website-Einstellungen und wählen Sie eine Schriftart aus der Liste aus oder fügen Sie eine andere Schriftart hinzu, die Ihnen gefällt (denn in Tilda können Sie das!)
Wo man Schriftarten kaufen oder kostenlos finden kann
Bei Tilda gibt es fünf Möglichkeiten, eine Schriftart hinzuzufügen:
1
Wählen Sie in den Website-Einstellungen eine von 13 Schriftarten aus, die wir aus offenen Quellen vorselektiert haben.
2
Laden Sie Ihre Datei mit einer Schriftart hoch, die Sie anderswo gekauft haben. Sie können Schriften zum Beispiel hier kaufen:

MyFonts.com
Die Preise beginnen bei etwa $19/29/49 pro Schriftart. Einige der billigsten Schriftarten kosten 2 $, während andere 89 $ kosten können. Einige Sets enthalten kostenlose Schriftarten. Eine 30-tägige Webfont-Testversion ist ebenfalls verfügbar.

Fonts.com
Betreibt ein Abonnement-System. Sie können kostenlos auf 3.000 Schriften zugreifen, während kostenpflichtige Abonnements zwischen $5 und $100 pro Monat kosten.

Type.today

3
Fügen Sie eine Schriftart über Adobe Typekit hinzu. Dies ist eine Schriftartenbibliothek.
- Kostenloser Plan: 940 Schriftarten
- Der kostenpflichtige Plan kostet 49 $ pro Monat und bietet Zugang zu 5660 Schriftarten.
- Der Zugang zu diesen 5660 Schriftarten ist für Adobe Creative Cloud-Abonnenten vorgesehen. Wenn Sie für Creative Cloud bezahlen, müssen Sie nicht extra für Typekit bezahlen.
4
Verwenden Sie Google Fonts. Die Schriftarten sind kostenlos. Unsere Gebrauchsanweisung.
5
Laden Sie Ihre CSS-Datei hoch. Unser Leitfaden.
Die Liste der guten Schriftarten
Futura. Diese Schrift kaufen: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Diese Schrift kaufen: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Diese Schrift kaufen: myfonts.com/fonts/itc/franklin-gothic
Graphik. Diese Schriftart kaufen: type.today/Graphik
Museo. Diese Schrift kaufen: myfonts.com/fonts/exljbris/museo-sans
Gotham. Diese Schriftart kaufen: typography.com/fonts/gotham
GT Walsheim. Diese Schrift kaufen: grillitype.com/typefaces/gt-walsheim
Helvetica Neu. Diese Schrift kaufen: myfonts.com/fonts/linotype/helvetica-neue
Wie Sie die Lesbarkeit Ihrer Website sicherstellen
Welche Schriftart Sie auch immer wählen, sie muss lesbar sein. Vor allem, wenn Sie ein Hintergrundfoto verwenden. Wenn Sie eine dünne Schrift über ein Bild legen, das viele kleine Details enthält, wird der Text sehr schwer zu lesen sein. Behalten Sie dies immer im Hinterkopf!
Was können Sie tun? Erstens: Verwenden Sie ein gutes Hintergrundfoto mit großen, homogenen Elementen. Zweitens: Wenden Sie einen Überblendfilter an, um Ihr Bild weicher zu machen. Dadurch wird Ihr Text besser lesbar. Drittens können Sie die Gewichtung Ihres Designblocks mit einem Inline-Stil erhöhen. Das bedeutet, dass Sie einem bestimmten Abschnitt Ihres Textes Einstellungen zuweisen, nicht der gesamten Website. Markieren Sie den gewünschten Text und nehmen Sie die Einstellungen mit dem Website-Editor vor.
Ein auf diese Weise angewendeter Stil hat immer Vorrang vor den Standardeinstellungen. Wenn Sie also die Schrifteinstellungen Ihrer Website ändern und diese Änderungen auf der Website nicht sichtbar sind, bedeutet dies, dass sie "inline" sind. Um diese Änderungen zu entfernen, markieren Sie einfach den Text und klicken Sie auf "Löschen".
Text ist nicht gut lesbar
Text ist leicht lesbar
Auf dem linken Cover ist der Text sehr schwer zu lesen. Um dies zu korrigieren, haben wir ein Foto ohne viele kleine Details gewählt, einen 40%igen Blaufilter verwendet und die Schriftstärke erhöht.


Wenn Sie mehr über Typografie erfahren möchten, suchen Sie nach Websites, die der von Ihnen zu gestaltenden Website ähnlich sind, und finden Sie heraus, welche Schriftarten dort verwendet werden. Die Browser-Erweiterung What Font hilft Ihnen dabei.

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

Hat Ihnen der Artikel gefallen? Teilen Sie ihn mit Ihren Freunden! Vielen Dank dafür!
Hergestellt am
Tilda