Denken Sie an das letzte Mal, als Sie versucht haben, eine Website auf Ihrem Handy zu öffnen und feststellen mussten, dass die Texte unlesbar klein oder absurd groß waren. Ärgerlich, oder? Entweder kann man es kaum lesen, oder der vorhandene Platz wird nicht gut genutzt. Ein gutes responsives Design ist wichtig – nicht nur, um verschiedene Geräte zu unterstützen, sondern um den unterschiedlichen Wünschen der Nutzer gerecht zu werden. Wenn es um Barrierefreiheit geht müssen insbesondere Schriftgrößen vom Nutzer geändert werden können. Aber wie erreicht man das, ohne dass das Layout über den Haufen geworfen wird? Relative Einheiten sind die Lösung. Schauen wir uns an, wie sie funktionieren.
Warum ist ein responsives Layout wichtig?
Smartphones und Tablets gehören inzwischen zum Alltag. Dabei kann man schnell mal vergessen, wie unterschiedlich Nutzer auf Inhalte zugreifen. Ein responsives Layout sorgt dafür, dass Ihre Website auf allen Geräten gut aussieht und funktioniert. Einfach gesagt: Egal ob jemand auf einem 27-Zoll-Monitor oder einem 5-Zoll-Smartphone-Display surft, die Erfahrung sollte nahtlos sein. Nicht nur die Größe und Anordnung der Elemente, sondern auch die Lesbarkeit der Texte spielt dabei eine große Rolle.
Wieso muss die Schriftgröße anpassbar sein und welche Skalierung kann man erwarten?
Es ist ein weit verbreiteter Irrtum, dass einmal vom Designer festgelegte Schriftgrößen in Stein gemeißelt sind und universell funktionieren. Sicher, sie werden oft je nach Bildschirmgröße angepasst, aber das ist nur ein Teil der Geschichte.
Stellen Sie sich vor, jemand mit einer Sehbeeinträchtigung besucht Ihre Website. Um die Inhalte problemlos lesen zu können, muss die Person möglicherweise die Zoomfunktion seines Browsers verwenden. Menschen mit Sehbeeinträchtigungen nutzen oft eine Zoomstufe von 200% oder mehr, um Texte gut lesen zu können.Moderne Webdesigns müssen bereit sein, auf diese Bedürfnisse mit flexiblen Größen und Abständen zu reagieren, die weit über das einfache Anpassen an verschiedene Bildschirmgrößen hinausgehen. Dabei sollten Gestaltung und Benutzerfreundlichkeit erhalten bleiben.
Die Kunst liegt darin, eine Webseite zu schaffen, die sich anpasst, ohne dass der Benutzer es merkt. Indem die Schriftgröße nicht als starre Einheit betrachtet wird, sondern als dynamischer Teil des Layouts, ermöglichen wir eine inklusive Website, die niemanden ausschließt.
Weitere Blogbeiträge zu barrierefreien Schriften:
- Schriftgröße und Barrierefreiheit – kein Kleingedrucktes mehr
- Barrierefreie Schriftarten – damit Schrift nicht zum Hindernis wird
Die rechtlichen Aspekte der Schriftgrößenskalierung
Wenn von Barrierefreiheit und Anpassbarkeit von Schriftgrößen die Rede ist, kommen wir nicht umhin, wieder einmal die Web Content Accessibility Guidelines, kurz WCAG, zu erwähnen. Dieser Standard hat das Ziel, das Internet für jedermann zugänglich zu machen – einschließlich Menschen mit Beeinträchtigungen. Die WCAG 2.2 erfordert beispielsweise, dass Text ohne assistive Technologie bis zu 200% vergrößert werden kann, ohne dass dabei Funktionen verloren gehen oder Inhalte unbenutzbar werden.
Insbesondere Firmeninhaber, die sich mit dem BFSG auseinandersetzen müssen, sollten sich dieser Vorgaben bewusst sein. Sich jetzt schon um barrierefreies Webdesign zu kümmern schützt nicht nur vor rechtlichen Schwierigkeiten, sondern verbessert auch das Markenimage und sorgt für eine positive Nutzererfahrung für alle Besucher.
Umsetzung durch relative Einheiten
Eine unkomplizierte und inzwischen absolut zum Standard gewordene Lösung für die Skalierbarkeit von Schriftgrößen sind relative Einheiten. Schauen wir uns jetzt doch genauer an, wie man sie nutzt.
Was sind relative Einheiten?
Im Gegensatz zu absoluten Einheiten (wie Pixel, kurz px), die starr sind und sich nicht an ihre Umgebung anpassen, sind relative Einheiten die Gummibänder der Webwelt. Sie beziehen sich auf andere Werte – beispielsweise die Standard-Schriftgröße des Browsers oder die Größe des umgebenden Elements – und ermöglichen es Ihnen, flexible Designs zu erstellen. Erhöht man also den ursprünglichen Wert, so werden alle davon abhängigen relativen Einheiten gemeinsam angepasst.
Der Vorteil: alle Maße können abhängig von der Schriftgröße festgelegt werden. Die Höhe eines Buttons? Doppelte Schriftgröße. Der Abstand nach einem Absatz? 1.5-fache Schriftgröße. Auf diese Weise bleiben Proportionen erhalten und das Gesamtbild bleibt stimmig, auch wenn sich die Schriftgröße ändert. Außerdem wird sichergestellt, dass keine Inhalte abgeschnitten oder überdeckt werden.
Welche Einheiten gibt es?
In der Welt der relativen Einheiten gibt es verschiedene Größen, die alle ihre Berechtigung haben. Die beliebtesten und wohl auch praktischsten sind %, em und rem.
Während em sich auf die Schriftgröße des jeweiligen Elements bezieht, ist rem (root-em) relativ zur Schriftgröße des Wurzelelements (html-Element) der Website. Der Prozentwert bezieht sich meistens auf den Wert desselben Attributs vom Elternelement. Es gibt aber einige Ausnahmen, weshalb es nicht immer ganz einfach ist, mit % zu arbeiten.
Wie kann man sie praktisch und unkompliziert einsetzen?
Nun tauchen wir in den Alltagstipp ab: Der Trick mit dem Wurzelelement. In allen Browsern ist eine Standardschriftgröße hinterlegt. Normalerweise liegt diese bei 16px, kann vom Nutzer aber einfach geändert werden. Diese Schriftgröße können Sie im CSS überschreiben. Dazu überschreiben Sie das font-size-Attribut des html-Elements. Tun Sie dies in px, wird die Einstellung des Browsers ignoriert.
Das ist nun aber das Gegenteil von dem was wir wollen, denn Nutzer sollen die Möglichkeit haben, die Schriftgröße ihren Wünschen anzupassen. Also verwenden wir eine relative Einheit, in diesem Fall Prozent. Dieser Wert bezieht sich immer auf die Browsereinstellung. 100% ergeben also standardmäßig 16px.
Aber es geht viel einfacher. Indem Sie die Schriftgröße des html-Elements auf 62.5% setzen, setzen Sie sie zunächst auf 10px zurück. Das ist viel zu klein für Texte, aber alle weiteren Werte können nun einfach ausgerecht werden: 30px entsprechen 3rem. Diese kleine Änderung macht es unglaublich simpel, Größen in einem Design zu berechnen. Möchten Sie beispielsweise eine Schriftgröße von 18px? Kein Problem, das wären dann einfach 1.8rem.
Ein kleines Beispiel, wie das aussehen kann:
html {
font-size: 62.5%;
}
main {
font-size: 1.8rem;
padding: 3rem;
}
h1 {
font-size: 4rem;
text-decoration: underline red solid 0.4rem;
}Dieses Codebeispiel zeigt das CSS für eine Seite, bei der die Schriften und Abstände, aber auch eine Unterstreichung der Hauptüberschrift mit der im Browser eingestellten Schrift skalieren. Sie werden so also immer harmonisch zusammenpassen.
Fazit – relative Einheiten erleichtern die Arbeit und erhöhen die Barrierefreiheit
Wie das Leben aus vielen unterschiedlichen Menschen besteht, sollten Webdesigns flexibel sein. Indem man relative Einheiten nutzt, schafft man eine Grundlage für eine barrierefreie Website, die jedem Nutzer die Freiheit gibt, Inhalte so zu genießen, wie es für ihn am besten ist. Durch die einfache Möglichkeit der Umrechnung wird es ihnen schnell gelingen, in relativen Einheiten genauso schnell zu arbeiten wie in Pixel bisher. Probieren Sie es aus!
Lassen Sie uns also die digitale Welt einladender für alle gestalten. Das kann schon mit etwas so Einfachem wie dem Wechsel von px zu rem beginnen.