Webdesign für Coaches: Warum die Schriftart so wichtig ist

von Kerstin Boll | 7. April 2023

Tipps für die Auswahl der perfekten Schriftart, um deine Coaching-Webseite professionell und ansprechend zu gestalten.

Die Schriftart ist ein oft unterschätztes Gestaltungsmittel deiner Website. Ist die Schriftart gut ausgewählt und professionell eingesetzt, lädt sie zum Bleiben ein. Die Texte lassen sich leicht und angenehm lesen. Das Schriftbild wirkt insgesamt harmonisch. Deine Besucher und Besucherinnen haben Lust auf deiner Website zu stöbern und sich mit deinen Inhalten zu beschäftigen.

Schlecht ausgewählte oder unpassend eingesetzte Schriftarten hingegen machen das Lesen schwer. Eine gute Schrift fällt nicht weiter auf. Eine schlechte umso mehr.

Das musst du wissen

Die Schriftart ist Teil deiner Brand

Wie möchtest du dich deinem Publikum vorstellen: modern, feminin, elegant, innovativ, vertrauenswürdig, verspielt – oder was ist dein Stil? Durch die Auswahl deiner Schriftart kannst du die gewünschte Wirkung erzielen.

Wenn du magst, schau dich bei CANVA um: Dort findest du mehr über Schriftarten (Fonts) und ihre Botschaften: 18 professionelle Fonts für deine Website

Die weiße Fläche ist ebenso wichtig wie die Schrift

Die schönste Schriftart nützt dir nichts, wenn sie ungeschickt eingesetzt wird. Zu kleine Buchstaben, lange Zeilen oder enge Abstände zwischen den Zeilen erschweren es deinen Lesern und Leserinnen, den Inhalt deines Textes zu erfassen. Eine gut lesbare Schrift braucht Luft zum Atmen – genug, aber nicht zu viel. Hier ein paar Tipps zur Orientierung:

Schriftgröße

Die empfohlene Schriftgröße für Fließtexte liegt bei 16 bis 18 Pixel. Der Fließtext legt die 100-Prozent-Marke fest. Alles andere wie die Überschriften orientieren sich daran.

Überschriften sind ein Mittel, Texte zu strukturieren und eine Hierarchie herzustellen. Sie sollten sichtbar größer sein als der Fließtext, damit sich deine Leser und Leserinnen orientieren können. Versuche es einmal mit diesen Maßen.:

• H1-Überschrift zwischen 180 und 200 Prozent.
• H2-Überschrift zwischen 130 und 150 Prozent.
• H3-Überschrift in etwa so groß wie der Fließtext.

Je größer der Unterschied zwischen Überschrift und Fließtext, desto dramatischer die Wirkung.

Zeilenhöhe

Die Zeilenhöhe definiert den weißen Raum zwischen den Zeilen. Dieser Raum ist wichtig für die Lesbarkeit: Stehen die Zeilen zu eng zusammen, wird das Lesen mühsam. Ist der Abstand zu groß, wirkt das Textbild unharmonisch.

Die Zeilenhöhe beträgt im Schnitt das 1,5-fache der zugehörigen Schrift. Ist der Fließtext 16 Pixel hoch, beträgt die Zeilenhöhe 24 Pixel.

Zeilenlänge

Die ideale Zeilenlänge liegt zwischen 75 und 80 Zeichen pro Zeile. Deine Leser und Leserinnen sollten in der Lage sein, am Ende einer Zeile gleich den Anfang der nächsten Zeile zu erfassen.

Die gekonnte Verwendung von Schriften ist keine exakte Wissenschaft. Das Gesamtbild entscheidet. Zudem hängen die richtige Schriftgröße und der Zeilenabstand von der Schriftart ab. Manche Schriftarten wirken größer, andere kleiner.

Der Golden Ratio Typography Calculator kann dir weiterhelfen. Er rechnet Abstände, Zeilenlauflängen und Schriftgrößen in Abhängigkeit der ausgewählten Schriftart aus.

Die perfekte Schriftart für deine Website: Best Practices

Serifen-Schrift vs. serifenlose Schrift

Serifen sind die kleinen An- und Abstrichen am Anfang oder am Ende eines Buchstabens. Serifen-Schriften eignen sich für Bücher, Zeitschriften und andere Print-Erzeugnisse. Für das Internet haben sich Schriftarten ohne Serifen bewährt.

Websichere Schriftarten

Websichere Schriften sind solche, die ab Werk auf Desktop-Rechnern, Tablets oder Smartphones installiert sind. Sie gelten als sicher, weil sie auf fast allen Geräten der Welt geladen und korrekt angezeigt werden können – unabhängig von Ort und vom Device.

Zu den verbreitetsten „sicheren“ Schriftarten zählen:

• Arial
• Verdana
• Helvetica
• Tacoma
• Trebuchet MS
• Times New Roman
• Georgia
• Garamond
• Courier New
• Brush Script MT

Die Gestaltungsmöglichkeiten sind allerdings eingeschränkt. Solltest du dich für eine exklusive Schriftart entscheiden, kann es sein, dass diese auf dem Endgerät deines Besuchers nicht installiert ist. Ruft dein Besucher deine Website auf, muss sein Gerät sowohl Inhalt als auch die Schrift herunterladen.

