Eine gut durchdachte und gut gewählte Typografie ist der Schlüssel zu einer ästhetisch ansprechenden und vor allem gut lesbaren Website. Aber wissen Sie, wie Sie den Text auf der Website klar und konsistent mit der Identität Ihrer Marke gestalten können?
Mach dir keine Sorgen. Ich habe die 8 wichtigsten Typografieregeln zusammengestellt, die den gesamten Prozess der Erstellung der perfekten Typografie für Ihre Website einfach und effektiv machen. Stellen Sie sicher, dass Sie alle Regeln befolgen, und Sie werden mit einem transparenten Typografiesystem belohnt, das Ihr Projekt professionell aussehen lässt und die UX verbessert.
8 Prinzipien der Typografie, die Sie befolgen sollten
1. Wählen Sie die richtige Schriftart
Das Wichtigste ist, dass Ihre Typografie die wahre Natur Ihrer Branche widerspiegelt. Daher kann die Wahl der richtigen Website-Typografie kein Zufall sein. Nur weil eine Schriftart beliebt ist und Ihnen gefällt, bedeutet das nicht, dass sie für Ihre Marke geeignet ist. Achten Sie darauf, was die Schriftart kommuniziert und ob sie zum Stil Ihrer Marke passt.
Achten Sie darauf, was die Schriftart kommuniziert und ob sie zum Stil Ihrer Marke passt. Wenn Sie ein Kindergeschäft betreiben, werden Sie keine einfachen und eleganten Geschäftsschriften verwenden und umgekehrt. Passen Sie Schriftarten immer an Ihre Markenkommunikation an, um mit dieser konsistent zu sein.
Wenn Sie herausfinden möchten, worauf Sie bei der Auswahl der besten Schriftart für Ihre Website sollten, lesen Sie unseren Artikel über Website-Schriftarten .
2. Schriftgröße auswählen
Die Schriftgröße auf der Seite zählt! Wenn Sie eine Schriftart wählen, die nicht zu klein oder zu groß ist, erleichtern Sie Ihren Benutzern das Lesen erheblich. Eine spezielle Einheit, die Typografen verwenden, um Schriftarten zu beschreiben, ist „pt“ oder „Punkt“.
Der bevorzugte Bereich der Standardschriftgrößen für Websites liegt zwischen 14 und 25 pt. Größere Schriftarten können für Überschriften reserviert werden – 20 pt und darüber , und für reinen Text ist der beste Bereich 14–18 pt.
Stellen Sie unabhängig von der gewählten Schriftgröße sicher, dass die Schriftgröße:
a) macht den Text lesbar – Schriftgröße von 12pt und darunter kann die Lesbarkeit erheblich beeinträchtigen;
b) zum Schriftbild passt – Google empfiehlt beispielsweise für seine Systemschriftart Roboto mindestens 16 pt. Auf der anderen Seite San Francisco - die unter anderem in Apple-Geräten verwendete Schriftart sollte mindestens 18pt groß sein;
widerspiegelt Zweck der Website – wenn die Seite nicht durch Text, sondern durch Design dominiert wird, können Sie eine kleinere Schriftart verwenden. Auch bei interaktiven Seiten, die den Benutzer bei jedem Schritt zum Klicken auffordern, kann sich diese Lösung leisten. Handelt es sich dagegen um eine textdominierte Website, deren Hauptaufgabe das Lesen ist (z. B. Blogbereich, Informationsportal) - wählen Sie besser eine etwas größere Schriftart.
Wie wähle ich die Größe der Kopfzeile?
Sie haben sich für die Schriftgröße Ihres Fließtextes entschieden, wissen aber nicht, wie Sie die Größe der Überschriften im Verhältnis zum restlichen Inhalt halten sollen? Dafür gibt es mehrere Best Practices:
a) Die H1-Kopfzeile sollte 300 % der im Fließtext verwendeten Schriftgröße haben. Wenn Ihre Website beispielsweise eine 18pt-Schriftart für Ihren Fließtext verwendet, beträgt die optimale Größe für Ihre Überschriften 54pt.
b) Die H2-Kopfzeile sollte 200 % der Schriftgröße des Haupttexts betragen. In diesem Fall wäre bei einer Basisschriftgröße von 18pt die ideale H2-Überschrift 36pt.
⚡ BOWWE Tip:
Für aufeinanderfolgende Überschriften können Sie den Prozentsatz schrittweise verringern; Beispielsweise können Sie für die H4-Kopfzeile die primäre Schriftgröße mit 130-150 % multiplizieren.
Schriftarten in der mobilen Version
Bei der Auswahl der Schriftgröße müssen Sie die Frage beantworten, auf welchen Geräten der Text angezeigt wird. Die Schriftgröße sieht auf Laptop-Monitoren anders aus als auf Mobilgeräten. Wenn Sie sich lieber auf das Erscheinungsbild der Website auf mobilen Geräten konzentrieren möchten, denken Sie an diese zwei wichtigen Regeln:
a) Auf Smartphone-Bildschirmen sieht eine große Schrift nicht schön aus,
b) Die Überschriften sollten nicht länger als zwei Zeilen sein.
Daher lohnt es sich, bei der Gestaltung einer mobilen Website zu prüfen, wie der Text aussieht und ob die Schrift zu groß ist.
⚡ BOWWE Tip:
Beim Erstellen einer Website im BOWWE Builder reagiert diese automatisch. Das bedeutet zunächst einmal, dass Sie keine separate Website erstellen müssen, die auf mobile Geräte zugeschnitten ist. Zweitens kann beim Bearbeiten der Website in wenigen Sekunden zwischen Desktop- und mobiler Vorschau gewechselt werden. Dadurch können Sie sehr einfach steuern, wie sich die Schriftart Ihrer Wahl auf mobilen Geräten verhält.
3. Wenden Sie das Prinzip an: Weniger ist mehr
Bei der Gestaltung von Webseiten folgt man am besten dem Prinzip des Minimalismus. Die Verwendung von mehr als zwei Schriftarten in einem Projekt kann die Ästhetik des Projekts stören. Am sichersten ist es , zwei Schriftarten zu wählen: Überschriften und Klartext.
Allerdings müssen Sie auch den Kontrast im Auge behalten. Wenn Sie zwei zu ähnliche Schriftarten verwenden, ziehen sie die Aufmerksamkeit der Benutzer nicht vollständig auf sich. Versuchen Sie, nicht zwei Sans Serif-Schriftarten zu wählen, sondern wählen Sie stattdessen eine Kombination aus Serif und Sans Serif, damit Ihre Inhalte noch attraktiver aussehen.
Denken Sie auch daran, dass nicht alle Schriftarten zusammenarbeiten können. Es gibt Schriftpaare, die sich besser gefallen, und einige sind nicht kompatibel. Es lohnt sich, sie kennenzulernen, bevor Sie Ihre endgültige Wahl treffen!
⚡ BOWWE Tip:
Wenn Sie 100 % sicher sein möchten, dass Sie die beste Schriftartenpaarung wählen , können Sie sich jederzeit von Schriftartenpaarungen auf fontpair.co inspirieren lassen .
4. Entwickeln Sie die Struktur des Inhalts
Ein ebenso wichtiger Aspekt der Typografie wie die Wahl der Schriftart ist das Layout und die Struktur aller Inhalte auf der Seite. Egal, ob es sich um eine kurze Beschreibung Ihres Unternehmens oder einen ausführlichen Artikel im Blog-Bereich handelt – die Struktur jeder Art von Inhalten beeinflusst die Wahrnehmung Ihrer Website durch die Benutzer dramatisch. Was sind Typografieregeln für eine bessere Lesbarkeit?
Zeilenhöhe oder Zeilenabstand
ausreichende Zeilenhöhe (oder Zeilenabstand) und den Abstand zwischen den Zeilen einzuhalten. Bei einem zu geringen Abstand überlappen sich die Textzeilen praktisch. Andererseits wird ein zu hoher Leser "explodiert". Also ist es am besten, einen goldenen Schnitt zu finden.
Absätze und Zeilenlänge
Dass kurze Textfragmente viel besser gelesen werden, ist schon lange bekannt. Zu lange Zeilen oder Absätze können das Auge ermüden und den Leserhythmus stören. Die Zeilenlänge sollte etwa 50-75 Zeichen betragen, um den Benutzer nicht zu erschöpfen. Gleiches gilt für Absätze – sie erleichtern das Lesen längerer Texte.
Ausrichtung
In der Typografie ist die Ausrichtung die Positionierung des Textes relativ zu einem Rand, einer Seitenkante oder einem anderen Bezugspunkt.
⚡ BOWWE Tip:
Obwohl es bequem erscheint, alle Ränder des Textes auszurichten, empfehlen wir nicht, den Inhalt der Seite letztendlich zu rechtfertigen. Berechtigte Leser im Internet sehen einfach nicht gut aus und stören entgegen dem Anschein die Lesbarkeit. Wenn Sie am linken Rand ausgerichtet sind, können Sie Wörter, die nicht in die folgende Zeile passen, unter Beibehaltung des gleichen Abstands verschieben. Das ist für das Auge natürlicher und gibt den richtigen Leserhythmus.
5. Passen Sie die Farben an
Die Schriftfarbe ist ein Element der Typografie, das eng mit der visuellen Identität Ihrer Marke im Internet verbunden ist. Wie bei der Kombination von Schriftarten sollten Sie jedoch auch bei der Auswahl der Farben vorsichtig sein. Hier sind die wichtigsten Standards für die Schriftfarbe:
Wählen Sie maximal 3 Farben aus
Sie wissen bereits, dass es besser ist, dem Minimalismus in der Typografie zu folgen. Gleiches gilt für die Farben. Versuchen Sie, nicht mehr als drei Farben im Text zu verwenden, da mehr auf der Website Chaos verursachen und kindisch wirken können.
Achten Sie auf den Kontrast
Der Text sollte einen ausreichenden Kontrast zum Hintergrund haben. Die sicherste Kombination ist natürlich schwarze Schriftfarbe auf weißem oder hellgrauem Hintergrund. Es ist die natürlichste Farbkombination und ermüdet die Augen des Benutzers beim Lesen nicht.
Passen Sie nur die passenden Farben an
Denken Sie daran, dass einige Farben wie Rot und Grün nicht zusammenpassen. Das Aufbrechen von Farbschemata bei Schriftarten funktioniert normalerweise nicht.
⚡ BOWWE Tip:
Um die Schriftfarbe schneller und effizienter auszuwählen, können Sie das Color Tool von material.io verwenden . Dadurch können Sie sehen, ob die ausgewählte Schriftfarbe beispielsweise gut zur Hintergrundfarbe Ihrer Website passt.
6. Heben Sie sich ab
Mit einer Wichtigkeitshierarchie in Ihrem Text können Sie betonen, dass ein Wort wichtiger ist als ein anderes. Daher sollten die kritischsten Wörter auf Ihrer Website hervorgehoben werden. Sie können sie vergrößern, einfärben oder fett oder kursiv drucken.
⚡ BOWWE Tip:
Das Hervorheben wichtigerer Wörter oder Textfragmente ist bei Blog-Materialien sehr wichtig. Ein solches Verfahren macht sie lesbarer und leichter zu merken. Es lohnt sich auch, sie für Schlüsselwörter zu verwenden, die für die hohe Positionierung der Website in den Suchergebnissen erforderlich sind.
7. Erstellen Sie Ihre Schriftskala
Bei der Schriftskalierung wird die Textgröße auf einer Website vergrößert oder verkleinert.
Es gibt einige Gründe, warum Sie eine Schriftskala erstellen möchten. Ein Grund dafür ist sicherzustellen, dass der gesamte Text Ihrer Seite die gleiche Größe hat. Dies kann für die Benutzerfreundlichkeit wichtig sein, vor allem, wenn Sie Text verwenden, um Ihren Besuchern wichtige Informationen zu vermitteln. Es kann auch dazu führen, dass Ihre Seite einheitlicher und professioneller aussieht.
Ein weiterer Grund für die Verwendung einer Schriftskala ist die Lesbarkeit des Textes. Möglicherweise stellen Sie fest, dass einige Schriftarten zu klein oder zu groß sind, wenn Sie sie in ihrer Standardgröße anzeigen. Indem Sie den Text skalieren, können Sie ihn angenehmer lesen.
Beim Erstellen einer Schriftskala sind einige Dinge zu beachten.
a) Stellen Sie sicher, dass der gesamte Text auf Ihrer Seite dieselbe Größe hat. Dies umfasst sowohl den Fließtext als auch etwaige Überschriften oder andere Textelemente.
b) Wählen Sie eine Schriftgröße, die angenehm und gut lesbar ist. Möglicherweise müssen Sie mit verschiedenen Schriftgrößen experimentieren, um die für Sie richtige zu finden. Einige Schriftarten sehen in großer Größe gut aus, sind aber schwer lesbar, wenn sie verkleinert werden.
⚡ BOWWE Tip:
Es gibt viele kostenlose Online-Tools, mit denen Sie ganz einfach eine Schriftskala erstellen können. Einer davon ist type-scale.com .
8. Recherchiere und suche nach Inspiration
Finden Sie die besten Website-Designs mit Beispielen für aufregende Typografie. Auf Websites wie Dribbble finden Sie jede Menge Inspiration. Sie können auch Plattformen wie Pinterest , die es Ihnen ermöglichen, sogenannte Boards denen Sie alles sammeln können, was Sie inspiriert, und es mit Ihren Freunden oder Kollegen teilen können.
Es lohnt sich auch, auf Websites zu recherchieren, die Ihrer oder denen Ihrer Mitbewerber ähneln. Dann erfährst du, wie andere die besten Typografie-Prinzipien und wie du das auch kannst!
Sind Sie bereit, Ihre Website zu erstellen?
Verwenden Sie den bequemsten Website-Builder, dem Tausende von Designern und erstellen Sie Websites, die Ihnen Kunden bringen!
Jetzt anfangen!
Beste Regeln der Typografie - Zusammenfassung
Denken Sie daran, dass Typografie der Schlüssel zum Erfolg eines jeden erfolgreichen Website-Designs ist. Indem typografische Prinzipien befolgen , können Sie sicher sein, dass der Text nicht nur lesbar ist, sondern vor allem die richtige Stimmung erzeugt und den Stil Ihrer Marke getreu widerspiegelt.
Indem Sie die Best Practices für gute Typografie befolgen, die Sie in diesem Artikel finden, können Sie das Erscheinungsbild Ihrer Website und vor allem die Benutzererfahrung schnell verbessern.
Lesen Sie auch:
Karol ist ein Serienunternehmer, E-Commerce-Sprecher, unter anderem für die Weltbank, und Gründer von 3 Startups, in deren Rahmen er mehrere hundert Unternehmen beraten hat. Er war auch für Projekte der größten Finanzinstitute in Europa im Wert von über 50 Millionen Euro verantwortlich.
Während seines Studiums in Polen und Portugal erwarb er zwei Master-Abschlüsse, einen in Informatik und einen in Marketingmanagement. Er sammelte Erfahrungen im Silicon Valley und bei der Führung von Unternehmen in vielen Ländern, darunter Polen, Portugal, die Vereinigten Staaten und Großbritannien. Seit über zehn Jahren unterstützt er Startups, Finanzinstitute, kleine und mittlere Unternehmen dabei, ihre Funktionsweise durch Digitalisierung zu verbessern.
