Farbschema und Webtypografie

7 Regeln für die Auswahl eines Website Farbschemas

Farben sind das erste, was Menschen wahrnehmen, wenn sie deine Website besuchen, und dein Farbschema kann einen großen Einfluss auf Stil und Konsistenz haben. Erfahre wie du die richtige Farbpalette auswählen und sie in das Designsystem deiner Website einbauen kannst.
Wenn es um Branding geht, sind Farbschemata fast immer eine Schlüsselkomponente im Designsystem oder Styleguide einer Marke, einer Reihe von Richtlinien, die die Markenpersönlichkeit, die Markenbotschaft, die Markenbilder und die Inhalte einer Marke definieren. Das Branding ist, wie wir wissen, eine der wichtigsten Komponenten im Website Designprozess.

Was ist ein Website Farbschema?

Ein Website Farbschema ist die Sammlung von Farben, die ein Designer fur sein Website Design auswählt. Farbschemata werden auch als Farbpaletten bezeichnet und können so viele oder so wenige Farben enthalten, wie der Designer das für angemessen halt. Jede Farbe kann fur eine Vielzahl von Elementen auf der gesamten Website verwendet werden.
Abgesehen davon werden Farbpaletten im Allgemeinen in zwei Gruppen von Farben unterteilt: Primar und Sekundarfarben. Die Primarfarben sind in der Regel die dominanteren Farben auf der Website, die für Hintergrundfarben, Logofarben, Menüfarben usw. verwendet werden, während die Sekundarfarben oft als Akzentfarben und für andere Zwecke eingesetzt werden. Oft wirst du sehen, dass eine Farbpalette mehrere Schattierungen der gleichen Farbe enthält, was der Website ein abwechslungsreiches und dennoch konsistentes Gefühl im gesamten Design verleiht.
Konsistenz ist tatsächlich einer der grundlegenden Werte bei der Erstellung eines Farbschemas für deine Website. Da die Markenpersönlichkeit so entscheidend für eine erfolgreiche Website und ein erfolgreiches Unternehmen ist, festigt eine konsistente Farbpalette deine Markenidentität, da die wiederholte Verwendung von Farbe und Styling Assoziationen zwischen deiner Marke und deinem Publikum schafft.

7 Regeln für die Auswahl eines Website Farbschemas

1. Lerne das Farbrad kennen

Die Grundlagen der Farbtheorie beginnen mit dem Verständnis der drei Gruppen, die der Farbkreis umfasst: Primar, Sekundär und Tertiarfarben. Die Primarfarben Rot, Blau und Gelb sind die Grundfarben des Farbkreises und alle anderen Farben werden von diesen drei Farben abgeleitet. Als nächstes kommen die Sekundarfarben. Sekundarfarben sind die Farben, die man erhält, wenn man eine der drei Primarfarben miteinander mischt, also Orange, Grün und Violett. Schließlich gibt es noch die Tertiarfarben, die auch als „mittlere Farben“ bezeichnet werden. Diese erhält man, wenn man eine Primarfarbe und eine Sekundarfarbe kombiniert. Beispiele hierfür sind rot-orange, gelb-grün oder blau-violett.
Das Verständnis für die Beziehungen zwischen den Farben hört hier nicht auf.  Aber jetzt, da wir wissen, wie Farben entstehen, können wir definieren, miteinander „interagieren“, oder mit anderen Worten, wie sie zusammenwirken und wie wir unsere eigenen Farbkombinationen aufbauen.
Außerdem gibt es viele Möglichkeiten, wie Farben miteinander kombiniert werden können. Da kommen die Farbkombinationstypen ins Spiel.

2. Farbkombinationen

So wie jede Farbe für sich eine Persönlichkeit und Bedeutung hat, so gilt das auch für die Beziehungen zwischen den einzelnen Farben. Wenn du eine Farbkombination wählen möchtest, vermittele deinen Website Besuchern oft eine bestimmte Botschaft oder ein Konzept, je nachdem, wie die „Persönlichkeiten“ der Farben zusammenspielen.
Wenn du z. B. ein komplementäres Farbschema wählen möchtest, das Rot und Blau enthalt, steht Rot für Dringlichkeit und Starke dagegen steht Blau für Ruhe und Loyalität. Dein Endergebnis ist eine gemischte Atmosphäre von stärker bevorstehender Loyalität und Stabilität.

Analoge Farben: Seite an Seite

Analoge Farbschemata bestehen aus drei Farben, die auf dem 12 Speichen Farbrad direkt nebeneinander liegen. Ein analoges Farbschema besteht aus Rot, Rot-Orange und Hellorange, betont die lebendige Beziehung zwischen Rot und Hellorange.

Komplementare Farben: Gegensatze ziehen sich an

