nicht angemeldet Mr.Murphy
Gunnar Bittersmann
Matthias Apsel
Rolf B
Rolf B
Rolf B
Matthias Apsel
Gunnar Bittersmann
Rolf B
Moin,
Ist es besser, die Textgröße über verschiedene media-Angaben oder über die Einheit vw zu machen?
Oder gibt es weitere, bessere Methoden?
Gruß
Silja
Wie willst du den Text anpassen?
Den Text bei kleineren Fenstergrößen zu verkleinern ist keine gute Idee.
Auf meinem Smartphone sind die Textgrößen kleiner als am PC. Und warum ist dann die Größe vw eingeführt worden?
Die Einheit vw ist nicht eingeführt worden um Texte schlechter lesbar zu machen.
Smartphones werden häufig unterwegs gelesen, in der Bahn, um Auto, zu Fuß. Da sollten die Texte eher etwas größer sein.
Und nur weil Andere schlechter lesbare Webseiten machen sollte man das nicht nachmachen.
Hallo Silja,
die Größe vw ist eher dazu da, eine Box auf „40% Bildschirmbreite“ zu dimensionieren, unabhängig von der Größe der Elternbox.
Rolf
@@Silja
Ist es besser, die Textgröße über verschiedene media-Angaben oder über die Einheit vw zu machen?
Kommt drauf an.
Quasi-stufenlose Änderung ohne Media-Querys hat vielleicht mehr Charme und ist einfacher umzusetzen.
Aber nicht mit vw allein! Du brauchst einen statischen Anteil und einen variablen Anteil, der in Abhängigkeit von der Viewportbreite vergrößert wird. Und dazu noch eine obere Begrenzung.
Also sowas wie font-size: min(1em + 1vw, 4em).
Siehe Postings von neulich ff.
😷 LLAP
Also sowas wie
font-size: min(1em + 1vw, 4em).
Was bedeutet dann
font-size: max(3vw, 14px);
wie hier
im Jsfiddle von Rolf?
Hallo Silja,
Was bedeutet dann
font-size: max(3vw, 14px);
wie hier
im Jsfiddle von Rolf?
Na der größere der beiden Werte aus 3vw und 14px.
Bis demnächst
Matthias
Hallo Matthias,
Na der größere der beiden Werte aus 3vw und 14px.
Das wusste ich.
Ich verstehe aber die Beispiele als Empfehlungen.
Ist dann die Angabe von min und max angesagt?
Hallo Silja,
bitte beachte, dass ich da noch nicht die Idee von Gunnar hatte. 3vw ist bei sehr breiten Bildschirmen zu viel. Aber das kannst Du Dir ja auch selbst ausrechnen.
Bei einer Schriftgröße von 16px ist
| Viewportbreite | 3vw | calc(1em+1vw) |
|---|---|---|
| 640px | 19,2px | 22,4px |
| 960px | 28,8px | 25,6px |
| 1400px | 42px | 30px |
| 1920px | 57,6px | 35,2px |
| 3000px | 90px | 46px |
Mein 3vw entspricht letztlich calc(0em + 3vw). Durch passende Wahl von konstantem und variablem Anteil kannst Du Dir je nach Wunsch eine Gerade erzeugen, die Dir zu den Bildschirmbreiten passende Fontgrößen liefert.
Mit der min-Funktion kannst Du den Wert dann noch nach oben limitieren. Ja, ich weiß, es klingt widersinnig, dass eine „Minimum“ Funktion einen Maximalwert festlegt, ist aber so. min(a,b) liefert den kleineren der beiden Werte. Ein min(4em, calc(...)) begrenzt den Wert deshalb nach oben auf 4em.
Rolf
Hallo Rolf.
Demnach gibt es keine allgemein anerkannte Empfehlung für die Schriftgrößen je nach Viewportgröße wie früher die 16px als es noch keine Kleingeräte gab.
Hallo,
Hallo Silja,
dazu sagt besser @Gunnar Bittersmann was...
Rolf
Ja, so eine Empfehlung von Gunnar oder anderen Koryphäe als clamp- und Alternativ-Formel für ältere Browser hätte ich auch gerne. Wenn die dann nicht ganz gefällt, kann man sie ja etwas abwandeln. Grüße Lothar
... und arum plötzlich das 'calc'.
Die Angabe von
font-size: min(1em + 1vw, 4em); font-size: max(3vw, 14px);
ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.
Hallo Silja,
nein, das ist nicht richtig. Die vw Angabe hängt ja von der BildschirmViewportbreite ab, und dann musst Du einfach die Übergangspunkte ausrechnen. Ein bisschen Mathe sollte jeder Programmierer können…
$$\frac{14}{0{,}03} \approx 466$$. D.h. unterhalb einer Viewportbreite von 467 Pixeln würde 3vw eine Fontgröße von weniger als 14px ergeben, und die max-Formel sorgt dafür, dass schmale Viewports keine Winzschrift liefern.
Bei der anderen Formel hängt es von der Fontgröße ab, wo der Begrenzungspunkt ist. Bei einer Basis-Fontsize von 16px ist 1em = 16px und 4em = 64px, d.h. 1vw muss 48px erreichen, dann greift die Limitierung. Das ist bei einer Viewportbreite von 4800px der Fall, was ich nicht mal mit dem 43" Curved-Monster vor mir schaffe (da hätt ich so ein 49" Trümmer mit 5120x1440 nehmen müssen - und anbauen 😉). Schneller ist man bei einer kleineren Basis-Fontgröße an der Grenze, z.B. 12px (was schon anstrengend klein ist), da ist 1em = 12px und 4em = 48px, Differenz 36px. 1vw ist bei 3600px Viewportbreite gleich 36px, das schaff ich so gerade.
Rolf
Warum ist das nicht richtig?
font-size: min(1em + 1vw, 4em);
liefert einen Wert x für die Fontgröße.
font-size: max(3vw, 14px);
liefert einen Wert y für die Fontgröße und überschreibt daher den Wert x.
Ebenso wie bei
....{
font-size: 16px; font-size: 12px; }
der Wert 12px verwendet wird.
Vermutlich lag ein Missverständnis vor.
Ich habe oben geschrieben, dass die Angabe von min und max sinnlos ist.
Und Deine Aussage
Ja, ich weiß, es klingt widersinnig, dass eine „Minimum“ Funktion einen Maximalwert festlegt, ist aber so. min(a,b) liefert den kleineren der beiden Werte.
stimmt nach meiner Meinung auch nicht. min legt nicht den Maximalwert der Schriftgröße sondern den Wert der Schriftgröße, es heißt ja nicht font-size <= .... sondern = .
Hallo,
stimmt nach meiner Meinung auch nicht. min legt nicht den Maximalwert der Schriftgröße sondern den Wert der Schriftgröße, es heißt ja nicht font-size <= .... sondern = .
Min() ist eine Vergleichsfunktion, die den kleineren von zwei Werten liefert. In diesem Fall an font-size. Wenn einer von den beiden Werten immer weiter steigt, aber der andere konstant bleibt, kann die Schrift eben nicht immer größer werden, sondern erreicht mit dem konstanten Wert ihren Maximalwert.
Gruß
Kalk
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
Hallo Rolf B,
Aber woher hast Du die Idee, das man das zweimal angeben könnte?
Möglicherweise font-size: clamp(…) und dann eine zweite Angabe, für Browser, die clamp nicht verstehen.
Bis demnächst
Matthias
@@Matthias Apsel
Möglicherweise font-size: clamp(…) und dann eine zweite Angabe, für Browser, die clamp nicht verstehen.
Andersrum wird ein Schuh draus.
😷 LLAP
@@Rolf B
zweimal
font-sizein einer CSS Regel anzugeben ist nicht sinnvoll.
Natürlich ist es das! Progressive enhancement.
Warst du nicht der, der immer darauf besteht, dass es auch im IE funktioniert?
Tabellenkalk
JürgenBbody {
font-size: 1.2em; /* fallback for old browsers */
font-size: min(1em + 1vw, 4em);
}
😷 LLAP
Hallo,
X-Achse: Viewportbreite, Y-Achse: font-size
oder hier zum ausprobieren: https://www.j-berkemeier.de/FktPlot.html?xmin=10;xmax=2500;f1=min(2*x/100,32);f2=max(16,2*x/100);f3=max(16,min(2*x/100,32))
Gruß
Jürgen
Hallo Silja,
... und arum plötzlich das 'calc'.
Die Angabe vonfont-size: min(1em + 1vw, 4em); font-size: max(3vw, 14px);ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.
Insbesondere ist die erste Angabe ungültig, denn CSS kann nur mit calc rechnen.
Bis demnächst
Matthias
@@Matthias Apsel
Die Angabe von
font-size: min(1em + 1vw, 4em); font-size: max(3vw, 14px);ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.
Insbesondere ist die erste Angabe ungültig, denn CSS kann nur mit
calcrechnen.
Ich sagte gerade das Gegenteil. Wer recht hat und wer nicht, sagt euch gleich das Licht.
😷 LLAP
@@Silja
... und arum plötzlich das 'calc'.
Für Berechnungen in CSS. Innerhalb von min, max, clamp ist calc nicht nötig. Hatte ich schon verlinkt.
Die Angabe von
font-size: min(1em + 1vw, 4em); font-size: max(3vw, 14px);ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.
Ja. Wenn du nach oben und nach unten begrenzen willst, ist die clamp-Funktion dein Freund.
😷 LLAP
Ja. Wenn du nach oben und nach unten begrenzen willst, ist die
clamp-Funktion dein Freund.
Danke, that's it!
Hallo Silja,
die Schriftgröße nach Viewporgröße zu wählen ist im Allgemeinen wenig sinnvoll. Warum soll jemand, der ein Bildschirmfenster schmaler zieht, eine kleinere Schrift bekommen und die Lupe zücken müssen?
Es ist sinnvoll, eine auf einem durchschnittlichen Monitor lesbare Textgröße zu wählen (also ein Monitor mit ca 95dpi) und dem User die weitere Entscheidung zu überlassen. Eine solche Textgröße liegt um die 16px, was auch der Default der Browser ist.
Man kann über eine leichte Anpassung der Schriftgröße reden, wenn es um Dekortext geht. Dann aber nur minimal, Gunnar schlug neulich etwas wie calc(1em + 1vw) vor, wenn ich mich recht erinnere. Also: Mindestens das Browser-Default, und 1% Fensterbreite hinzu. Bei 1900px sind das aber schon 19px Extra, es ist also ebenfalls eher für Überschriften als für Normaltext sinnvoll.
Wer größere Schrift sehen will, soll im Browser zoomen. Wenn deine Seite auf bspw. 60em Maximalbreite gestellt ist, wird das beim Zoomen automatisch mehr.
Rolf