Design: Schriften

Wenn du möchtest, dass deine Webseite modern und professionell wirkt, dann solltest du darauf achten, dass du auf allen Seiten ein einheitliches Schriftbild verwendest und für gleiche Elemente und Schriften auch die gleichen Farben benutzt.

 

Mit page4 ist das ganz einfach. Die Überschriften und auch der Fließtext werden direkt im Design hinterlegt und alle Formatierungen werden dort angegeben.

 

Wenn du ein Inhaltselement Überschrift verwendest, kannst du eine von 4 Formatvorlagen wählen (H1 bis H4) und das Aussehen der Überschrift wird von den Designschriften gesteuert, wo du für jede dieser 4 Formate hinterlegen kannst, wie die Schrift aussehen soll.

 

Legst du ein Inhaltselement Text an und schreibst dort einfach nur Text, dann wird das Aussehen dieses Textes auch vom Design gesteuert. Du findest du einen Bereich Fließtext und kannst dort hinterlegen, wie dieser Fließtext aussehen soll.

 

Markierst du im Fließtext Text und verlinkst diesen Text so wird das Aussehen dieses Links ebenfalls über das Design bestimmt. Du hast in den Designschriften 2 Bereiche, einmal für den Link als solches und einmal für das Aussehen, welches der Link haben soll, wenn ein Benutzer mit der Maus über diesen Link fährt (Hover).

 

Solange du also für Überschriften nur das Inhaltselement Überschrift verwendest und den gesamten Text deiner Webseite ohne weitere Formatierung mit dem Inhaltselement Text schreibst, kannst du sicher sein, dass deine Webseite einheitlich aussieht und damit eine wichtige Voraussetzung erfüllt, um professionell zu wirken.

 

Wichtig: Änderst du die Schriftformatierung der Designschriften, indem du zum Beispiel die Formatierung für den Fließtext änderst und dort eine andere Schriftfamilie und Schriftfarbe auswählst, dann werden nach dem Speichern alle Fließtext auf der kompletten Webseite automatisch mit den neuen Einstellungen angezeigt, also in einer anderen Schriftart und Schriftfarbe. Formatierungen, die du im jeweiligen Inhaltselement Text gemacht hast, also zum Beispiel einzelne Wörter in Fett oder Kursiv gestellt, bleiben erhalten. Daher solltest du, auch wenn der Texteditor die Möglichkeit bietet, individuelle Formatierungen nur sparsam benutzen. Mehr dazu im Artikel zum Inhaltselement Text.

 

Änderst du das Design, dann werden alle von dir gemachten Einstellungen in der Designschrift verworfen und durch die Einstellungen im neuen Design ersetzt. Wenn du bisher ein Design benutzt hast, welches einen weißen Hintergrund und schwarze Schrift hat und du wechselst auf ein Design mit einem schwarzen Hintergrund und weißer Schrift, dann verstehst du sicher, warum es Sinn macht, dass das Design die Schriftinformationen mitliefert. Du kannst jederzeit mit sehr geringem Aufwand die Designschriften anpassen.

 

Achte darauf, dass die Gestaltung der Überschriften so erfolgt, dass das Format H1 - also Überschrift 1 die größte Schrift bekommt und besonders viel Aufmerksamkeit erzeugt. H2 sollte etwas kleiner sein und sich deutlich von H1 unterscheiden. H3 sollte noch etwas kleiner sein und sich von H2 gut unterscheiden und H4 sollte am kleinsten sein, aber noch größer als der Fließtext. Wähle eine vernünftige Schrift aus, die zum Fliesstext passt. Oft sieht es sehr gut aus, wenn alle Überschriften die gleiche Schriftfamilie verwenden und sich neben der Schriftgröße eventuell noch in der Farbe unterscheiden. Die Schriftfamilie für die Überschriften sollte sich gut mit dem Fließtext vertragen. Informationen, die helfen, bei Google besser gelistet zu werden, findest du im Artikel „Überschriften“.

 