Beispiele für Komplementärfarben sind Rot und Grün, Blau und Gelb, Blau und Orange, Rot und Blau, neben vielen anderen. Diese Paare haben gemeinsam, dass sie zwei Gegensätze zueinander sind und du kannst sie identifizieren, indem du zwei Farben findest, die sich auf dem Farbkreis direkt gegenüberliegen.
Wenn dein Ziel darin besteht, dass Besucher eine Schaltfläche bemerken und daraufklicken, ist es sehr viel wahrscheinlicher, dass die Aufmerksamkeit der Benutzer auf eine Schaltfläche gelenkt wird, wenn du ein komplementäres Farbschema als Akzentfarben für deinen Text und den Hintergrund verwendest, da der Kontrast und die Differenzierung zwischen den beiden Farben sehr stark sind.

Triadische Farben: Gleichmäßige Abstande

Ein triadisches Farbschema wird als die grundlegendste Art von Farbschema angesehen und ist definiert als drei beliebige Farben, die sich in einem Winkel von 120 Grad zueinander auf dem Farbkreis befinden. In gewisser Weise können triadische Schemata als die flexibelsten der drei Kombinationstypen angesehen werden, da es viele Richtungen gibt, kann um 120 Grad zu messen. Anders als bei analog, das auf drei einigermaßen ähnliche Farben beschrankt ist, oder Komplementärfarben, die nur kontrastierende Farben sein können. Triadisch kann als eine Mischung aus beiden angesehen werden, da triadische Farbschemata sowohl analoge als auch komplementäre Farben kombinieren können und es mehr Raum für Kreativität gibt.

3. Farbpsychologie berücksichtigen

Die Welt der Farbpsychologie ist auf der Idee aufgebaut, dass bestimmte Farben bestimmte Gefühle und Emotionen auslosen, die wiederum bestimmte Handlungsablaufe auslösen. Wenn du bis jetzt noch nicht mit Farbpsychologie in Berührung gekommen bist, steht dir eine wahre intellektuelle Entdeckung bevor.
Sobald du verstehst, wofür jede Farbe steht, wird die Wahl der am besten geeigneten Farbpalette für deine Website zutiefst intuitiv. Wenn du z. B. eine Website für dein SPA Geschäft erstellst, ist es sinnvoll, Farben zu verwenden, die für Natur und Heilung stehen, wie z. B. Grün, und möglicherweise blau, das Frieden und Vertrauen symbolisiert.

4. Adresse Visuelle Hierarchie

Von den sechs Regeln bezieht sich die erste und wichtigste Regel von Shutterstock auf das Farbschema einer Website, und zwar wie folgt: „Setze einen Schwerpunkt mit Farbe.“ Daraus lässt sich ableiten, dass die Farbpalette eine der grundlegendsten Design Entscheidungen ist, wenn es um die visuelle Hierarchie deiner Website geht. Dies gilt für die Farben, die du für deinen Text, deine Schaltflachenfarben, deine Hintergründe und so weiter wählen kannst.
Wenn du einen Heldentext und darunter eine Beschreibung hast, ist die Wahl der Schriftfarbe entscheidend, ebenso wie die Wahl der Hintergrundfarbe.
Auf diese Weise ist der „wichtigere“ Text in einer dunklen Farbe und der „weniger wichtige“ Text in einer kontrastierenden, helleren Farbe.
Das Designprinzip der Farbpaletten als Determinante der visuellen Hierarchie gilt für fast alle visuellen Komponenten einer Website. Dies gilt für Textfarben, wie wir beschrieben haben, aber auch für Hintergrundfarben und Schaltflachenfarben. Um die Wichtigkeit eines bestimmten Buttons hervorzuheben, kann man oft eine Button Farbe wählen, die die Aufmerksamkeit des Benutzers am ehesten auf sich zieht und letztlich zu einer höheren Klickrate fuhrt.

5. Fokus auf Actionability, insbesondere Clickability

Aussehen ist nicht alles. Was wir damit meinen, ist, dass eine visuell ansprechende Farbpalette einer der grundlegenden Faktoren für erstklassiges Webdesign ist. Allerdings ist die Art und Weise, wie deine Farbpalette das Benutzererlebnis beeinflusst, ebenso wichtig. Wenn du möchtest, dass deine Website Besucher beim Durchsuchen deiner Website eine bestimmte Aktion ausfuhren, können die von dir gewählten Farben eine sehr dominante Rolle spielen.
Dies ist der visuelle Beweis dafür, dass die Wahl von zwei oder mehr Farben, die einen starken Kontrast zueinander aufweisen, wie z. B. Schwarz und leuchtendes Orange, eine gute Wahl für ein Farbschema ist. Alternativ kannst du auch mehrere Schattierungen einer Farbe wählen und sie auf eine Gruppe von Elementen anwenden, was vermitteln kann, dass diese Elemente zwar miteinander in Beziehung stehen, einige jedoch „wichtiger“ sind als andere.

6. Responsive Design im Auge behalten

