Schriftgrösse der Bildschirmbreite anpassen ?

[Philip]

Gibt es eine Möglichkeit die Schrittgröße an das Ausgabe Medium anzupassen. Ich meine das so, wenn ich z.B. einen Titel oder Satz habe wie

"Politik und Fußball passt nicht zusammen?"

und das AusgabeMedium 900 Pixel Breit ist, das die Schrittgröße automatisch so angepasst wird, das der Satz die richtige Größe hat, ohne zu klein oder zu Groß und einen Zeilenumbruch erhält. Philip

[Gunnar Bittersmann]

@@Philip

Gibt es eine Möglichkeit die Schrittgröße an das Ausgabe Medium anzupassen.

Ja, mit JavaScript.

LLAP 🖖

[Christian Kruse]

Hallo Philip,

Gibt es eine Möglichkeit die Schrittgröße an das Ausgabe Medium anzupassen. Ich meine das so, wenn ich z.B. einen Titel oder Satz habe wie

"Politik und Fußball passt nicht zusammen?"

und das AusgabeMedium 900 Pixel Breit ist, das die Schrittgröße automatisch so angepasst wird, das der Satz die richtige Größe hat, ohne zu klein oder zu Groß und einen Zeilenumbruch erhält.

Du kannst vw als Schriftgröße angeben, etwa so. Wenn du es noch spezifischer brauchst, kannst du eventuell zusätzlich noch mit media queries arbeiten.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Du kannst vw als Schriftgröße angeben, etwa so.

Und wie soll damit „das die Schrittgröße automatisch so angepasst wird, das der Satz die richtige Größe hat, ohne zu klein oder zu Groß und einen Zeilenumbruch erhält“ erfüllt werden?

Allegemein ist font-size: 5vw keine gute Idee. Bei schmalen Viewports wird die Schriftgröße unleserlich winzig.^[1]

In die Berechnung muss schon eine Mindestschriftgröße mit rein: font-size: calc(0.8rem + 3vw)

LLAP 🖖

---

1. Ich weiß, das ist in meinem Beispiel auch so. ↩︎

[TS]

Hello Gunnar,

Allegemein ist font-size: 5vw keine gute Idee. Bei schmalen Viewports wird die Schriftgröße unleserlich winzig.[^1]

In die Berechnung muss schon eine Mindestschriftgröße mit rein: font-size: calc(0.8rem + 3vw)

Könntet Du bitte noch erklären, wie sich das mit der Viewport-Width berechnet? In welcher Einheit wird die denn normalerweise gemessen? Sind das nicht Pixel?

Irgendwie leuchtet mir das nicht ein, wie ein vermutlich doch recht großer Wert sich auf meistens doch eher kleine Font-Size-Werte auswirkt.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

In die Berechnung muss schon eine Mindestschriftgröße mit rein: font-size: calc(0.8rem + 3vw)

Könntet Du bitte noch erklären, wie sich das mit der Viewport-Width berechnet? In welcher Einheit wird die denn normalerweise gemessen? Sind das nicht Pixel?

Irgendwann muss zur Ausgabe auf den Bildschirm in Device-Pixel umgerechnet werden, ja.

Zur Erklärung beziehe ich mich jetzt aber mal auf CSS-Pixel, im Folgenden „px“ genannt.

Angenommen, der Viewport ist 320px breit und die Basisschriftgröße ist 16px. Dann ist die berechnete Schriftgröße 0.8 · 16px + 0.03 · 320px = 12.8px + 9.6px = 22.4px.

Bei einer Viewportbreite von 1440px ergibt sich: 0.8 · 16px + 0.03 · 1440px = 12.8px + 43.2px = 56px.

Irgendwie leuchtet mir das nicht ein, wie ein vermutlich doch recht großer Wert sich auf meistens doch eher kleine Font-Size-Werte auswirkt.

Du warst nicht dem Irrtum aufgesessen, vw hieße viewport width? Es sind Prozent der Viewportbreite.

LLAP 🖖

[TS]

Hello,

Schon mal Danke für den ersten Erklärungsansatz ;-)

Irgendwie leuchtet mir das nicht ein, wie ein vermutlich doch recht großer Wert sich auf meistens doch eher kleine Font-Size-Werte auswirkt.

