Text an Gerätegröße anpassen

[Rolf B]

Hallo Silja,

autsch. Ich habe Dich falsch verstanden. Ich dachte, du meintest den jeweils zweiten Parameter der min- oder max-Funktion. Bitte entschuldige.

Ja, du hast recht, zweimal font-size in einer CSS Regel anzugeben ist nicht sinnvoll. Der zweite Wert gewinnt. Aber woher hast Du die Idee, das man das zweimal angeben könnte? Ich habe jetzt nicht alles genau gelesen - hat das hier jemand angedeutet? In meinem Fiddle steht's jedenfalls nicht (puh!).

Wenn ein Element von zwei CSS Regeln getroffen wird, die beide eine font-size Angabe mitbringen, sieht die Sache schon anders aus. Das kann sinnvoll sein.

Wenn Du Dich fragst, welche Angabe nun die für Dich richtige ist, tjaaaa... Das musst Du schon wissen. Du musst wissen, wie Du skalieren willst, ob Du eine Mindestgröße willst, oder eine Maximalgröße. Gunnars Formel bringt durch das 1em + ... eine Mindestgröße mit und durch die zusätzliche min-Funktion auch eine Maximalgröße. Damit stellt sie die flexibelste Variante dar. Du musst die Werte darin nur nach deinen Bedürfnissen passend setzen.

Dann schriebst Du noch:

Ich habe oben geschrieben, dass die Angabe von min und max sinnlos ist.

Äh, nein. Eine minimale Fontgröße braucht man, damit die Schrift nicht zu klein wird. Eine maximale Fontgröße verhindert Monsterbuchstaben bei unerwartet breiten Bildschirmen. Und dazwischen ist ein Proportionalbereich.

Wenn Du eine variable Fontgröße willst, solltest Du so einen Verlauf anstreben:

X-Achse: Viewportbreite, Y-Achse: font-size

Natürlich könnte man auch was anderes als eine Gerade zwischen A und B setzen, aber du willst das ja im CSS rechnen können und da ist alles andere als linear gruselig.

D.h. solange der Punkt A nicht erreicht ist, hast Du einen konstanten minimalen Wert. Ab da steigt die Fontgröße, bis zum Punkt B, und überschreitet diesen Wert nicht.

Mit einem min(calc(1em + 2vw), 3em) kriegst Du das allerdings nicht hin. Bei dieser Funktion liegt A bei x=0, y=1em. Deswegen kann man das noch um ein max erweitern: max(1em, min(calc(0.5em + 2vw), 3em)). Was Du im calc hinschreiben musst, hängt davon ab, wo die Punkte A und B liegen sollen. Das ist eine einfache Geradenberechnung aus zwei Punkten, hast Du in Mathe bestimmt mal gemacht. Für die Rechnung solltest Du 1em = 16px ansetzen - oder welche "Normal-Schriftgröße" du gerne haben willst. 2vw ist dann dein x in der Geradengleichung, und die 2 ist die Steigung: 2%, oder 0,02. 0.5em ist der y-Achsenabschnitt.

Weil min(a, max(formel, b)) so mühsam zu schreiben ist, gibt's dafür im CSS auch eine kompaktere Schreibweise: clamp(a, formel, b)

Rolf