Schriftgrößen

[Gerhard]

Hallo,

ist es sinnvoll, die Schriftgrößen mit Media Queries an die einzelnen Viewgrößen anzupassen oder erfolgt dies automatisch in den Geräten (insbesondere in Smartphones)? Gibt es Empfehlungen für die Größen von h1, h2, h3..., oder soll man die Standardwerte der Browser verwenden?

[Der Martin]

Moin!

ist es sinnvoll, die Schriftgrößen mit Media Queries an die einzelnen Viewgrößen anzupassen

generell ist es sinnvoll, die Schriftgröße möglichst wenig "anzufassen". Die Standard-Schriftgröße der meisten Browser (Desktop ebenso wie mobil) ist meist ein vernünftiger Basiswert für Fließtext. Und wenn Nutzer wie ich Probleme mit den mikroskopisch kleinen Standardschriften haben, dann stellen sie halt entweder im Browser oder sogar global im GUI ihres Geräts eine größere Basis-Schriftgröße ein.

Gibt es Empfehlungen für die Größen von h1, h2, h3..., oder soll man die Standardwerte der Browser verwenden?

Standardwerte vom Browser übernehmen ist meist kein Fehler. Wenn du aber andere Abstufungen willst, verwende bitte konsequent em als Größenangabe, das ist dann relativ zur Schriftgröße des Elternelements. Oder rem, das ist relativ zur Schriftgröße des root-Elements. Nur bitte definiere Schriftgrößen nicht in px. Das kann nur schiefgehen.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

generell ist es sinnvoll, die Schriftgröße möglichst wenig "anzufassen".

Das würde ich nicht unterschreiben.

Die Standard-Schriftgröße der meisten Browser (Desktop ebenso wie mobil) ist meist ein vernünftiger Basiswert für Fließtext.

Für meinen Geschmack etwas zu klein. Und es hängt von der Schriftart ab. Bei Calibri bspw. sind die Glyphen bei selber nominaler Schriftgröße deutlich kleiner als bei Helvetica. Guckst du, wenn du Calibri lokal installiert hast, sonst hier ein Screenshot.

Die Schriftgröße des Fließtexts darf auf großen Viewports auch gern etwas größer sein als auf kleinen.

Und wenn Nutzer wie ich Probleme mit den mikroskopisch kleinen Standardschriften haben, dann stellen sie halt entweder im Browser oder sogar global im GUI ihres Geräts eine größere Basis-Schriftgröße ein.

Das können sie tun – wenn sie denn wissen, wie’s geht. Oder zunächst einmal, dass das überhaupt geht.

Aber sollten sie es tun müssen? Die Defaultwerte sollten schon so sein, dass sie für die meisten passen. Das tun sie nicht ganz, IMHO.

Noch eklatanter ist der Defaultwert für den Zeilenabstand – der ist definitiv zu klein. Die WCAG sagt IIRC was vom 1.5-fachen, was ich etwas zu viel finde. Und sowieso ist eine solche Forderung unsinnig, weil der nötige Zeilenabstand von der Größe der Glyphen abhängt, also von der Schriftart. Im o.g. Beispiel ist zu sehen, dass der für Helvetica gute Zeilenabstand für Calibri schon etwas zu viel des Guten ist.

Außerdem hängt der nötige Zeilenabstand von der Satzbreite ab: je länger die Zeilenlänge, desto größer muss der Zeilenabstand sein. (Mit der Viewportbreite variierender Zeilenabstand ist auch in den u.g. Codepens zu sehen.)

Als Richtwert würde ich für font-size: 1.2rem; line-height: 1.4 ansetzen – aber wie gesagt: abhängig von der Schriftart.

Gibt es Empfehlungen für die Größen von h1, h2, h3..., oder soll man die Standardwerte der Browser verwenden?

Standardwerte vom Browser übernehmen ist meist kein Fehler.

Da hier explizit nach Überschriften gefragt wurde: da sind die Defaults für kleine Viewports zu groß. Wo ich oben noch „darf gerne“ sagte, sage ich hier „sollte“: Die Schriftgröße von Überschriften sollte auf großen Viewports etwas größer sein als auf kleinen. Da heißt: das Verhältnis der Schriftgrößen Überschift zu Fließtext variiert mit der Viewportgröße. Anzusehen in diesem und jenem Codepen, beschrieben in jenem Posting.

🖖 Live long and prosper

[Der Martin]

Hallo Gunnar,

Und wenn Nutzer wie ich Probleme mit den mikroskopisch kleinen Standardschriften haben, dann stellen sie halt entweder im Browser oder sogar global im GUI ihres Geräts eine größere Basis-Schriftgröße ein.

Das können sie tun – wenn sie denn wissen, wie’s geht. Oder zunächst einmal, dass das überhaupt geht.

Aber sollten sie es tun müssen?