Die Bedeutung von responsivem Design ist eine Faustregel für jeden Webentwickler. Aber was vielleicht weniger intuitiv ist, wenn es darum geht, wie du deine Website responsive gestalten, ist, dass Responsiveres über die Größe und das Layout deiner Website hinausgeht. Die Wahl der Farbpaletten tragt ebenfalls stark dazu bei, wie eine Website auf dem Handy aussieht.
Wenn du bei der Gestaltung deiner Farbpalette die Responsivität für mobile Endgerate im Hinterkopf behältst, wird dein Designprozess oft sehr viel einfacher. Auf diese Weise kannst du sicherstellen, dass deine Textelemente unabhängig von der Bildschirmgröße gleich gut lesbar sind und dass Icons und Schaltflachen auch auf mobilen Geraten genauso gut sichtbar sind wie auf dem Desktop.
Angesichts der Tatsache, dass mobile Bildschirme viel kleiner sind als die Desktop Ansicht, wirst du möglicherweise feststellen, dass du für mobile Geräte weniger Farben verwenden musst als für den Desktop. Die kleinere Oberfläche könnte überwältigend wirken, wenn sie zu viele Farben hat, doch der zusätzliche Platz, den du auf dem Desktop hast, kann eine größere Anzahl von Farben verkraften, ohne dass sie zu überladen wirken.
Eine weitere hilfreiche Methode, um sicherzustellen, dass du nicht zu viele Farben auf deiner mobilen Benutzeroberfläche hast und trotzdem eine visuelle Hierarchie und Einzigartigkeit erhältst, ist es, mehrere Schattierungen einer Farbe zu deinem Farbschema hinzuzufügen. Die Ähnlichkeiten zwischen den Farbtonen sind ähnlich genug, um die mobile Benutzeroberflache sauber und kohärent aussehen zu lassen, und doch unterschiedlich genug, um deine Website interaktiv und ansprechend zu gestalten.

7. Umfasse neutrale Farben

Obwohl sie vielleicht weniger aufregend sind, erstellte neutrale Farben eine Notwendigkeit für jedes korrekt Farbschema. Selbst wenn du sie nur für Textelemente verwendest, sollte jede professionelle Farbpalette neutrale Farben enthalten. So schon nicht neutrale Farben auch sind, Website Besucher werden an der einen oder anderen Stelle eine „Pause“ von visuellen Reizen brauchen, besonders wenn sie versuchen, qualitative Informationen durch den Text zu verarbeiten.

Befolgung der Regeln

Um diese Konsistenz zu erreichen, gibt es, wie bereits erwähnt, viele Prinzipien, die es zu beachten gilt. Dazu gehören, um nur einige zu nennen, das Navigieren im Farbrad, das Erforschen verschiedener möglicher Farbkombinationen, die Berücksichtigung der Farbpsychologie, die Priorisierung der visuellen Hierarchie, der Handlungsfähigkeit und der Reaktionsfähigkeit und schließlich die Verwendung neutraler Farben. Wenn eine schöne Farbpalette auf einer Website klug eingesetzt wird, werden Besucher nicht nur gerne durch deine Website navigieren, sondern auch einen bleibenden Eindruck hinterlassen.

Webtypografie: Der komplette Leitfaden für Designer

Die Bedeutung der Webtypografie ist für jede Website entscheidend und das Verständnis dieses Themas wird dir gesamten Web Design Prozess revolutionieren. Lerne alles, was es über Typografie und Webgestaltung zu wissen gibt, mit diesem umfassenden Leitfaden.
Obwohl ihre starke Bedeutung oft übersehen wird, spielt die Typografie eine fundamentale Rolle bei der Weberstellung das bedeutet Branding, visuelles Design, User Experience, User Interface, Content Strategie. Aber bevor wir beginnen, was  Webtypografie und warum  sie wichtig ist? Werden wir in diesem Artikel  alles abdecken, was du als Webentwickler über Typografie wissen müssen. Wir sprechen über Konzepte, Prinzipien, Terminologien, Richtlinien für die Auswahl der besten Schriftarten und natürlich auch über Handlungsmöglichkeiten.

Bevor wir uns mit den Grundlagen der Typografie im Webdesign befassen, sollten wir uns mit der Frage befassen, warum Typografie so wichtig ist.
Nach der Lektüre dieses Artikels bist du gerüstet und befähigt, dein Wissen und dein Verständnis für das Wesen der Webtypografie umzusetzen und zu verstehen, wie sie über jede einzelne Website entscheiden kann.

Was ist Webtypografie?

Webtypografie ist die Kunst und Technik der Anordnung von Schrift auf einer Website. Dabei geht es nicht nur um das Design oder die Komposition der Buchstaben und Zeichen und deren Anordnung. Natürlich geht es um diese Dinge, aber es geht auch um Kommunikation, visuelle Identität, Brand Persona, Usability und vieles mehr.
Die Bedeutung der Webtypografie ist für jede Website entscheidend und das Verständnis dieses Themas wird deinen gesamten Web Design Prozess revolutionieren. Lerne alles, was es über Typografie und Webgestaltung zu wissen gibt, mit diesem umfassenden Leitfaden. Bevor wir uns mit den Grundlagen der Typografie im Webdesign befassen, sollten wir uns mit der Frage befassen, warum Typografie so wichtig ist. Wenn Menschen eine Website besuchen, um den Text zu lesen, wollen sie letztlich Informationen über Sie erfahren und wir wissen, dass Worte wichtig sind.
Als Webentwickler wissen wir definitiv zu schätzen, dass die Präsentation gleichwertig zum Inhalt einer Website ist. Genauso wie das visuelle Design, die interaktiven Funktionen und die Gesamt Funktionalität einer Website die Qualität einer Website bestimmen, gilt das Gleiche für die Typografie.