Das wichtigste ist, dass deine Besucher die Texte auf deiner Webseite gut lesen können. Achte darauf, dass die Schrift für den Text nicht zu klein ist, die Textfarbe sich gut vom Hintergrund abhebt und der Abstand zwischen den Zeilen ausreichend groß ist. Verwende nicht zu viele Schriftfamilien und achte darauf, dass die Schriften harmonisch zusammenpassen.

 

Eine professionell gestaltete Webseite verwendet ein einheitliches Schriftbild. Das bedeutet, der Grundtext besteht aus einer Schriftart, Schriftgröße und Schriftfarbe. Die Überschriften haben je nach Gewichtung (H1 bis H4) ein einheitliches Schriftbild und die Verlinkung ist überall gleich gestaltet.
Damit du nicht bei jedem Text im Texteditor wieder die selben Formatangaben machen musst werden die Schriften zentral vom Design gesteuert. Dort sind alle Formatierungen hinterlegt.
Wichtig dabei ist: Du darfst diese Formatierungen auch nicht manuell im Texteditor überschreiben. Wenn du also Text einfügst dann lege einfach nur einen neuen Textabschnitt an und schreibe dann deinen Text ohne dass du manuell die Schriftart oder Schriftgröße einstellst. Dann wird der Text so dargestellt, wie es im Design hinterlegt ist.

Vorteile einer zentralen Schriftgestaltung.
1) Das Schriftbild ist auf allen Seiten einheitlich und deine Webseite wird professioneller.
2) Wenn du die Gestaltung änderst und dein Schriftbild soll ebenfalls geändert werden dann brauchst du nur an einer Stelle die Formatierung anpassen und auf der gesamten Webseite werden alle Texte neu dargestellt.
3) Du musst dich beim Schreiben nicht um die Gestaltung kümmern, dass übernimmt das Design.

 

 

Für die Designschriften kannst du Google-Fonts benutzen. Wenn ein Besucher deine Seite aufruft und du hast eine Schriftfamilie benutzt, die von Google zur Verfügung gestellt wird, dann werden die Schriftinformationen durch Google geliefert. So wird sichergestellt, dass dein Besucher deine Webseite mit den Schriften sieht, die du ausgewählt hast.

Verwendest du keinen Google-Font, dann muss dein Besucher genau die Schrift bei sich auf seinem Rechner installiert haben, die du benutzt. Ansonsten kann sein Browser diese Schrift nicht darstellen und nimmt stattdessen eine Ersatzschrift. Damit wird natürlich die von dir gewünschte Gestaltung verändert und da Schriften unterschiedlich breit sind, führt das unter Umständen dazu, dass völlig andere Textumbrüche vorgenommen werden.

Google Fonts sind daher eine sehr gute Möglichkeit, sicher zu stellen, dass jeder Besucher deine Seite genauso sieht, wie du sie auf deinem Computer angezeigt bekommst.

 

Wichtig: Schriften im Auswahl-Dialog die mit (St) markiert sind, sind keine Google-Fonts. 
Gut zu wissen: Wir verwenden zwar Google-Fonts, aber alle Fonts sind auf unseren Servern gespeichert. Wenn du Google-Fonts benutzt werden also keinerlei Daten an Google weitergeleitet.

 

Du findest diesen Bereich, indem du entweder das Menü „Design-Schriftvorlagen bestimmen“ im Hauptmenü „Design“ aufrufst oder indem du das Menü „Design editieren“ im Hauptmenü „Design“ aufrufst und dann dort auf den Menüpunkt „Schriften“ klickst.

 

Der Schriften-Bereich ist so aufgebaut, dass du links eine Auflistung aller Formate findest. Wenn du auf ein Format klickst, wird rechts angezeigt, welche Parameter du anpassen kannst.

Aktuell gibt es die Formate