ja, müssen sie. Leider. Weil sonst die Schriftgrößen auch in anderen Apps oder Desktop-Anwendungen unleserlich klein sind. Als ich mein Handy "from scratch" eingerichtet habe, war mir die Schrift auch generell viel zu klein. Also hab ich nach einer global wirkenden Einstellung gesucht, die Schrift zu vergrößern. Geht!

Auch auf Windows-PCs stelle ich die Basis-Skalierung je nach Bildschirmgröße auch erstmal von 100% (Default) auf 125% (Desktop-Monitor) oder gar 150% (Notebook-Display) ein, damit ich überhaupt was lesen kann.

Und damit hat sich das Thema im Browser automatisch auch erledigt.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Aber sollten sie es tun müssen?

ja, müssen sie. Leider. Weil sonst die Schriftgrößen auch in anderen Apps oder Desktop-Anwendungen unleserlich klein sind. Als ich mein Handy "from scratch" eingerichtet habe, war mir die Schrift auch generell viel zu klein. Also hab ich nach einer global wirkenden Einstellung gesucht, die Schrift zu vergrößern. Geht!

Ja, du als versierter Nutzer findest natürlich die Systemeinstellung.

Mein Punkt ist: Andere werden noch nicht einmal danach suchen.

🖖 Live long and prosper

[Der Martin]

Hi,

ja, müssen sie. Leider. Weil sonst die Schriftgrößen auch in anderen Apps oder Desktop-Anwendungen unleserlich klein sind. Als ich mein Handy "from scratch" eingerichtet habe, war mir die Schrift auch generell viel zu klein. Also hab ich nach einer global wirkenden Einstellung gesucht, die Schrift zu vergrößern. Geht!

Ja, du als versierter Nutzer findest natürlich die Systemeinstellung.

Mein Punkt ist: Andere werden noch nicht einmal danach suchen.

dann haben sie aber systemweit ein Problem, das nicht nur die Anzeige von Webseiten betrifft.

Ich staune manchmal, wenn ich bei Kollegen nebendran sitze: Wie können die aus den Fliegenschissen noch etwas erkennen?

Das gilt sinngemäß ebenso fürs Handy.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Ich staune manchmal, wenn ich bei Kollegen nebendran sitze: Wie können die aus den Fliegenschissen noch etwas erkennen?

Die haben wohl die Systemeinstellung gefunden und noch ein bisschen nach unten gedreht?

Oder sind zufällig darauf gestoßen und wissen jetzt nicht, wie sie’s wieder zurückstellen können. 😉

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Der Martin

Ich staune manchmal, wenn ich bei Kollegen nebendran sitze: Wie können die aus den Fliegenschissen noch etwas erkennen?

Ich pflege bei Texten in Fliegenschissgröße Designer oder Produktmanager immer zu fragen: Was sollen die grauen Linien da?

🖖 Live long and prosper

[JürgenB]

Hallo Gerhard,

normalerweise ist es eine gute Idee, die Schriftgrößen auf ihren Defaultwerten zu lassen.

Wir haben aber vor einiger Zeit mal hier im Forum diskutiert, ob und wie man die Basisschriftgröße an die Viewportbreite anpasst. Ich habe darauf hin in mein CSS folgendes eingebaut:

body {
	font-size: max(1rem, min(0.7rem + 0.7vw, 1.2rem));
	--zeilenhoehe: 1.4;
	@media (width >= 40em) {
		--zeilenhoehe: 1.5;
	}
	line-height: var(--zeilenhoehe);
}

Der Media Query wird nur für die Zeilenhöhe benötigt. Die könnte man aber auch über eine Formel berechnen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

normalerweise ist es eine gute Idee, die Schriftgrößen auf ihren Defaultwerten zu lassen.

Wie ich gerade schon Dem Martin geantwortet habe, ist das nicht unbedingt eine gute Idee.

body {
	--zeilenhoehe: 1.4;
	@media (width >= 40em) {
		--zeilenhoehe: 1.5;
	}
	line-height: var(--zeilenhoehe);
}

Der Media Query wird nur für die Zeilenhöhe benötigt. Die könnte man aber auch über eine Formel berechnen.

Wenn man denn mit calc() schon durch Längen dividieren könnte. Solange man nur durch Skalare dividieren kann, bin ich gespannt, wie du das machen willst. Oder meintest du clamp() wie in diesem Beispiel?

🖖 Live long and prosper

[Gerhard]

Hallo Gunnar,

Oder meintest du clamp() wie in diesem Beispiel?

Zu Deinem Beispiel habe ich einige Fragen.

Warum kommt vor den clamp-Angaben jeweils noch eine feste Wertangabe, z.B.

font-size: 1.2em;
font-size: clamp(1em, 3vw, 1.2em);

Im :root ist line-height 1.5em, in h1 1.1em definiert. Also bei großer Schrift (h1) kleinerer Wert als bei übrigen Texten?