Die Herausforderungen der Webtypografie

Das Verstehen des Bildschirmlesens im Vergleich zum Lesen von Druckschriften
Auf den ersten Blick kann man denken, dass es keinen großen Unterschied zwischen dem Lesen eines Bildschirmes und dem Lesen von Papier gibt. Schließlich handelt es sich bei beiden um visuelle Verarbeitungsprozesse, bei denen du Informationen durch das Lesen von Buchstaben auf einem Hintergrund aufnimmst. Aber, denke noch einmal nach. Die Unterschiede zwischen Print und Webdesign und deren jeweiligen Leseerfahrungen bist du in der Tat zahlreich.
Logischerweise besteht der grundlegendste Unterschied zwischen Print und Webdesign darin, dass Print ein physisches, greifbares Objekt mit festen, statischen Inhalten ist. Im Gegensatz dazu ist der Inhalt auf dem Bildschirm dynamisch und verändert sich ständig, da der Bildschirm ein adaptives Medium ist. Aus einer Verhaltensperspektive betrachtet, führen wir beim digitalen Lesen mehr Scans und Sprunge durch. Das könnte daran liegen, dass wir nach Schlüsselwörtern suchen, um so viele Informationen wie möglich in kürzester Zeit zu erhalten.

Anpassung an unterschiedliche Bildschirmgrößen

In dem Moment, in dem wir als Webentwickler die Worte „verschiedene Bildschirmgroßen“ hören, denken viele von uns oft sofort an Responsive Design. Und wenn wir responsive Design sagen, meinen wir nicht nur Websites, die sowohl auf dem Desktop als auch auf mobilen Geraten gut aussehen.

Wie hängt das nun mit der Typografie zusammen?

Das bedeutet, dass deine Designs, einschließlich der Typografie deines Textes (seien es Titel, Überschriften, Absatze, Schaltflächentexte usw.) alle müssen auf dem Handy gut aussehen. Du hast einen kleineren Bildschirm, mit dem du arbeiten kannst, aber nicht unbedingt weniger Text. Das bedeutet oft, dass du ein Typografie Schema entwerfen musst, das flexibel ist und sich an verschiedene Bildschirmgroßen anpassen lasst. Diese Priorität kann sich auf die Schriftfarbe, die Schriftart, das Schriftgewicht, die Schriftgroße und viele andere Design Entscheidungen auswirken.
Sobald du ein tieferes Verständnis für diese einzelnen Typografien Komponenten hast, kannst du dein Wissen auf die Gestaltung eines flexiblen Layouts anwenden, das responsive Typografie Entscheidungen beinhaltet.
Und vergiss nicht die Beziehung zwischen Typografie und Benutzererfahrung. Die Notwendigkeit für responsive Typografie ergibt sich oft aus der Notwendigkeit, die Umstände des Website Besuchers zu berücksichtigen, wie und wo er den Text auf deiner Website sieht.

Berücksichtigung der Bildschirmauflösung

Im allgemeinsten Sinne bezieht sich die Bildschirmauflösung auf die Anzahl der Pixel. Mit anderen Worten, die Anzahl der Punkte, die ein Bildschirm pro Zoll anzeigt. In der Praxis ist die, 1024px horizontal und 768px vertikal.
Wie sich die Große der Auflösung auf das auswirkt, was wir tatsächlich auf dem Bildschirm sehen: Niedrigere Auflösungen zeigen Elemente in einer größeren Große auf dem Bildschirm an, um die Anzeige so scharf wie möglich zu halten, dies bedeutet jedoch, dass weniger von der Seite auf den Bildschirm passt. Im Gegenzug können Monitore mit höherer Auflösung mehr von der Website anzeigen, z. B. den gesamten Falz plus ein wenig unterhalb des Falzes – was aber auch dazu führt, dass die Elemente auf der Seite kleiner, aber schärfer aussehen.
Wenn wir im Zusammenhang mit Typografie sagen, dass ein Designer die Bildschirmauflösung berücksichtigen und die Schriftgröße basierend auf der Auflösung wählen muss, bedeutet dies, dass er das optische Gewicht wählen muss, um sicherzustellen, dass die Schrift definitiv bei jeder Bildschirmgröße und Auflösung wie vorgesehen funktioniert.
Responsive Text selbst ist das Designprinzip, dass Texte auf einer Webseite auf einer Vielzahl von Geraten und Bildschirmgrößen gut lesbar sein sollten. Responsive Typografie zu erstellen, bedeutet nicht nur, einen Text zu wählen, der sich in der Große zwischen verschiedenen Bildschirmen ändert. Es geht auch um die Lesbarkeit, die eine Beziehung zwischen Text und den ihn umgebenden Elementen erfordert, wobei die Große jedes Elements im Verhältnis zu den umgebenden Elementen bestimmt wird.

