jFontSize – dynamische Font-Size mittels jQuery

Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Seiten. Neben diversen Anfordernissen, die fast schon in den Bereich der Barrierefreiheit gehen (die übrigens in einem Standard-Magento nicht gegeben ist), kämpft man auch mit der Alterssehschwäche. Entsprechend muss die Schriftgröße nicht nur dynamisch sein, sondern auch mittels Button vergrößert und verkleinert werden können.

jFontSize Demo
jFontSize Demo

Um das zu bewerkstelligen gibt es in der Regel in der oberen rechten Ecke der Seite die obligatorischen 3 Buttons zum Vergrößern, Verkleinern und Resetten der Font-Size. 3 kleine Buttons, jede Menge Arbeit ;) jFontSize nimmt einem an dieser Stelle die Arbeit ab. Es fügt die 3 Buttons ein, belegt sie mit Funktionalität und vergrößert / verkleinert automatisch Schriften. Dabei kann es entweder auf die gesamte Seite, aber auch mittels Selektor auf nur ausgewählte Strukturen angewendet werden.

Nun, jetzt stellt sich natürlich die Frage was bringt einem das? Normalerweise wird in einem barrierefreien CSS die Schriftgröße weder in pt noch in px angegeben, sondern immer mittels em oder %. Dies ist nach meiner Meinung eine Notwendigkeit, vor der auch jFontSize nicht schützt. Ausserdem läuft man bei einem nachträglichen Einbau ins offene Messer: größere Schriftarten bedeuten auch größere Lauflängen und somit mehr oder andere Zeilenumbrüche. Besonders in Menüs kann das böse ins Auge gehen wenn man nicht von vorne herein daran denkt, dass dies passieren kann.

jFontSize ist eine feine Sache, es erleichtert einem tatsächlich ein wenig die Arbeit, schützt aber nicht vor einer geeigneten Grundstruktur des CSS und des HTML, denn auch jFontSize muss etwas haben, auf das es aufsetzt. Wer also die Lesbarkeit einer Seite beeinflussen will, sollte sich das kleine Plugin einmal anschauen, evtl. hilft es auch für die eine oder andere coole Anwendung, man sollte sich allerdings von dem Gedanken lösen das man es mal eben schnell in die Seite rein kopiert und dann eine barrierefreie Seite besitzt.

Ähnliche Beiträge

Besserer Redirect mit jQuery Bei jQuery4U bin ich auf einen Artikel aufmerksam geworden, der in seiner Logik nicht zu überbieten ist! :) Jeder von uns benutzt wohl ab und an die l...
elRTE – WYSIYWYG-Editor in jQuery inkl. Dateimanag... WYSIWYG-Editoren sind etwas Nettes, haben aber dennoch ein Problem: Die Bilder, die man in den Text einbinden möchte, müssen dummerweise erstmal auf d...
Vintage Effekte für Photos mittels jQuery Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese...
Animierte Sprites in jQuery ohne Flash Ich gebe zu das ich ein echter Fan von vektorbasierenden Blog-Headern bin. Noch cooler wäre es allerdings, wenn die Teile animiert wären, dafür gäbe e...

Eine Antwort auf „jFontSize – dynamische Font-Size mittels jQuery“

  1. Hallo Guido,

    Ich persönlich denke, und habe bisher die auch nur die Erfahrung gemacht, das die Leute die im Web schlecht lesen können ihren Browser per Default auf 120%+ eingestellt haben. Der Nutzer sucht sicherlich nicht erst auf jeder Webseite den Button für das Vergrößern der Schriften.

    Eine gute Ausgangsschriftgröße ist natürlich trotzdem Voraussetzung. Ich persönlich nutze dazu gerne 14px. Das kommt natürlich auch immer auf die Anforderungen an. Viele Kunden wünschen sich einfach diesen Button, auch wenn der im täglichen Gebrauch wahrscheinlich nicht genutzt wird.

    Vielleicht gibt es ja irgendwo eine Studie über die Verwendung dieser Buttons.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.