Überschrift 1 = H1 im Inhaltselement Überschrift

Überschrift 2 = H2 im Inhaltselement Überschrift

Überschrift 3 = H3 im Inhaltselement Überschrift

Überschrift 4 = H4 im Inhaltselement Überschrift

Fließtext = Text, den du mit dem Inhaltselement Text schreibst ohne irgendwelche Formatierungen anzuwenden. Hinweistexte, wie zum Beispiel bei leeren Inhaltselementen werden in der selben Formatierung dargestellt. Ebenso, wenn du in einem Inhaltselement HTML den Tag "p" verwendest.

Fließtext alternativ = Damit kannst du Texte zentral formatieren, wie zum Beispiel Zitate.

Link = Ein Link, der im Fließtext angelegt wird. Ein Teil der Formatierung wird vom Fließtext übernommen. Daher sind hier weniger Formatierungen hinterlegt.

Link:Hover = Ein Link, der im Fließtext angelegt wird. Ein Teil der Formatierung wird vom Fließtext übernommen. Auch hier gibt es also weniger Formatierungen. Du hinterlegst hier, wie der Link angezeigt werden soll, wenn ein Besucher mit der Maus über den Link fährt.

 

Hier wird die gewählte Schriftart angezeigt. Klickst du auf das „A“ am Ende des Eingabefeldes, öffnet sich ein Dialog mit allen verfügbaren Google Fonts. Du kannst direkt nach einer Schrift suchen, indem du die ersten Buchstaben eintippst. Wenn du zum Beispiel ein A eintippst, werden alle Schriften angezeigt, die mit A anfangen. Tippst du dann noch ein r, also Ar so werden nur noch die Schriften gezeigt, die mit Ar anfangen. So kannst du sehr schnell deine Schrift finden. Ein Klick auf die gewünschte Schrift und der Dialog schließt sich und die Schrift wird übernommen.

Der Dialog wird demnächst erweitert und sobald das geschehen ist, findest du hier weitere ausführliche Informationen.

 

Damit legst du die Schriftfarbe fest.

 

Größe: Hier kannst du die Schriftgröße in Pixel angeben. Und zwar von 6 px bis 150 px. Mit dem Papierkorb kannst du die Angabe löschen. Es erscheinen dann drei Striche in dem Feld. In diesem Fall wird immer die Schriftgröße verwendet, die dein Besucher bei sich im Browser eingestellt hat. Natürlich gibst du damit die Kontrolle aus der Hand, weil du nicht weißt, welche Standardgrößen im Browser deines Besuchers eingestellt sind. Diese „automatische Schriftgröße“ macht nur Sinn beim Fließtext, weil sie dem Besucher ermöglicht, deine Webseite auch in ganz großer Schrift anzeigen zu lassen. Das ist sinnvoll, falls z.B. eine Sehschwäche vorhanden ist.

Du kannst alle Formate (Überschriften und Fließtext) in jeder erlaubten Größe anzeigen lassen. Du solltest aber natürlich Schriftgrößen ab 30 px oder mehr nur für Überschriften verwenden. Außerdem ist es gut, die Wertigkeit der Überschriften zu beachten. Überschrift 1 sollte am größten angezeigt werden, Überschrift 2 kleiner und Überschrift 4 am kleinsten.

Größe mobil: Damit kannst du für die mobile Ansichten die Größe zum Beispiel der Überschriften anpassen. Sehr oft sind die für den Computer benutzten Schriftgrößen nicht für die mobile Ansicht geeignet. Mit dieser Option kannst du manuell eingreifen. Über die Vorschau kannst du dann prüfen, wie es auf einem mobilen Gerät dargestellt wird.

 

Du kannst auf Normal oder auf Fett einstellen. Je nach Schrift ist der Effekt mehr oder weniger stark sichtbar. Das liegt daran, dass für Google jede Schriftgewichtung eine eigene Schrift darstellt und man leider aus Gründen der Geschwindigkeit nicht tausende von Schriftschnitte einladen kann. Aktiv ist immer die blau hinterlegte Option.

 