Je mehr Daten, desto langsamer wird die Seitenladegeschwindigkeit. In der Regel lässt sich der Nachteil verschmerzen, doch wenn dein Besucher ein altes System verwendet oder die Leitung langsam ist, kann dies zu einem Störfaktor werden.

Viele Web-Profis empfehlen deshalb, eine „schöne“ Schriftart und eine Standard-Schriftart als Fallback zu verwenden.

Google-Schriften und die DSGVO

Google bietet unzählige Schriften an, eine wahre Fundgrube! Diese sogenannten Web-Fonts liegen im Netz auf einem Google-Server. Du kannst sie auf deiner Website verwenden, ohne sie fest zu installieren. Die Schriften bleiben im Netz.

Ruft ein Besucher deine Website auf, geht zugleich ein Signal an den Google-Server. Die Schrift wird geliefert, zusammen mit den Inhalten deiner Website. Der Browser setzt beides zusammen.

Mit diesem Prozess verlangsamt sich die Ladegeschwindigkeit deiner Website und außerdem ist Google im Spiel. Damit entsteht ein Konflikt mit der DSGVO, der Datenschutzgrundverordnung.

Ein Ausweg besteht darin, die verwendeten Google-Schriftarten herunterzuladen und fest in deinem System zu installieren. Wenn dein Besucher deine Seite lädt, ist Google nicht mehr involviert.

Du weißt, ich bin keine Rechtsanwältin. Wende dich für verbindliche Informationen bitte an Experten, wie eRecht24.

Vorsicht, Fehler!

Verwende nie mehr als drei Schrifttypen pro Website

Auch wenn die Möglichkeiten vielfältig und fantastisch sind: Weniger ist mehr. Viele Websites kommen mit zwei Schriftarten aus.

Zeilenumbrüche

Unpassende Zeilenumbrüche können das Gesamtbild sehr beeinträchtigen. Ich hatte Probleme, bis der Techniker meines Vertrauens folgenden Code ins CSS schrieb:

Seither werden automatische Silbentrennungen erzeugt. Zumindest ich sehe das so und auf den meisten Geräten sollte es ebenso sein. Es gibt jedoch keine absolute Sicherheit. Wenn du mehr über Zeilenumbrüche lesen möchtest, schaue hier nach: Silbentrennung im Browser mit CSS, HTML oder JavaScript

Ich finde: Die Auswahl deiner Schriftart ist ein spannendes Thema und Mittel der Gestaltung. Wenn du tiefer einsteigen möchtest, lies bei CANVA weiter: Your ultimate guide to understanding typography

Wie geht es weiter?

Farbschema für deine Website

von Kerstin Boll | 5. April 2023

Fünf Ideen zur Auswahl deines Farbschemas

Das Farbschema ist ein aufmerksamkeitsstarkes Thema bei der Gestaltung einer Berater- und Coach-Website. Auch auf diesem Blog hat der Artikel über das Farbschema auffallend hohe Zugriffsraten.

Es ist aber auch zu schön, in Farben zu schwelgen! Ich kann das gut verstehen. Ehrlich. Doch unter uns: Die Ästhetik einer Website sagt nichts über ihre Leistung in Hinblick auf Kundengewinnung aus. Erfahre hier, worauf es tatsächlich ankommt.

Worauf es bei der Auswahl deines Farbschemas ankommt

Bei der Auswahl deines Farbschemas solltest du auf diese Faktoren achten: 

Lesbarkeit

Wähle deine Farben so, dass der Text auf der Website leicht zu lesen ist. Achte auf einen angenehmen Kontrast, wenn du etwa deine Überschriften nicht in Grau, sondern in einer Farbe setzen möchtest.

Konsistenz

Achte darauf, deine Farben einheitlich zu verwenden. Die Farben für die Überschriften, Links, Buttons oder Hervorhebungen sollten über alle Seiten deiner Website hinweg übereinstimmend eingesetzt sein. Dies hilft deinen Besuchern, sich zu orientieren.

Deine Persönlichkeit, dein Angebot

Die Farbgebung sollte deiner Persönlichkeit entsprechen: Bist du ein eher expressiver Typ oder zurückhaltend? Schau dich weiter unten um, was Farben erzählen und triff eine Auswahl, die dir entspricht.

Und der Branchencode?

Als ich mich 2005 selbstständig machte, war die Entscheidung einfach: Wer als Berater etwas auf sich hielt, gestaltete seine Website in Blau. In Dunkelblau, um genau zu sein. Denn Blau steht für Seriosität.

Seither hat sich viel verändert: Sogar die großen Wirtschaftsprüfungsgesellschaften wie Ernst & Young, PwC und Deloitte oder Finanzinstitute wie die Sparkasse kombinieren Grautöne mit einer kräftigen, leuchtenden Farbe wie gelb, orange, rot oder violett.

