Nach einer kleinen künstlerischen Pause melde ich mich zurück. Nachdem das Stichwort “Usability” immer interessanter und wichtiger wird, habe ich heute ein kleines Feature zu meiner Website hinzugefügt.

Ein Font-Size-Switcher, auf Deutsch: Schriftgrößenwechsler. Hier sehen Sie eine Abbildung des Switchers, welcher ab sofort überall auf clemensplainer.com zu sehen ist.

Wie funktioniert der Font-Size-Switcher?

Um eine Schriftgröße variabel zu gestalten, muss einem Element natürlich auch eine variable Einheit zugewiesen werden. Klingt kompliziert? Einfaches Beispiel:

Mit der Einheit Pixel (px) wird die Schriftgröße eines Elementes absolut definiert. Pixel sind zwar relativ abhängig von den Bildschirmmaßen des jeweiligen Betrachters, aber innerhalb der Website ist ein Pixel trotzdem absolut definiert.

Mit der Einheit Em (em) jedoch ist die Schriftgröße abhängig (relativ) vom Elternelement. Die Standardschriftgröße moderner Browser beträgt 16 Pixel. Wenn also mit CSS nichts anderes definiert wird, so gilt für das Element body bzw. html die CSS-Spezifikation font-size:100%;

Diese Eigenschaft wird vererbt. Hat jetzt ein Kindelement (z.B.: eine Überschrift (h1) die Schriftgröße 2em so beträgt dies in Pixel gemessen 32 Pixel.

Vorteil: schnelle Änderung per CSS

Der Vorteil dieser – zugegeben am Anfang etwas aufwendigeren Technik – liegt klar auf der Hand. Sie können nun durch ändern eines Wertes die Schriftgröße der gesamten Website verändern. Welcher Wert? Richtig – der Wert des Elternelementes (z.B.: body oder html)

Lassen Sie den User selbst entscheiden

Gehen Sie einen Schritt weiter. Lassen Sie Ihren User entscheiden, welche Schriftgröße er haben will. Mein verwendetes Script macht nichts anderes, als den Wert font-size von Element body zu verändern.

Für WordPress gibt es bereits passende Plugins. Ich empfehle und verwende das Plugin font-resizer.

Weiterführende Lektüre

• Die unglaublichen Em & elastischen Layouts mit CSS
• JavaScript Web Font Size Switcher
• WordPress Plugin: font-resizer