FitText – immer passende Textgrößen

Content Management Systeme haben ihre Probleme – man rechnet nämlich selten mit der Heimtücke der Redakteure. Man bekommt hoch und heilig versprochen das eine Überschrift nie kleiner ist als 30 Zeichen und nie größer ist als 80 Zeichen. Der Redakteur erklärt einem dann noch, das alles andere ja eh Quatsch wäre, und wenn man dann nach ein paar Monaten wieder gucken geht (und keine entsprechenden Hilfsmittel eingebaut hat, dem Redakteur diese Grenzen aufzudrängen) rangieren die Überschriften irgendwo zwischen 5 Zeichen und epischem Ausmaßen.

Screenshot von FitText

Noch viel nerviger sind Aktionen, das man ein Div in fester Breite hat und der (sich nie ändernde Text) die gesamte Breite umfassen soll. Kann man relativ einfach übers CSS hin bekommen, es ist trotzdem nervig – und wenn man es dann hat kommt die Sache mit dem Responsive Webdesign oder die Tatsache, das man die Größe eines Containers nicht absolut angegeben hat.

Für den Fall kommt FitText ins Spiel – von den Machern von Lettering.js. das jQuery Plugin schafft es, einen Text so zu vergrößern/verkleinern das er ohne umzubrechen in ein ihn umgebenden Container passt. Heisst: das Teil funktioniert bei Überschriften, bei Layern und bei Tabellen-Zellen. Das Skript gibt es bei GitHub und wie die Jungs anmerken ist es keine Idee es auf Fließtexte anzusetzen! ;)

Ähnliche Beiträge

Typetester – online CSS für Fonts erstellen und ve... Die Definition eines Fonts ist jedes Mal aufs Neue ein ziemliches Rumgemurkse. Es ist zwar nicht schwer eine Verdana auszusuchen, aber aufgrund der vi...
Icons im Webdesign in Webfonts verwalten CSS Sprites und ich sind nie große Freunde geworden. In manchen Fällen von der SEO-Fraktion als überlebenswichtig gebrandmarkt, bieten die Grafiken me...
jFontSize – dynamische Font-Size mittels jQu... 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 Se...
Text auf Pfaden mittels CSS3 Brave New World - CSS3 und insbesondere das Canvas-Element machen Dinge möglich, über die man sich früher keine Gedanken machen brauchte. Insbesondere...

Schreibe einen Kommentar

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