Für Boxen mit begrenzter Breite und Höhe und variablen Textlänge. Das führt dazu das der Text in die Boxen nicht gut aussieht (entweder passt er nicht rein, oder zu klein). Ich hatte einige Web Projekte bei denen es der Fall war für diese Zwecke habe ich kleines Plugin geschrieben.
How to use
$('.section p').flextext({
100: [{0: ['16px', '18px']}, {768: ['18px', '20px']}, {1024: ['20px', '22px']}],
200: [{0: ['15px', '18px']}, {768: ['17px', '20px']}, {1024: ['19px', '20px']}],
295: [{0: ['14px', '16px']}, {768: ['15px', '18px']}, {1024: ['18px', '20px']}],
important: true
});
$('.section h2').flextext({
50: [{0: ['22px', '24px']}, {768: ['25px', '22px']}, {1024: ['30px', '22px']}],
100: [{0: ['20px', '24px']}, {768: ['22.5px', '20px']}, {1024: ['25px', '22px']}],
important: true
});
Das ganze ist simpel man ruft die Methode flexttext() auf und übergibt ein Objekt. Das Key ist immer eine Zahl, die sagt ab welcher Zeichenlänge eine neue Schriftgröße gilt. Das Value ist ein Array in diesem befinden sich weitere Objekte. Jeder dieser Objekte ist eine Auflösung(falls die Website responsive ist). Das Key ist die Auflösung in pixel. Die 0 am Anfang ist Pflicht. Es funktioniert nach dem Mobile first Prinzip. Das Value ist wieder ein Array dort werden die Font-Size und die Line-Height übergeben. Diese Reihenfolge ist fest. Man kann noch ein Important übergeben um die Styles zu überschreiben.