Hinweis: Wenn ein Google Font nur eine Gewichtung hinterlegt hat, dann versucht der Browser zwar die Schrift fetter anzuzeigen, dass sieht aber nicht besonders gut aus.

 

Im Grunde schaltet man hiermit kursive Schrift an oder aus. Normal wäre demnach ausgeschaltet und Kursiv wäre angeschaltet. Auch hier gilt, dass der Effekt je nach Schriftfamilie unterschiedlich ausfällt.

 

Wie bei Kursiv eine Option, um den Style Unterstrichen auszuschalten (Normal) oder anzuschalten (Unterstrichen). Dieser Effekt kommt nicht von der Schrift selbst und hat daher auf jede Schrift eine Auswirkung.

 

Hiermit stellst du den Abstand zwischen den Buchstaben ein. Du hast die Möglichkeit, hier einen Wert von 1 px bis 5 px einzugeben. Je größer der Abstand umso weiter sind die Buchstaben voneinander entfernt. Mit dem Papierkorb löschst du diese Werte und stellst den Buchstabenabstand quasi auf 0 px. Wenn du keine besonderen Effekte beabsichtigst, solltest du hier keinen Wert einstellen, was du durch den Papierkorb erreichst und wodurch dann anstelle eines Wertes drei Striche angezeigt werden.

 

Die Zeilenhöhe sagt aus, wie weit zwei Zeilen auseinander stehen. Dabei wird immer gemessen von Grundlinie zu Grundlinie. Mit der Grundlinie bezeichnet man die gedachte Linie, auf der die meisten Buchstaben stehen. Wenn man sich „Abcdefghijk“ ansieht, dann stellt man fest, dass Abcdef alle auf einer Linie stehen. Das ist die Grundlinie. Das g hat eine sogenannte Unterlänge und ragt über die Grundlinie hinaus. Ausführliche Informationen unter Wikipedia.

Damit man die einzelnen Zeilen komplett auseinander halten kann, muss die Zeilenhöhe mindestens so groß sein wie die Schriftgröße. Je nach Schrift kann dieser Abstand etwas weniger oder etwas mehr betragen, da das Schriftbild manchmal etwas kleiner ist als die angegebene Schriftgröße. Das hängt mit den Unterlängen zusammen und damit, dass großgeschriebene Umlaute meist etwas höher sind als normale Großbuchstaben. Wenn du eine 20 px Schrift hast, sollte die Zeilenhöhe mindestens 20 px sein. Man rechnet mit 20% Zugabe, damit die Schrift lesbar ist, also besser sind 24 px, um eine gute Lesbarkeit herzustellen. Du kannst Werte zwischen 10 px und 200 px einstellen. Wenn du auf den Papierkorb klickst, wird der Zeilenabstand automatisch festgelegt. Es werden drei Striche angezeigt und wenn du die Schriftgröße änderst, dann erhöht sich automatisch auch der Zeilenabstand. Er beträgt dann immer rund 120% der Schriftgröße. Im Normalfall solltest du also auch hier lieber den Papierkorb nutzen und einen automatischen Wert einstellen. Es sei denn, du möchtest besonders viel Raum zwischen den Zeilen haben.

 

Rechts von den Eingabefeldern siehst du alle Schriften als Vorschau, so hast du sofort einen Eindruck, wie die Schriften zusammenpassen und ob die Größen und Zeilenabstände gut gewählt sind. Du kannst entweder mit den Menüeinträgen links zu den einzelnen Formaten springen oder indem du in der Vorschau auf die Schrift klickst, die du verändern möchtest.

 

Außerdem wird die Schrift normalerweise auch sofort auf deiner Seite angezeigt, die du unterhalb des Dialoges immer im Blickfeld hast.