Und überschreibt in h1 der Wert 1.1 nicht den Wert initial? Das gleiche in

	margin-block: 1.5em;
	margin-block: 1lh;         

[Gerhard]

... und ich habe keinen Unterschied bemerkt, nachdem ich

main::before

weggelassen habe.

[Gunnar Bittersmann]

@@Gerhard

... und ich habe keinen Unterschied bemerkt, nachdem ich

main::before

weggelassen habe.

Ja, der Block war nur für mich. Bei der Präsentation Responsive typography hatte ich damit verdeutlicht (die Zeile mit content einkommentieren), dass die Anstandsangabe vom Rand bis zur Grundline für Entwickler wenig Sinn macht. Siehe Slide 15.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

dass die Anstandsangabe

Anstand? Was halte ich denn davon? Abstand!

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Präsentation Responsive typography

Darin verlinkt: Scott Kellums Talk Mapping Typography von der beyond tellerrand (Düsseldorf 2023), den ich wärmstens empfehle anzusehen. Ziemlich nerdig, stillstehende CSS-Animationen für nichtlineare Interpolationen zu verwenden.

So, und nun ratet mal, wo ich gleich hingehe.

🖖 Live long and prosper

[Gerhard]

@@Gunnar Bittersmann

Präsentation Responsive typography

Für mich, einem Nicht-Profi, sind die einzelnen Varianten ohne begleitende Erläuterungen schwer zu verstehen.

So, und nun ratet mal, wo ich gleich hingehe.

Viel Spaß und Erfolg

Gerhard

[Gunnar Bittersmann]

@@Gerhard

Warum kommt vor den clamp-Angaben jeweils noch eine feste Wertangabe, z.B.

font-size: 1.2em;
font-size: clamp(1em, 3vw, 1.2em);

Die zweite Angabe überschreibt die erste – in modernen Browsern.

Alte Browser, die clamp() noch nicht kennen, ignorieren die zweite Angabe und verwenden die erste.

Wenn du sicher bist, dass so ziemlich jeder in deiner Zielgruppe einen Browser verwendet, der clamp() kennt, kannst du die erste Angabe weglassen.

Und wenn es auch in alten Browsern ohne die erste Angabe ansehnlich ist, dann auch.

---

Im :root ist line-height 1.5em, in h1 1.1em definiert. Also bei großer Schrift (h1) kleinerer Wert als bei übrigen Texten?

Genau. 1.5em Zeilenabstand wäre für große Schrift bei Überschriften viel zu viel. Außerdem sind Überschriften selten länger als zweizeilig. Dann hat die erste Zeile Luft nach oben und die zweite Luft nach unten, sodass die Überschrift gut lesbar ist.

Und überschreibt in h1 der Wert 1.1 nicht den Wert initial?

Die Frage verstehe ich nicht. Ist sie mit dem oben Gesagten bereits geklärt?

🖖 Live long and prosper

[Gerhard]

Hallo Gunnar, besten Dank für Deine Aufklärung.

Gerade ist mir folgendes aufgefallen. In Deinem Codepen steht