Sicherstellen der Genauigkeit durch Monitorkalibrierung

Wenn wir von Kalibrierung sprechen, meinen wir damit die Kalibrierung deines Monitors, damit er Farbe und Kontrast absolut genau anzeigt. Auf diese Weise wird deine Arbeit von den Website Besuchern genauso angezeigt, wie du es bei der Gestaltung beabsichtigt hast.
Der Hauptgrund, warum die Monitorkalibrierung bei der Gestaltung deiner Websitetypografie so wichtig ist, liegt darin, dass sowohl die Schriftfarbe als auch der Kontrast zwischen Text und Hintergrund beeinflusst werden können. Das Letzte, was du willst, ist ein schlechter Kontrast zwischen deiner Schriftfarbe und dem Hintergrund. Wenn das menschliche Auge Schwierigkeiten hat, zwischen dem Text und dem Hintergrund zu unterscheiden, kann es schnell aufgeben, den Text zu lesen, und daher deine Website und oder deren Inhalt viel schneller aufgeben, als du gehofft hast.

Die wichtigsten Elemente der Webtypografie

Wenn wir beginnen, die Bedeutung der Typografie im Webdesign zu begreifen, ist einer der ersten Designbegriffe, den wir verstehen und beherrschen müssen: generische Schriftfamilien. Die Schriften und Fonts, aus denen wir jedes Mal wählen, wenn wir den Text auf unseren Websites gestalten, können jeweils einem von zwei Hauptstilen zugeordnet werden: Serif, Sans Serif oder Cursive.

Serifen

Im technischsten Sinne haben Serifen Schriftfamilien dekorative Striche oder, die das Ende eines Buchstabenstamms abschließen. Diese Striche können unterschiedlich schwer sein, sodass einige Bereiche eines Buchstabens dicker oder dunner sind als andere. Als kollektive Stilkategorie sind Serifenschriften weithin dafür bekannt, dass sie glatt, abgerundet und dekorativ sind, werden sie häufig für lange Textkörper verwendet, z. B. für Bücher, Zeitungen, viele Zeitschriften usw. Dies liegt vor allem daran, dass Serifenschriften in kleinen Textgrößen gut lesbar sind.

Einige der bekanntesten Serifenschriftfamilien sind:

• Times New Roman
• Georgia
• Palatino
• Garamond
• Playfair Display

Wie du vielleicht schon bemerkt hast, verwenden Marken und professionelle Unternehmen oft Serifen für ihr Logo, wenn sie serioser, etablierter, formeller usw. erscheinen wollen. Beispiele für diese Geschäftstypen sind Anwaltskanzleien, Medienpublikationen, Versicherungsgesellschaften, Arztpraxen und dergleichen mehr.

Sans Serif

Sans Serif Schriften sind solche, die keine ausladenden Merkmale (Serifen) am Ende ihrer Striche haben. Diese Bezeichnung stammt eigentlich aus dem Französischen und bedeutet sans (ohne) serif. Diese Schriften haben in der Regel eine gleichmäßigere Dicke in den verschiedenen Teilen jedes Buchstabens und werden verwendet, um minimalistisches Design, Modernität und vor allem Schlichtheit zu vermitteln.
Um auf unsere Diskussion über die Unterschiede zwischen dem Lesen am Bildschirm und dem Lesen in der Druckausgabe zurückzukommen, ist es wichtig zu beachten, dass Serifenschriften eher für Computerbildschirme verwendet werden – z. B. für Websites, Blogs, Software usw. In diesen Anwendungsfällen werden serifenlose Schriften eher für die Anzeige verwendet, z. B. für Überschriften, Untertitel, Schaltflächentexte usw. als für Fließtexte.

Einige der an den häufigsten verwendeten serifenlosen Schriften sind:

• Avenir
• Roboto
• Offene Sans
• Source Sans Pro
• Lato
• Montserrat
• Proxima Nova

Der Unterschied zwischen einer Schriftfamilie und einer Schriftart

Der Begriff Schriftart kann auch als Schriftfamilie bezeichnet werden: eine Reihe von Zeichen mit demselben Design in unterschiedlichen Größen und Gewichtungen. Schriftarten sollten nicht mit Fonts verwechselt werden, da ein Font eine grafische Darstellung des Textzeichens der Schrift ist. Im Wesentlichen ist eine Schriftart eine Familie verwandter Schriftarten, während sich Fonts auf die Schriftstarken, breiten und Stile beziehen, die jeweils eine Variation dieser Schriftart darstellen.

Warum die Textformatierung wichtig ist

