Während vor Gutenberg die Schrift der Seiten im Customizer geändert werden konnte, gibt es eine solche Funktion für Gutenberg nicht und Sand hat den Wechsel der Schrift auch nicht programmiert.
Der Schriftbild eines Designs mit seiner Schriftfamilie, Schriftgröße, Abständen, Schriftgewicht (wie dünn oder wie fett ist die Schrift) ist miteinander abgestimmt. Hinzu kommt, dass Schrift, Abstände und Schriftgewicht auf kleinen Monitoren wie Handys und auf großen Desktop-Monitoren anders aufeinander abgestimmt sind.
Obendrein beruht die Schrift wie sie der Besucher sieht, und wie sie der Autor im Gutenberg-Editor sieht, auf einer anderen Codierung. Damit nach einer Änderung der Schriftfamilie beide Darstellungen wieder in etwa im Einklang sind, müssen beide Codierungen geändert werden.
Damit eine Seite den Besucher im Lesefluss hält, bleiben Betonungen wie fette Schrift, Schriftgrößen, Abstände und Farben besser die Ausnahme und einigen wenigen Elementen vorbehalten.
Stell die vor, jede Herausstellung schreit dich an!
Chef-Layouter einer großen Zeitung
Überschrift h2
Proin dictum felis ullamcorper mi fringilla mollis. Vivamus in nibh ipsum. Phasellus a est porttitor, dapibus velit ac, elementum sem. Donec quis ipsum in neque maximus cursus. Aliquam congue elit tellus, quis bibendum libero rutrum eget.
Überschrift h3
Cras luctus leo purus, nec tempus arcu lobortis nec. Praesent neque mauris, ullamcorper vel nisi in, ultricies tincidunt arcu. Proin iaculis arcu a urna aliquet fermentum. Morbi fermentum eleifend dapibus.
Überschrift h4
Aenean ac nulla blandit, iaculis augue sed, pulvinar ligula.
Warum kein H1?
Der Gutenberg-Editor bietet aus guten Gründen keine Überschrift auf dem Level H1. Webseiten sollen nur eine Überschrift auf dem höchsten Level aufweisen.
Im Fließtext nutzt man am besten den Level H2. Überschriften sollten auf jeden Fall nicht wegen ihrer unterschiedlichen Größen genutzt werden, sondern wirklich auch als Überschriften gesetzt werden. In Spalten passen Überschriften h3 und h4.
Aber am Ende soll der Autor bestimmen, welchen Level er für einen Header bevorzugt: Wenn ein H-Block markiert ist, gibt es in der rechten Seitenleiste doch noch ein H1 zur Auswahl.
Ungeordnete Liste
Sand 2020 unterstützt ungeordnete Listen und geordnete Listen in vier Schriftgrößen: normal (default), kleiner, groß und größer.
- Styles: Small Font
- Fusce a odio in lectus faucibus sagittis. Nulla ut posuere turpis. Maecenas commodo nisi nisl, non porttitor nunc imperdiet in. Donec consectetur sapien egestas, ultricies orci vitae.
- Styles: Default Font
- Fusce a odio in lectus faucibus sagittis. Nulla ut posuere turpis. Maecenas commodo nisi nisl, non porttitor nunc imperdiet in. Donec consectetur sapien egestas, ultricies orci vitae.
- Styles: Large Font
- Fusce a odio in lectus faucibus sagittis. Nulla ut posuere turpis. Maecenas commodo nisi nisl, non porttitor nunc imperdiet in. Donec consectetur sapien egestas, ultricies orci vitae.
- Styles: Larger Font
- Fusce a odio in lectus faucibus sagittis. Nulla ut posuere turpis. Maecenas commodo nisi nisl, non porttitor nunc imperdiet in. Donec consectetur sapien egestas, ultricies orci vitae.
Tabelle
Vergesst die kleinen Monitore nicht! Tabellen mit vier und mehr Spalten passen nicht auf die kleinen Monitore von Handys. Der Benutzer muss die Tabelle wagerecht scrollen, um alle Spalten zu sehen. Die meisten Besucher werden diese Möglichkeit gar nicht erkennen und nehmen nur die ersten zwei drei Spalten wahr.
| Morbi fermentum | Praesent neque | Proin | Maecenas |
| Nulla ut posuere turpis. Maecenas commodo nisi nisl, non porttitor nunc imperdiet in. | Cras luctus leo purus, nec tempus arcu lobortis nec. |  | 2019 |
| Praesent vel purus elit. | Nulla ut posuere turpis |  | 1997 |
| Fusce a odio in lectus | Praesent vel purus elit. |  | 2010 |
Buttons
Als Button mit farbigem Hintergrund dargestellt erzielt ein besonderer Link mehr Aufmerksamkeit.
SAND! unterstützt Buttons in vier Schriftgrößen: normal (default), kleiner, groß und größer.
Der Text in Buttons bleibt besser auf wenige Worte beschränkt, denn Schrift auf farbigen Grund ist schwer zu lesen. Noch schwieriger wird es für den Besucher, wenn der Text obendrein fett gesetzt wird. Dann ist es besser, den Buttontext auf ein bis zwei Wörter zu beschränken.
Buttons verkraften nur wenige Farbkombinationen. Gelbe Schrift auf blauem, grünen oder roten Hintergrund bietet selten ausreichenden Kontrast.
Auch wenn der Buttonhintergrund beim Hovern mit der Maus Schwarz wird: Auf den Touchscreens der mobilen Geräte gibt es keine Maus und kein Hovern.
Buttons werden auch gern eingesetzt, um einen Link eine besondere Auszeichnung zu geben. Gutenberg bietet dazu die Option, die gelinkte Seite in einem neuen Fenster zu öffnen. Damit wollen Autoren verhindern, dass der Besucher die eigene Seite aus den Augen verliert, wenn er dem Link folgt. Die eigene Seite bleibt also stehen, daneben wird ein neues Browserfenster zum Link geöffnet.
Wir beherrschen heute alle den Zurück-Button des Browsers, um auf eine zuvor geöffnete Seite zurück zu gehen, aber findet der Besucher das die Seite unter den zahlreichen geöffneten Fenstern auf seinem Handy?