root {font-size: clamp(1em, 3vw, 1.2em);......

Am 1.11., 15:46 hast Du in diesem Forum geschrieben

body {font-size: clamp(1rem, 0.7rem + 0.7vw, 1.2rem);.... 

... und in dem Beitrag

wieder andere clamp-Angaben.

Was bewirken diese Unterschiede??

[JürgenB]

Hallo Gerhard,

Was bewirken diese Unterschiede??

bei den Versionen skaliert die Schriftgröße unterschiedlich mit der Bildschirmbreite. Hier mal zwei Versionen als Grafik:

https://www.j-berkemeier.de/FktPlot.html?xmin=20;xmax=100;f1=min(max(3*x/100,1),1.5);f2=min(max(0.7+0.7*x/100,1),1.5)

x ist die Bildschirmbreite und y die Schriftgröße in rem. Da meine Plotseite kein clamp kennt, habe ich min/max genommen.

Gruß
Jürgen

[j.j.]

font-size: 1.2em;
font-size: clamp(1em, 3vw, 1.2em);

Hallo, nur mal nebenbei:
Nach meine Meinung und Erahrung ist vmin meistens besser als vw.
Ich kriege regelmäßig sinnvollere Ergebnisse, z.B. (aber nicht nur) am Smartphone im Querformat.

Leider verunmöglichen/erschweren viele Designer (unbeabsichtigt) die Nutzung ihrer Webseiten im Querformat, obwohl es vom Inhalt her sinnvoll wäre. Die Verwendung von font-size: ...vw trägt dazu bei wegen übergroßer Schrift.
(im Beispiel oben ist das wegen der starken Begrenzung kaum ein Problem)

j.j.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn man denn mit calc() schon durch Längen dividieren könnte.

Oh, kann man ja schon – in Safari und Chromia. ☞ stufenlos

Bald kann man den @supports-Block mit den media queries entsorgen.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

clamp(1.15, 1.1 + 0.05 * 100vw/15rem, 1.3)

Das Innenleben von clamp() ist automatisch im calc-Modus? Cool!

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das Innenleben von clamp() ist automatisch im calc-Modus? Cool!

Ja, so wie das schon bei min() und max() der Fall war.

Wenn man also in der CSSBattle calc() verwendet, macht man was falsch. 🤓

🖖 Live long and prosper

[JürgenB]

Hallo Gunnar,

Wenn man denn mit calc() schon durch Längen dividieren könnte.

Oh, kann man ja schon – in Safari und Chromia. ☞ stufenlos

mir wird ganz mulmig, wenn ich sehe, wie da verschiedene Einheiten weggekürzt werden. Ich hatte mal Studenten, die Meter gegen Zentimeter gekürzt haben. Danach bewegte sich der elektromagnetische Puls mit fast 100-facher Lichtgeschwindigkeit 😀.

Bald kann man den @supports-Block mit den media queries entsorgen.

in diesem Fall geht es jetzt schon:

	font-size: clamp(1rem, 0.7rem + 0.7vw, 1.2rem);
	line-height: clamp(1.3rem, 2.5vw, 1.6rem);

oder man setzt davor einen festen Wert.

Gruß
Jürgen

[Der Martin]

Hallo,

mir wird ganz mulmig, wenn ich sehe, wie da verschiedene Einheiten weggekürzt werden. Ich hatte mal Studenten, die Meter gegen Zentimeter gekürzt haben.

ich hab noch nie verstanden, wie jemand nicht in der Lage ist, korrekt kilo gegen Mega oder centi gegen milli zu kürzen.

Danach bewegte sich der elektromagnetische Puls mit fast 100-facher Lichtgeschwindigkeit 😀.

Das sollte einem zu denken geben.

Einen schönen Tag noch
 Martin

[Tabellenkalk]

Hallo,

kilo gegen Mega oder centi gegen milli zu kürzen.

bei kilo vs Mega finde ich nix, aber bei centi und milli lässt sich ja ein i streichen...

scnr

Danach bewegte sich der elektromagnetische Puls mit fast 100-facher Lichtgeschwindigkeit 😀.

Das sollte einem zu denken geben.

wenn man nix erwartet, braucht man auch nix zu denken 😉

Gruß
Kalk

[Auge]

Hallo

Danach bewegte sich der elektromagnetische Puls mit fast 100-facher Lichtgeschwindigkeit 😀.

Das sollte einem zu denken geben.

Ja, und zwar stellt sich die Frage, warum uns die Physiker immer wieder einreden, dass Reisen mit Warp-Geschwindigkeit nicht funktionieren würden. Geht doch ganz offensichtlich. 😆

Laut dem Warp-Rechner auf arndt-bruenner.de liegt die „fast 100-fache Lichtgeschwindigkeit“ bei knapp unter Warp 4. Ein paar Beispiele für Aussagen aus TV-Folgen und Kino-Filmen in Memory Alpha belegen die Berechnung. Andere Beispiele belegen aber auch, dass im Laufe der Zeit sehr viele sehr widersprüchliche Werte verwendet wurden. Soweit zur angeblichen Konsistenz im Star-Trek-Universum. 🤷‍♂️

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Andere Beispiele belegen aber auch, dass im Laufe der Zeit sehr viele sehr widersprüchliche Werte verwendet wurden. Soweit zur angeblichen Konsistenz im Star-Trek-Universum. 🤷‍♂️

Im Jahr 2287 schafft es die Enterprise-A in Nullkommanichts zum Zentrum der Galaxis. (Wieso heißt der deutsche Titel von Star Trek V „Am Rande des Universums“, wo sie doch ins Zentrum fliegen?)

2371 soll die Voyager dann 70 Jahre vom Deltaquadranten zurück zur Erde brauchen‽

Hat Sybok da von allen unbemerkt die Enterprise-A mit einem Sporenantrieb ausgestattet? (Zumindest Spock ist ja damit vertraut.) Gelten für die Reise zu Gott andere Gesetze als für Reisen an Gott vorbei? Und wozu braucht Gott ein Raumschiff?

🖖 Live long and prosper

[Auge]

Hallo

@@Auge

Andere Beispiele belegen aber auch, dass im Laufe der Zeit sehr viele sehr widersprüchliche Werte verwendet wurden. Soweit zur angeblichen Konsistenz im Star-Trek-Universum. 🤷‍♂️

Im Jahr 2287 schafft es die Enterprise-A in Nullkommnichts zum Zentrum der Galaxis.

Nee, die haben nur beim finalen Schnitt die eine Szene, in der der Schriftzug „… 20 Jahre später …“ zu sehen gewesen wäre, rausgeschnitten.

(Wieso heißt der deutsche Titel von Star Trek V „Am Rande des Universums“, wo sie doch ins Zentrum fliegen?)

Dabei hat Sagittarius A*, der/die/das dort, im Zentrum der Galaxis, „residiert“, ja einen zumindest virtuellen Rand.

2371 soll die Voyager dann 70 Jahre von Deltaquadranten zurück zur Erde brauchen‽

Wäre nicht das erste Mal, dass vorhandenes Wissen verloren geht.

Hat Sybok da von allen unbemerkt die Enterprise-A mit einem Sporenantrieb ausgestattet? (Zumindest Spock ist ja damit vertraut.) Gelten für die Reise zu Gott andere Gesetze als für Reisen an Gott vorbei? Und wozu braucht Gott ein Raumschiff?

Und nicht zu vergessen, wer ist Gott und wer zum Teufel hat sich diesen hanebüchenen Unsinn mit dem Sporenantrieb ausgedacht? Und zu allerletzt, warum stand der Ideengeber für den Sporenantrieb noch nicht öffentlichkeitswirksam am Pranger und wurde noch nicht mit jeglicher auf diesem Planeten verfügbaren Katzenscheiße beworfen?

Tschö, Auge

[JürgenB]

Hallo Auge, hallo Gunnar,

leider wird in diesem Zusammenhang nur von der (Über-)Lichtgeschwindigkeit geredet, aber niemand bedenkt die Zeit. Bewegte Uhren gehen langsamer, wer schnell fährt wird nicht alt. Oder hat WARP auch ein Zeitmodul?

Gruß
Jürgen

[Auge]

Hallo

leider wird in diesem Zusammenhang nur von der (Über-)Lichtgeschwindigkeit geredet, aber niemand bedenkt die Zeit. Bewegte Uhren gehen langsamer, wer schnell fährt wird nicht alt. Oder hat WARP auch ein Zeitmodul?

Ja, quasi. man fliegt mit Warp nicht schneller als das Licht, sondern man krümmt dem Raum um das Schiff so, dass sich diese Blase vor dem Schiff ausdehnt und hinten wieder einzieht, ohne dass es in ihr zu relativistischen Effekten kommt. Soweit die Fernsehserientheorie.

Tschö, Auge

[JürgenB]

Hallo Auge,

man ist also gar nicht schneller als das Licht, man nimmt nur eine Abkürzung.

Gruß
Jürgen

[Auge]

Hallo

man ist also gar nicht schneller als das Licht, man nimmt nur eine Abkürzung.

Ja, es ist, wie so oft. Alles Lug und Trug. 😄

Tschö, Auge

[Der Martin]

Hallo,

[...] wer schnell fährt wird nicht alt.

... sondern endet am nächsten Baum oder Brückenpfeiler. *scnr*

Einen schönen Tag noch
 Martin

[JürgenB]

Hallo Martin,

Hallo,

[...] wer schnell fährt wird nicht alt.

... sondern endet am nächsten Baum oder Brückenpfeiler. *scnr*

Den Aufkleber hatte ich etwa eine Woche am Auto, dann war er weg. Zum Glück habe ich zwei geschenkt bekommen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Auge

Und nicht zu vergessen, wer ist Gott und wer zum Teufel hat sich diesen hanebüchenen Unsinn mit dem Sporenantrieb ausgedacht? Und zu allerletzt, warum stand der Ideengeber für den Sporenantrieb noch nicht öffentlichkeitswirksam am Pranger und wurde noch nicht mit jeglicher auf diesem Planeten verfügbaren Katzenscheiße beworfen?

Unpopuläre Meinung: Discovery ist meine Lieblingsserie. So, nun isses raus.

Trotz einiger Unstimmigkeiten: Warum musste die Discovery in die Zukunft springen, wo Control doch schon besiegt war?

Wenn das Wissen von den Sphärendaten zu gefährlich war, na gut. Aber warum musste das Wissen um den Sporenantrieb auch begraben werden?

🖖 Live long and prosper

[Auge]

Hallo

@@Auge

Und nicht zu vergessen, wer ist Gott und wer zum Teufel hat sich diesen hanebüchenen Unsinn mit dem Sporenantrieb ausgedacht? Und zu allerletzt, warum stand der Ideengeber für den Sporenantrieb noch nicht öffentlichkeitswirksam am Pranger und wurde noch nicht mit jeglicher auf diesem Planeten verfügbaren Katzenscheiße beworfen?

Unpopuläre Meinung: Discovery ist meine Lieblingsserie. So, nun isses raus.

Ja nun. Das ist jedem ihr oder sein eigenes. 🙂

Tschö, Auge

[Rolf B]

Hallo Gunnar,

bekanntlich ist

• Warp-Geschwindigkeit immer proportional zur Geschwindigkeit des Plots.
• die TOS Warp-Skala (ÜLF=WF^3) ist nicht identisch zur TNG-Skala (bis Warp 9 hoch 10/3)
• das Technikhandbuch für die Autoren nach Ende der TOS Serie verloren gegangen, weshalb seitdem jeder Autor nach Bedarf eigenen Quatsch erfindet.

Da war K.H.Scheer in Perry Rhodan schon besser. Nachdem ihm das arkonidische Transitionstriebwerk zu viel Kopfschmerzen (buchstäblich) gemacht hatte, schaffte Arno Kalups Linearkonverter einen ÜL-Faktor von mehreren Millionen, womit Rigel (ca 800 LJ) in 1-2 Stunden erreichbar war. Die NX01, die dort mit Warp 4.5 vorbeigezockelt ist als sie in "Broken Bow" die Suliban verfolgten, hätte dafür 800 Jahre gebraucht.

Rolf

[Gunnar Bittersmann]

@@JürgenB

body {
	font-size: max(1rem, min(0.7rem + 0.7vw, 1.2rem));
}

Warum so kompliziert? Exakt dasselbe, nur besser lesbar:

body {
  font-size: clamp(1rem, 0.7rem + 0.7vw, 1.2rem);
}

🖖 Live long and prosper

[JürgenB]

Hallo Gunnar,

@@JürgenB

body {
	font-size: max(1rem, min(0.7rem + 0.7vw, 1.2rem));
}

Warum so kompliziert? Exakt dasselbe, nur besser lesbar:

body {
  font-size: clamp(1rem, 0.7rem + 0.7vw, 1.2rem);
}

weil clamp vom Autor noch nicht ausreichend unterstützt wurde. 😀

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

weil clamp vom Autor noch nicht ausreichend unterstützt wurde. 😀

😄

Ich war beim Vorposting schon drauf und dran, auf Can I use zu verweisen. Aber da ist ja nur die Browserunterstützung angegeben.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich war beim Vorposting schon drauf und dran, auf Can I use zu verweisen. Aber da ist ja nur die Browserunterstützung angegeben.

Business-Idee: eine Website Can you use. (Aber nicht klauen!)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gerhard

ist es sinnvoll, die Schriftgrößen mit Media Queries an die einzelnen Viewgrößen anzupassen oder erfolgt dies automatisch in den Geräten (insbesondere in Smartphones)?

Wie schon geschrieben, sind da einige Anpassungen durchaus sinnvoll. Die müssen aber nicht mit Media-Querys^[1] implementiert werden; die CSS-Funktion clamp() bietet sich dafür an. (Wenn der bevorzugte Wert groß genug ist, dass man keinen Minimalwert braucht, geht auch min().)

In diesem Beispiel hab ich das so für Schriftgrößen von Überschrift und Fließtext sowie für den Zeilenabstand beim Fließtext gemacht.

In jenem Beispiel habe ich wie oben gesagt die Schriftgröße des Fließtexts mit min() angegeben. Die Schriftgrößen der Überschriften sind Vielfache davon:
h3: Basisschriftgröße × k
h2: Basisschriftgröße × k²
h1: Basisschriftgröße × k³
wobei der Faktor k von der Viewportbreite abhängt, wie in jenem Posting beschrieben.

🖖 Live long and prosper

---

1. Dem Martin fällt ein Auge aus dem Gesicht. 😆 ↩︎

[Gerhard]

Hallo,

um Goethe zu zitieren:

Da steh' ich nun, ich armer Tor, Und bin so klug als wie zuvor!

Kein Beitrag ist gekennzeichnet als hilfreich - außer dem einen nichtssagenden von Gunnar.

Wie soll ein Nicht-Profi jetzt entscheiden, was er/sie machen soll?

[Jonathan Harker]

Hallo Gerhard,

Hallo,

um Goethe zu zitieren:

Da steh' ich nun, ich armer Tor, Und bin so klug als wie zuvor!

Kein Beitrag ist gekennzeichnet als hilfreich - außer dem einen nichtssagenden von Gunnar.

Jetzt schon!

Ich würde Martin und Jürgen folgen, die den Standardeinstellungen der Browser vertrauen!

Wie soll ein Nicht-Profi jetzt entscheiden, was er/sie machen soll?

Evtl. könntest du das ausprobieren:

h1, h2, h3 {
  font-size: clamp(1.5rem, 3rem - 1vw, 1rem);
}

Bis bald!
Jonathan

[Gunnar Bittersmann]

@@Jonathan Harker

Kein Beitrag ist gekennzeichnet als hilfreich - außer dem einen nichtssagenden von Gunnar.

Jetzt schon!

Jetzt nicht mehr.

Es war mir gar nicht bewusst, dass hier jeder Beiträge als hilfreich kennzeichen kann. Ich dachte, das wäre dem Threadersteller vorbehalten. Ist das neu?

Ich würde Martin und Jürgen folgen

Also denen, die sich durch Expertise in der technischen Umsetzung, aber nicht in Design auszeichnen?

die den Standardeinstellungen der Browser vertrauen!

Ich habe hier im Thread begründet, warum das keine so gute Idee ist, und Beispiele geliefert, die das veranschaulichen. Wenn du meinen Begründungen widersprechen willst, kannst du das gerne tun, dann können wir reden. Aber sie einfach zu ignorieren, das Gegenteil zu behaupten, ohne dafür eine Begründung zu liefern – das gibt ein Minus. (Keine Ahnung, mit welcher Begründung das jemand neutralisiert hat.)

---

h1, h2, h3 {
  font-size: clamp(1.5rem, 3rem - 1vw, 1rem);
}

Das ist dasselbe wie font-size: 1.5rem. Die Reihenfolge der Argumente ist nicht beliebig.

Und dass die Schrift mit wachsender Viewportgröße kleiner werden soll, ergibt für mich gar keinen Sinn.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

h1, h2, h3 {
  font-size: clamp(1.5rem, 3rem - 1vw, 1rem);
}

Das ist dasselbe wie font-size: 1.5rem. Die Reihenfolge der Argumente ist nicht beliebig.

Und dass die Schrift mit wachsender Viewportgröße kleiner werden soll, ergibt für mich gar keinen Sinn.

Und zuallererst macht es gar keinen Sinn, alle Überschriften gleich groß zu machen und sie damit jeglicher visueller Hierarchie zu berauben.

Kann ich dafür ein zweites Minus vergeben?

🖖 Live long and prosper

[Der Martin]

Hallo Gunnar,

Es war mir gar nicht bewusst, dass hier jeder Beiträge als hilfreich kennzeichen kann. Ich dachte, das wäre dem Threadersteller vorbehalten.

das dachte ich auch mal - aber Denken ist oft Glückssache.

Ist das neu?

Nö, das Markieren als "akzeptierte Antwort" war noch nie eingeschränkt - obwohl eine Beschränkung auf den Thread-Ersteller, wie von dir angedacht, sicher vernünftig wäre. Ich bin jedenfalls auch der Ansicht.

Ich würde Martin und Jürgen folgen

Also denen, die sich durch Expertise in der technischen Umsetzung, aber nicht in Design auszeichnen?

Ich habe nie für mich in Anspruch genommen, ein guter Designer zu sein. Ich bin Ingenieur und als solcher vor allem für technische Umsetzungen zuständig.

Aber ich bin auch ein Vertreter der Linie, dem Nutzer so viel Freiheit zu lassen wie es die verwendete Technik hergibt. Dass Voreinstellungen von Software-Merkmalen nicht immer sinnvoll sind, ist eine andere Sache.

Und dass die Schrift mit wachsender Viewportgröße kleiner werden soll, ergibt für mich gar keinen Sinn.

Deswegen meine Andeutung, die Basis-Schriftgröße so einzustellen, dass man selbst gut damit zurechtkommt.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Gerhard

Wie soll ein Nicht-Profi jetzt entscheiden, was er/sie machen soll?

Wenn du uns nicht gut genug kennst, um anhand der Namen zu wissen, wer sich eingehender mit Typografie beschäftigt und wem du eher trauen kannst, bleibt dir nichts weiter übrig, als die im Thread begebenen Begründungen zu lesen, die Beispiele anzusehen und für dich zu entscheiden, was du daraus machst.

🖖 Live long and prosper

[Gerhard]

@@Gerhard

Wie soll ein Nicht-Profi jetzt entscheiden, was er/sie machen soll?

Wenn du uns nicht gut genug kennst, um anhand der Namen zu wissen, wer sich eingehender mit Typografie beschäftigt und wem du eher trauen kannst, bleibt dir nichts weiter übrig, als die im Thread begebenen Begründungen zu lesen, die Beispiele anzusehen und für dich zu entscheiden, was du daraus machst.

🖖 Live long and prosper

Die Argumente und Widersprüche habe ich gelesen. Aber was nützt das, wenn man nicht weiß, wer von Euch der Spezialist zu diesem Thema ist?

Plädoyer der Klägers; Antwort des Richters: Sie haben Recht.
Plädoyer des Angeklagten; Antwort des Richters: Sie haben Recht.
Ausruf eines Zuschauers: Aber Herr Richter, es können doch nicht beide Recht haben.
Antwort des Richters: Sie haben Recht.

[Auge]

Hallo

Wie soll ein Nicht-Profi jetzt entscheiden, was er/sie machen soll?

Wenn du uns nicht gut genug kennst, um anhand der Namen zu wissen, wer sich eingehender mit Typografie beschäftigt und wem du eher trauen kannst, bleibt dir nichts weiter übrig, als die im Thread begebenen Begründungen zu lesen, die Beispiele anzusehen und für dich zu entscheiden, was du daraus machst.

🖖 Live long and prosper

Die Argumente und Widersprüche habe ich gelesen. Aber was nützt das, wenn man nicht weiß, wer von Euch der Spezialist zu diesem Thema ist?

Guinnar schrieb nicht, su solltest den Spezialisten folgen, sondern – unabhängig vom Verfechter – den Argumenten.

Und wenn du dazu Fragen hast, stelle sie einfach hier.

Tschö, Auge

[Auge]

Hallo

ist es sinnvoll, die Schriftgrößen mit Media Queries an die einzelnen Viewgrößen anzupassen …

Ja.

… oder erfolgt dies automatisch in den Geräten (insbesondere in Smartphones)?

Jein. Ja, es gibt auf jedem Gerät eine Standardschriftgröße, die man als Nutzer selbst festlegen kann – was aber wohl die allermeisten Benutzer nicht tun. Die Schriftgröße ist somit oft nicht passend zum Benutzer des Geräts festgelegt. Auf Desktop-Browsern kann man ja noch mal separat (typischerweise mit [STRG]+[+] beziehungsweise [STRG]+[-] an der Schriftgröße oder genereller dem Seitenzoom drehen. Wenn man das weiß, macht man das bei Bedarf. Man kann auch für die Anzeige im Browser die Standardschriftart und Schriftgröße (inklusive Mindestschriftgröße) festlegen. Wenn man das weiß, macht man das bei Bedarf.

Ich zum Beispiel tue das, weil mir die normalerweise in den Browsern voreingestellte Größe von 16px nicht mehr ausreicht. Viele andere tun das aber nicht und quälen sich mit der oft zu kleinen Schrift. Erst recht ist das dan quälend, wenn ohne Festlegung einer Mindestschriftgröße eine Webseite eine fliegenschissgroße Schrift verwendet. Früher war oft eine Schrift der Größe 11px oder 12px festgelegt, was auf einem 15-Zoll-CRT-Bildschirm mit seiner niedrigen Auflösung lesbar war, aber mit den heutigen Displays (Desktop oder Mobil) per Definition unleserlich ist.

Gibt es Empfehlungen für die Größen von h1, h2, h3..., oder soll man die Standardwerte der Browser verwenden?

Für den Fließtext sollte man auf großen Displays eine leicht größere Schriftgröße verwenden als es die Vorgabe ist. Überschriften sollen ihre Reihenfolge abbilden, H1 > H2 > H3 und so weiter. Mir persönlich sind aber die in den Browser-Styles vorgegebenen Größenunterschiede zu groß, weshalb ich die Überschriftengrößen manipuliere und kleiner mache, sie aber dennoch bemerkbar belasse. Man soll ja sehen, wo in der Struktur man sich befindet.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

ist es sinnvoll, die Schriftgrößen mit Media Queries an die einzelnen Viewgrößen anzupassen …

Ja.

Hm, die Frage „ist es sinnvoll, die Schriftgrößen an die einzelnen Viewgrößen anzupassen“ würde ich auch bejahen.

Od es nun sinnvoll ist, das mit mit Media-Queries zu tun, oder ob man das besser stufenlos mit clamp() macht … ich würde da i.d.R. letzteres präferieren. Das hängt aber auch davon ab, ob man mit Media-Queries irgendwelche radikalen Layoutänderungen macht.

Beim Tagesspiegel haben wir Media-Queries im Einsatz.

🖖 Live long and prosper

[Matinee]

Hallo Gerhard, also ich bin keiner der Experten hier, schlage mich aber gerade mit der responsiven Schrift meiner sehr textreichen und vielfältig strukturierten Seiten rum, einer Artikel-Website, mit mehreren Überschriften-Ebenen, viel Fließtext und kleineren "Sonder-Text-Abschnitten", die ebenfalls größer/kleiner als der Fließtext sind, z.B. Table of content, footer-Text, Quasi-Überschriften, die aber keine h sind, unterschiedliche Schriftarten, figcaptions usw.

Wenn du so eine Site hast, kommen die Argumente von Gunnar ("hängt von vielen Faktoren wie Schriftart, Zeilenlänge, Zeilenhöhe, Fettungen, Absatzlänge") voll zum Tragen.

Mit der Schriftgröße ändern sich dann oft auch gewisse Abstände und lange Worte am rechten Rand brechen auf eine neue Zeile um, was unschöne Lücken hinterlässt und den Absatz weiter vergrößert, weil sich mehr Zeilen ergeben.

Nav-anchors und Überschriften können sehr unschön umbrechen.

Eine Schriftart kann relativ groß gut lesbar aussehen, aber wenn es mal kleiner als soundsoviel px wird, sieht sie nicht mehr gut aus und ist auch unabhängig von der Schriftgröße nicht mehr gut lesbar oder sieht einfach seltsam aus.

Das alles "solltest" du m.E. individuell so gut wie möglich explizit regeln und besser nicht dem Browser oder Einstellungskünsten der User überlassen. Das kann er dann ja ggf. noch immer machen.

---

Grüße,

Matinee