Die meisten von uns sind mit den klassischen Optionen zur Textformatierung vertraut, um wichtige Konzepte in einem Dokument hervorzuheben, wie z. B. kursiver Text, fetter Text, unterstrichener Text, usw. In der Typografie bedeutet die Verwendung von Textformatierungen zur Hervorhebung bestimmter Wörter, dass diese Formatierungsoptionen effektiv genutzt werden, um die ausgewählten Wörter hervorzuheben relativ zu den anderen Wörtern im Textkörper. Die Textformatierung ermöglicht es den Lesern, auf einfache Weise zwischen den Arten der Betonung zu unterscheiden, die sie auf ein bestimmtes Wort oder einen Satz legen möchten. In der Praxis werden unterstrichene und fettgedruckte Wörter oder Sätze oft in einem Werk verwendet, um speziell definierte Begriffe, Abschnitte, Kapitelüberschriften, Unterüberschriften, Tabelleneinträge usw. hervorzuheben. Kursivschrift wird typischerweise verwendet, um die Titel von kreativen Werken, wie Bücher, Zeitschriftenartikel und Filme – zu kennzeichnen. Die Standardisierung dieser Verwendungen auf einer Website oder in Inhaltsrichtlinien sorgt für mehr Klarheit und Sauberkeit auf der Seite.

Textausrichtung

Die Art und Weise, wie du deinen Text ausrichtest (links, rechts, im Blocksatz oder zentriert), kann sich direkt auf die Lesbarkeit deines Inhalts und seine visuelle Hierarchie auswirken, weshalb dies eine Designentscheidung ist, die einen sorgfältigen Denkprozess erfordert. Typografie im Design ist, wie der Blog in seiner Diskussion über die Lesbarkeit deiner Benutzeroberfläche beschreibt, „die Kunst, ästhetischen Text mit der Fähigkeit, ihn schnell zu lesen, in Einklang zu bringen.“ Bei der Tugend der Textausrichtung geht es in diesem Fall um die Lesbarkeit: Sie verankert den Leser, so dass er weiß, wo jede Zeile beginnen wird, und es ihm leichter und schneller fällt, den Text zu lesen und Zeit auf der Seite und auf deiner Website im Allgemeinen zu verbringen.

Buchstabenabstände

Der Buchstabenabstand, auch bekannt als „Tracking“, ist die Einstellung des horizontalen Leerraums zwischen den Buchstaben in einem Wort oder in einem Textblock. Wenn wir den Buchstabenabstand anpassen, beeinflussen wir die visuelle Dichte eines Wortes, eines Satzes oder eines Absatzes. Also wir entscheiden, ob die Wörter kompakter erscheinen oder ob sie „luftiger“ wirken sollen. Designer vergrößern oft den Weiß raum zwischen den Buchstaben, um die Lesbarkeit des Textes zu verbessern.

Zeilenabstand

Der Zeilenabstand ist der Begriff für den vertikalen Abstand zwischen zwei Textzeilen. Ähnlich wie die Textausrichtung und der Buchstabenabstand kann auch der Zeilenabstand die Lesbarkeit eines Textes stark beeinflussen. Wenn der Zeilenabstand so eingestellt ist, dass ein Text lesbar ist, bedeutet dies im Wesentlichen, dass das Auge des Lesers leicht von einer Textzeile zur nächsten wechseln kann.

Zeilenlänge

Bei der Zeilenlange geht es darum, die „richtige“ Anzahl von Zeichen in jeder Zeile zu finden, damit dein Text so gut wie möglich lesbar ist. Wenn eine Zeile zu breit ist, besteht die Gefahr, dass der Leser sich nur schwer auf den Text konzentrieren kann, da es schwierig ist, zu erkennen, wo die Zeile beginnt und endet. Auf der anderen Seite können zu kurze Zeilen den Rhythmus des Lesers unterbrechen, was bedeutet, dass sein Auge zu oft hin und her wandern muss. Um eine Situation von „zu lang“ oder „zu kurz“ zu vermeiden, liegt die empfohlene Zeilenlange zwischen 45-85 Zeichen pro Zeile.

Wie du die perfekte Schriftart für deine Website auswählen kannst:

Die Entscheidung, welche Schriftarten für deine Website am besten geeignet sind, hängt von mehreren Faktoren ab und ist nicht nur eine Frage von „diese gefällt mir am besten.“
Als Webentwickler ist es wichtig, dass wir die folgenden Faktoren bei der Auswahl der Schriftart für Webinhalte und für Websites im Allgemeinen berücksichtigen:

1. Überlege dir, wie du deine Marke darstellen möchtest

Die Typografie einer Marke ist tatsächlich einer der stärksten Informanten dessen, was die Marke ausmacht, in Bezug auf Charakter, Differenzierung und so weiter. Letztlich wird die Stimme deiner Marke durch Kunst und Buchstaben verbalisiert und visualisiert. Im obigen Beispiel der Website eines Personal Trainers ist die gewählte Schriftart, Racing Sans One, eine schwergewichtige, serifenlose Schrift mit sehr wenig Kontrast innerhalb der einzelnen Buchstaben. Der Text ist fett und dominant, was gut zu dem Fachgebiet und der Persönlichkeit eines Personal Trainers passt, der sich auf Fitness und intensives Training spezialisiert hat, er vermittelt ein Gefühl von Starke, Kraft und Robustheit.