Wenn du das Gefühl hast, du solltest dich mit Rücksicht auf deine Branche oder dein Angebot mit der Farbe etwas zurückhalten, liegt hier eine Lösung: Beschränke dich auf zwei Farben, Grau-Töne für Schrift und farblich hinterlegte Texte und nimm eine kräftige Kontrastfarbe hinzu.

Wo findest du Inspiration für dein Farbschema?

Hier sind einige Quellen: 

Dein*e Designer*in

Wenn du mit einem Design-Profi zusammenarbeitest, ist er oder sie die erste Adresse für dich. Besonders positiv: Er oder sie wird dein Corporate Design beachten und dafür sorgen, dass deine Website mit allen übrigen Kommunikationsmitteln abgestimmt ist.

Kollegen

Schau dich einmal bei Kollegen um: Was gefällt dir? Wie sind die Farben auf der Website deiner Kollegen eingesetzt? Nimm, wenn du möchtest, den Seminarmarkt von managerSeminare als Ausgangspunkt für deine Recherche.

Kleiderschrank

Der Tipp klingt vielleicht merkwürdig, doch bei der Gestaltung einer Berater- oder Coach-Website geht es darum, dich als Persönlichkeit vorzustellen. Schau deshalb einfach einmal in deinen Kleiderschrank: Welche Farben fallen dir auf? Was du gerne am Leib trägst, sollte dir auch auf der Website gut zu Gesicht stehen. 

Fotos, Instagram, Farbschema-Tools

Das Internet hält vielfältige Tools für die Recherche nach einem Farbschema bereit. Unter Umständen können sie mehr verwirren als bei der Entscheidung helfen: Was etwa sagt dir ein fünfteiliges Farbset von Adobe, das dir gefällt – du jedoch befürchten musst, dass deine Website wie ein Ostereier-Korb aussehen wird?

Wenn du es dennoch versuchen möchtest, schau dich bei Adobe Color oder Coolers um und lass dich inspirieren. Auch eine Möglichkeit: Nimm ein Foto deiner Wahl und extrahiere die Farben: Farben extrahieren.

Farbpsychologie: Welche Botschaft sendet dein Farbschema?

Die Farbpsychologie befasst sich mit der Wirkung von Farben auf unsere Emotionen, Gedanken und Verhaltensweisen. Farben können in uns Gefühle hervorrufen und unsere Stimmung beeinflussen. Daher ist es interessant zu wissen, welche Botschaft dein Farbschema übermittelt. 

Rot

Rot ist eine sehr intensive Farbe und kann Emotionen wie Leidenschaft, Liebe, Energie, Kraft und Aggression hervorrufen. In der Werbung wird Rot häufig verwendet, um Aufmerksamkeit zu erregen.

Orange

Orange ist eine warme und freundliche Farbe, die oft mit Kreativität, Optimismus und Jugendlichkeit in Verbindung gebracht wird.

Gelb

Gelb ist eine helle und fröhliche Farbe, die Assoziationen wie Sonne, Freude, Energie und Wärme hervorruft.

Grün

Grün ist eine beruhigende und harmonische Farbe, die oft mit Natur, Wachstum, Frische und Gesundheit assoziiert wird.

Blau

Blau ist eine kühle und beruhigende Farbe, die mit Vertrauen, Stabilität, Frieden und Freiheit in Verbindung gebracht wird.

Lila

Lila ist eine mystische und kreative Farbe, die oft mit Spiritualität, Fantasie und Luxus assoziiert wird.

Rosa

Rosa ist eine weiche und feminine Farbe, die oft mit Liebe, Zärtlichkeit und Mitgefühl in Verbindung gebracht wird.

Braun

Braun ist eine erdige und natürliche Farbe, die Assoziationen wie Stabilität, Ehrlichkeit und Einfachheit hervorruft.

Grau

Grau ist eine neutrale Farbe, die oft mit Stabilität, Ernsthaftigkeit und Professionalität in Verbindung gebracht wird.

Schwarz

Schwarz ist eine starke und kraftvolle Farbe, die oft mit Eleganz, Macht und Autorität assoziiert wird.

Wie viele Farben solltest du verwenden?

Wie so oft gilt auch für die Farbpalette einer Berater- und Coach-Website: Weniger ist mehr. Eine aufdringliche Farbkombination kann die Aufmerksamkeit deiner Besucher ablenken.

Wenn du dir Websites anschaust, findest du zwei verbreitete Lösungen:

Zwei Farben

Eine neutrale, graue Farbe für den Fließtext, Überschrift und Texthinterlegungen sowie eine kräftige Farbe als Kontrast.

Drei Farben

Eine neutrale, graue Farbe für den Text sowie zwei aufeinander abgestimmte Farben.

So entsteht eine angenehme Ästhetik und die Lesbarkeit ist gewährleistet.

Wie findest du ein harmonisches Farbschema?

Profis setzen das Farbrad ein, um Farben zu kombinieren, die nebeneinander liegen und solche, die sich gegenüberstehen. Denn dies ist der Schlüssel zu harmonischen Farbkombinationen. Bevor wir jedoch in der Farbtheorie einsteigen, mach es dir lieber einfach: Adobe rechnet dir harmonische Farbkombinationen aus: Adobe Color.

Wie geht es weiter?