Du warst nicht dem Irrtum aufgesessen, vw hieße viewport width? Es sind Prozent der Viewportbreite.

Nicht vollständig. Dass es "der 100ste Teil der Viewportbreite" sein soll, hatte ich wohl gelesen. Es sind also auch nicht "Prozent der Viewportbreite", denn dazu würde eine zweite Bezugsgröße fehlen. Aber irgendwie laufen meine Versuche, daraus eine verlässliche Darstellungsgröße zu entwickeln, immer noch in die Irre. Ich werde noch eine Weile üben und mich dann dazu nochmal melden.

Liebe Grüße
Tom S.

[Auge]

Hallo

Dass es "der 100ste Teil der Viewportbreite" sein soll, hatte ich wohl gelesen. Es sind also auch nicht "Prozent der Viewportbreite", denn dazu würde eine zweite Bezugsgröße fehlen.

???

Der 100-ste Teil der Viewportbreite enspricht aber sowas von exakt einem Prozent der Viewportbreite. Welche zweite Bezugsgröße fehlt dir denn hier?

Tschö, Auge

[Gunnar Bittersmann]

@@TS

"der 100ste Teil der Viewportbreite" […] nicht "Prozent der Viewportbreite"

Boing!

denn dazu würde eine zweite Bezugsgröße fehlen.

„Prozent von“ bezieht sich genau wie „Teil von“ auf eine Bezugsgröße.

„Prozent von“ ist ja nichts anderes als „Teil von“ – eben der 100ste Teil.

LLAP 🖖

[TS]

Hello,

@Auge
@Gunnar Bittersmann

ich habe das inzwischen auch verstanden, wie es gemeint ist.

Mit '%' wird allerdings immer das {(Verhältnis zwischen zwei Größen) * 100} bezeichnet.
Wenn nun eine der Größen die Viewportbreite in Pixeln ist, was ist dann die zweite Größe?

Darüberhinaus ist mir die Rechnung von Gunnar noch nicht verständlich. Aber dazu gebt mir doch bitte noch etwas Zeit zum Nachdenken und Suchmaschinieren.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Mit '%' wird allerdings immer das {(Verhältnis zwischen zwei Größen) * 100} bezeichnet.
Wenn nun eine der Größen die Viewportbreite in Pixeln ist, was ist dann die zweite Größe?

Der zweite Summand in calc(0.8rem + 3vw).

Darüberhinaus ist mir die Rechnung von Gunnar noch nicht verständlich. Aber dazu gebt mir doch bitte noch etwas Zeit zum Nachdenken und Suchmaschinieren.

An 3% = 0.03 sollte es nicht hängen?

LLAP 🖖

[TS]

Hello,

ok, eindeutig ein Fall von

Brett vorm Kopf :-O

Liebe Grüße
Tom S.

[Philip]

ich verstehe nicht ganz

https://codepen.io/anon/pen/awmEae?editors=1100#0

das hat keinerlei Auswirkung auf den Text

[Henry]

Hallo,

ganz zufällig habe ich mich viel damit die letzten Tage beschäftigt. Erst mal zur Lösung: vw wurde schon gesagt, besser klappts noch(für mich zumindest) mit vmin

body{
font-size: 12px; /* Browser die V-Werte nicht verstehen.*/
font-size: 3vmin;
}

Auch der zusätzlich Hinweis mit media queries wurde schon gegeben. Nicht unbedingt notwendig aber als Feinschliff ganz gut. Beispiel:

@media screen and (max-width: 820px)
{
body{font-size:4vmin;} 
}

Noch ein hilfreicher Link: *englisch https://css-tricks.com/viewport-sized-typography/

Nun zum Wesentlichen: Ja es geht und für meine Ansprüche auch wie gewollt. Aber bei der Nutzung es gibt einiges zu bedenken:

• -Viele Handys/Tablets und deren Browser bringen mittlerweile schon von Haus aus Tools mit, die eine seperate Textsteuerung ermöglichen, leider auch einige automatisch(die dadurch nicht genau vorhersehbar sind).

• -Die Zoomfunktion des Browsers hat keine Wirkung mehr auf die Größe der Texte.

• +Immer proportional wie gewollt auf dem Bildschirm egal ob Handy oder 100zoll Riesen-TV.

Gruss
Henry