Aktionspunkt:

Denke sorgfältig über deine Markenpersönlichkeit nach. An welche Art von Assoziationen, Werten und Adjektiven sollen Menschen denken, wenn sie deine Website und Marken sehen?

2. Entscheide sich zwischen Serif oder Sans Serif

Die Wahl zwischen serifenlosen und serifenbetonten Schriften ist wie die Wahl zwischen Vanille und Schokolade, es ist eine grundlegende Entscheidung, die sich auf dein gesamtes Typografie Schema auswirkt. Es ist der grundlegendste und grundlegendste Auswahlprozess, den du für deine Website Schriften auswählen kannst. Bei der Erklärung, wann man Serifen verwenden sollte, gibt der Adobe Blog an, dass Serifenschriften hauptsächlich mit „autoritativen, professionellen Marken … ein bisschen mehr altmodisch“ assoziiert werden. Das ist es, was Serifenschriften zu einer bevorzugten Wahl für Websites wie Nachrichtenseiten, Buchladen, Universitäten und dergleichen macht.
Serifenlose Schriften hingegen gelten als die moderne Wahl, die mit „innovativem Design, Kommerz und dem Versuch der Moderne, mit der Vergangenheit zu brechen“ assoziiert wird.

Aktionspunkt:

Werfe einen Blick auf andere Websites in deiner Branche oder deinem Geschäftsfeld und siehst du, welche Schriftart dort am häufigsten verwendet wird: Serifen oder Sans? Dies kann dir eine Vorstellung davon geben, was in deiner Nische am modischsten ist und welche Schriftart für deine Betrachter am sinnvollsten wäre.

3. Überprüfe es, ob deine Schriften gut zusammenpassen

Die Kombination von zwei verschiedenen Schriftarten, jede mit ihrem eigenen Stil und ihrer Einzigartigkeit, kann die Markenbotschaft, die du vermitteln willst, verstärken. Markenpersönlichkeiten sind facettenreich. Wenn du also zwei unterschiedliche Schriftarten verwendest, von denen jede ihren eigenen Charakter und Stil hat, illustrierst du die einzigartige, dynamische Erfahrung, die deine Marke darstellt.

Aktionspunkt:

Teste mehrere Schriftartenpaare, um zu sehen, welche dir am besten gefällt. Es wird empfohlen, sich zuerst für eine primäre Schriftart zu entscheiden und dann Optionen für eine sekundäre Schriftart zu erkunden und dein Lieblingspaar auszuwählen.

4. Achte auf Schriftgroße, Schriftstärke und Zeilenlange auf

Du kannst die Lesbarkeit als den „Nordstern“ deiner typografischen Entscheidungen betrachten. Wie bereits erwähnt, sind Große und Gewicht der Schrift sowie die Zeilenlange und der Zeilenabstand, die du in einem Textelement verwenden, ein Balanceakt, um einen leicht lesbaren Text zu erzeugen.

Aktionspunkt:

Die „ideale“ Zeilenlange für optimale Lesbarkeit in der Webtypografie liegt bekanntlich zwischen 45 und 85 Zeichen. Wenn du Schwierigkeiten hast, deinen Text innerhalb dieses Bereichs zu halten, solltest du verschiedene Kombinationen von Schriftgroße und starke ausprobieren, um zu sehen, wie sie sich gegenseitig beeinflussen. Eine Schriftgroße von 18px konnte 85 Zeichen in einer Zeile uberschreiten, aber wenn du der Schrift eine etwas kleinere Große oder ein etwas leichteres Gewicht gibst, konnte sich das zu deinen Gunsten auswirken.

5. Respektieren Sie die Rolle der visuellen Hierarchie

Typografische visuelle Hierarchie ist eigentlich ein uraltes Konzept, das dem Website Design seit Jahrzehnten vorausgeht. Wie wahr das ist, zeigt ein Blick auf die Medienbranche und ganz besonders auf Zeitschriften.
In Bezug auf die Handlungsfähigkeit ist die „Nimm mich, ich gehöre dir“ Aussage die wichtigste, daher ist sie der größte und schwerste Text auf der Seite. Er ist riesig, zentriert, hoch, schwer, serifenlos, ohne Schnörkel, er will unbedingt beachtet werden. Ganz zu schweigen davon, dass der Kontrast von Weiß aufleuchtendem Rot eine großartige Möglichkeit für einen Text ist, sich selbst als „zuerst zu sehen“ zu deklarieren.

Aktionspunkt:

Versetze dich in die Lage deiner Website Besucher und Leser welche Wörter sollen sie als erstes oder sogar sofort bemerken? Und vor allem, was ist das anspruchsvollste, visuell ansprechende Format, um diese Worte zu kommunizieren?

