Welche Einheit für Schriftgröße / Längenangaben

[Matthias Scharwies]

Servus!

Welche Einheiten verwendet ihr für Schriftgrad und Längenangaben?

MrMurphy hatte hier folgendes vorgeschlagen:

Aktuell sind folgende Einheiten sinnvoll:

Für Schriftgrößen rem.

Für padding, margin und ähnliche rem oder %, wobei nur eine Nachkommastelle zulässig ist. Wobei % nicht immer zulässig ist. Wenn das mal nicht funktionieren sollte einfach probehalber durch rem ersetzen, grade bei margin-top und margin-bottom.

Für Bildergrößen, media-queries, border, border-radius und ähnliches weiterhin px.

em ist heutzutage überflüssig geworden.

Gruss

MrMurphy

Was denkt ihr?

Vielen Dank im Voraus!

Matthias

[Jörg Reinholz]

Moin!

Außer beim border-radius für alle Boxen, die Text enthalten und deren Größe (auch padding, ggf. margin) also mit em oder rem definiert sind, würde ich da mit MrMurphy mitgehen. Die würde ich nämlich ebenfalls in em oder rem definieren.

Jörg Reinholz

[Gunnar Bittersmann]

@@Matthias Scharwies

Welche Einheiten verwendet ihr für Schriftgrad und Längenangaben?

Die jeweils passenden. Für Schriftgrößen rem oder em, für Längenangaben %, rem, em bzw. px.

MrMurphy hatte hier folgendes vorgeschlagen:

Du hast auch die Antworten darauf gelesen?

Aktuell sind folgende Einheiten sinnvoll: Für Schriftgrößen rem.

Kann man so pauschal nicht sagen. em kann durchaus sinnvoll sein, um sich auf die Schriftgröße des Elternelements zu beziehen.

Nachtrag: Dafür prädestinierte Bespiele hatte ich genannt.

Für padding, margin und ähnliche rem oder %, wobei nur eine Nachkommastelle zulässig ist.

Kann man so pauschal nicht sagen. em kann durchaus sinnvoll sein, um sich auf die Schriftgröße des Elements zu beziehen.

Der vertikale Abstand zwischen Textabsätzen wird oft auf die jeweilige Zeilenhöhe gesetzt, um den vertikalen Rhythmus einzuhalten. Hierfür ist em richtig, rem falsch.

Für Bildergrößen, media-queries, border, border-radius und ähnliches weiterhin px.

Nei-en! Für media queries em, nicht px. Auch border-radius wird man eher abhängig von der Schriftgröße angeben, also in em oder rem.

Einzig für dünne(!) border halte ich px für sinnvoll.

Bei Bildgrößen kommt’s drauf an, ob die Bilder im Browser skaliert werden sollen. Da das Ressourcen frisst, möchte man Bilder vielleicht in Originalgröße darstellen, dann px. Owohl: wozu braucht man dann überhaupt eine Angabe?

Beim responsive design ist % für Bildgrößen oft eine gute Wahl. (100% des Elternelements)

Die Größe von Icons wird man relativ zur Schriftgröße angeben, also in em. Oder relativ zur Basisschriftgröße in rem.

em ist heutzutage überflüssig geworden.

Quatsch.

LLAP

[Jörg Reinholz]

Moin!

Bei Bildgrößen kommt’s drauf an, ob die Bilder im Browser skaliert werden sollen. Da das Ressourcen frisst, möchte man Bilder vielleicht in Originalgröße darstellen, dann px. Owohl: wozu braucht man dann überhaupt eine Angabe?

Das weisst Du doch. Damit bei langsamen Verbindungen der Browser die Webseite nicht neu rendern muss (nachdem er endlich weiß, wie groß die Grafik ist) und den Text munter verschiebt während der Leser zu lesen versucht.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Bei Bildgrößen kommt’s drauf an, ob die Bilder im Browser skaliert werden sollen. Da das Ressourcen frisst, möchte man Bilder vielleicht in Originalgröße darstellen, dann px. Owohl: wozu braucht man dann überhaupt eine Angabe?

Das weisst Du doch. Damit bei langsamen Verbindungen der Browser die Webseite nicht neu rendern muss (nachdem er endlich weiß, wie groß die Grafik ist) und den Text munter verschiebt während der Leser zu lesen versucht.

Zu diesem Zweck würde ich die Größe aber im HTML, nicht im Stylesheet angeben:
<img src="…" alt="…" width="400" height="225"/> (ohne px!)

LLAP

[Camping_RIDER]

Aloha ;)

Verständnisfrage / Anmerkung:

