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

Der Unterschied zwischen :nth-child und :nth-of-ty... Ich hab hier mal wieder ein CSS eines Kollegen zwischen das von dem Bemühen zeugt, innovative Lösungen zu nicht existierenden Problemen zu finden (ist...
Teaser mit jQuery erstellen Heutzutage besitzt fast jede halbwegs ernst zu nehmende Webapp ein Mini-CMS im Backend. Meistens basierend auf einem WYSIWYG-Editor in JavaScript. Eig...
jQuery.payment: Kreditkarten-Validierung Inzwischen dürfte es sich auch bis in die hintersten Ecken herum gesprochen haben, das man Kreditkarten nicht mit Regular Expressions beikommen kann. ...
Gantt Komponente für jQuery Frage ich mal etwas direkter - was macht ihr, wenn euer Kunde euch fragt, wann das Projekt fertig ist? Die korrekte Antwort würde hier wohl "Raten unt...

Ein Kommentar

  • 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