6. Investiere in ein Design System

Bei Elementor definieren wir Designsysteme als „die einzige Quelle der Wahrheit, die die Basis bildet, um die herum ein Team eine Website gestaltet.“ Die Verwendung eines Designsystems ermöglicht es Webentwicklern, sowohl neue als auch bestehende Websites schnell und effizient zu entwerfen und zu bearbeiten und damit deinen Workflow und letztlich die Zeit zu verkürzen, die du benötigst, um deine Website zum Laufen zu bringen. Das Hinzufügen des Typografie Systems deiner Website oder deiner Marke zu deinem Designsystem garantiert, dass jedes Textelement auf deiner Website mit den anderen konsistent ist und sorgt für eine professionelle, organisierte und umfassende Website Oberflache.

Aktionspunkt:

Mache die das Leben leichter, indem du unsere neue Funktion „Globale Schriften“ nutzt, mit der du alle Typografie Einstellungen deiner Website global konfigurieren kannst.

7. Kennenlernen von CSS-Stylesheets

In der empfehlenswertesten Praktiken, um die Typografie deiner Website zu perfektionieren und aufzupolieren, ist die Verwendung von CSS-Stylesheets. Die CSS-Eigenschaften, die zur Gestaltung von Text verwendet werden, sind grundlegend für die Webtypografie Schriftstile und Textlayoutstile. Es gibt zwar viele Möglichkeiten, deine Schrift und Textlayoutstile mit einfacheren Methoden festzulegen, aber CSS-Stylesheets haben in der Tat einen Vorteil gegenüber diesen einfacheren Methoden Stylesheets bieten eine bessere Kontrolle über den genauen visuellen Stil deiner Websitetypografie, wie z. B. Überschriften, Absätze, Listen und so weiter. Wenn wir von besserer Kontrolle sprechen, meinen wir damit, dass CSS-Stylesheets es wahrscheinlicher machen, dass dein Design genauso aussieht, wie du es beabsichtigt hast und nicht durch Einschränkungen wie Geräte Kompatibilität und Bildschirmgroße, Browser Kompatibilität, auf einem Gerät verfügbare Schriftarten und ähnliche Faktoren beeinflusst wird. Letztlich ersparen dir CSS-Stylesheets eine Menge Arbeit, weil sie das Layout mehrerer Webseiten auf einmal steuern. Das bedeutet, dass du mit einem Stylesheet das Aussehen einer ganzen Website ändern kannst, indem du nur eine Datei änderst.

Aktionspunkt:

Nutze die Registerkarte „Custom CSS“ in den Widgets des Elementor-Editors. Dies kann ein einfacher, unkomplizierter Weg sein, um die Vorteile von CSS-Stylesheets zu nutzen, ohne einen umfangreichen Kodierungsprozess zu deinem Workflow hinzuzufügen.

8. Bleibe auf dem Laufenden mit Typografie Nutzungsstandards

Wie wir bereits betont haben, sind Lesbarkeit, Lesbarkeit und das gesamte Leseerlebnis der „Nordstern“ der Typografie Entscheidungen. Dies ist ein Grund, warum die Schriftgroße eine große Rolle sowohl beim Webdesign als auch bei der Benutzererfahrung spielt. Hinzu kommt, dass Menschen das mögen, was sie gewohnt sind, wenn Leser daran gewohnt sind, Fließtexte in einer gängigen Große zu lesen, werden sie dies auch auf deiner Website erwarten. Dies sind nur einige der vielen Grunde, warum wir empfählen, konventionelle Schriftgroßen für deine Website zu verwenden. Natürlich gibt es Spielraum für Flexibilität und Website Trends entwickeln sich ständig weiter. Es lohnt sich, zu beobachten, wie sich die Konventionen der Schriftgroßen im Laufe der Zeit verändern.

Aktionspunkt:

Halte dich an konventionelle Schriftgroßen, wenn du entscheidest, wie groß oder klein deine Textelemente sein sollen. So sehr Webentwickler auch von Kreativität leben, bei der Wahl der Schriftgroßen sollte man das Rad nicht neu erfinden.

Auf die Plätze, fertig, tippen

Jetzt bist du offiziell bereit, dich in die Welt der Typografie zu stürzen. Die Auswahl an Schriftarten ist endlos, und so auch die Art und Weise, wie du mit ihnen arbeiten kannst. Wir hoffen, dass die Konzepte und Maßnahmen, die wir dir vorgestellt haben, helfen werden, deinen Design Workflow zu erleichtern.
Denk daran, dass Lesbarkeit und Verständlichkeit an erster Stelle stehen, aber vernachlässige nicht, wie wichtig es ist, dass deine Schriftart und Botschaften mit deiner Marke und der Persönlichkeit, übereinstimmen.

Zusammengefasst von Nata Uchava
Von Website Freiburg

Quellen, unsere Websoftware Partner Elementor Pro:
www.elementor.com/blog/website-color-schemes/
www.elementor.com/blog/guide-to-web-typography/