Das weisst Du doch. Damit bei langsamen Verbindungen der Browser die Webseite nicht neu rendern muss (nachdem er endlich weiß, wie groß die Grafik ist) und den Text munter verschiebt während der Leser zu lesen versucht.

Zu diesem Zweck würde ich die Größe aber im HTML, nicht im Stylesheet angeben:
<img src="…" alt="…" width="400" height="225"/> (ohne px!)

Wieso? Damit die Information sofort da ist? Ich gehe mal davon aus, dass selbst bei einer langsamen Internetverbindung das entsprechende Stylesheet (im Gegensatz zur Bilddatei) sehr, sehr schnell geladen ist.

So schnell, dass es imho gerechtfertigt ist, von "sofort" zu sprechen.

Und wenn schon die Größe im HTML, dann doch als inline-style und nicht als Attribut, oder?

Mir ist einfach der Gedankengang, der dich zur Wahl genau dieser Lösung geleitet hat, nicht ganz klar...

Grüße,

RIDER

[Matthias Apsel]

Hallo Camping_RIDER,

Zu diesem Zweck würde ich die Größe aber im HTML, nicht im Stylesheet angeben:
<img src="…" alt="…" width="400" height="225"/> (ohne px!)

Wieso? Damit die Information sofort da ist? Ich gehe mal davon aus, dass selbst bei einer langsamen Internetverbindung das entsprechende Stylesheet (im Gegensatz zur Bilddatei) sehr, sehr schnell geladen ist.

Genau. Das Stylesheet schon, die Selektion aber nicht. Damit gibt es unschöne Ruckler beim Laden und ggf. funktionieren auch bei schnellen Internetverbindungen Links auf Anker nicht korrekt, wenn dazwischen noch Bilder unbekannter Größe sind.

Und wenn schon die Größe im HTML, dann doch als inline-style und nicht als Attribut, oder?

Nö. Der Platz über die Attribute wird bereits beim Aufbau der Seite bereitgestellt, bei inline-styles ist dies nicht der Fall.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Camping_RIDER

Zu diesem Zweck würde ich die Größe aber im HTML, nicht im Stylesheet angeben:
<img src="…" alt="…" width="400" height="225"/> (ohne px!)

Wieso? Damit die Information sofort da ist? Ich gehe mal davon aus, dass selbst bei einer langsamen Internetverbindung das entsprechende Stylesheet (im Gegensatz zur Bilddatei) sehr, sehr schnell geladen ist.

Und bei gar keiner Internetverbindung? Just in dem Moment, da das Stylesheet angefordert wird, fährt der Zug in einen Tunnel …

Um auf der Sicheren Seite zu sein, geht man am besten von gar nichts aus.

Und wenn schon die Größe im HTML, dann doch als inline-style und nicht als Attribut, oder?

Nö, wieso? Bei der (wahren) Größe eines Bildes handelt sich nicht um Angaben zur Gestaltung, sondern um Meta-Informationen zu dem Bild, also um Attribute des Bildes.

LLAP

[Matthias Scharwies]

MrMurphy hatte hier folgendes vorgeschlagen:

Du hast auch die Antworten darauf gelesen?

Nein, ich hatte mir das nur wegen der Mindestschriftgröße notiert. Danke für die vielen Anregungen.

Hier ist der Wiki-Eintrag: Relative Längenmaße

Wenn ihr noch etwas zu bessern habt, nur zu!

Schöne Feiertage!

Matthias

[Felix Riesterer]

Lieber Gunnar,

Für Bildergrößen, media-queries, border, border-radius und ähnliches weiterhin px.

Nei-en! Für media queries em, nicht px. Auch border-radius wird man eher abhängig von der Schriftgröße angeben, also in em oder rem.

Du meinst also nicht sowas @media(max-width: 980px) {...}, sondern eher das hier @media(max-width: 40em) {...}? Das musst Du mir aber hinsichtlich Sinn und Funktion etwas näher erklären!

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Du meinst also nicht sowas @media(max-width: 980px) {...}, sondern eher das hier @media(max-width: 40em) {...}?

Ja, das meine ich. Im Sinne von mobile first aber eher min-width.

Das musst Du mir aber hinsichtlich Sinn und Funktion etwas näher erklären!

Warum immer ich? Darf’s auch Väterchen Frost sein?

TL;DR: 1. Media queries sollten sich nach dem Inhalt richten, nicht nach Geräten. Für Inhalte ist Pixel eine denkbar schlechte Einheit.

2. Nutzer zoomen. “When we use pixels…things don’t work so great.”

LLAP