Ist die Debatte über em VS px VS% in der Typografie noch gültig?

8

Ich habe ein paar Artikel darüber gelesen, warum Ems in der Typografie besser sind als px. Und die Basis muss in% sein, das Beste ist sogar zu haben body{ font-size:62.5%; }.

Einer der besseren Artikel, die ich finden konnte, befindet sich hier: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Grundsätzlich heißt es, dass px auf Websites und Geräten nicht gut skaliert. Ich habe immer Typografie in px gemacht und nie irgendwelche Probleme gefunden. Ich habe auch mit einigen CSS-Frameworks und einigen WordPress-Themen gearbeitet, und ich sehe immer, dass nur der normale px verwendet wird.

Jetzt sehe ich, dass die meisten Artikel geschrieben wurden, die größtenteils von vor einigen Jahren stammen. Ich wollte wissen, ob es immer noch stimmt, dass px nicht gut skaliert, oder ob dies für die modernen Browser und Geräte kein Punkt mehr ist .

Als Randnotiz. Ich habe sogar auf einigen Websites gelesen und gesehen, dass die Leute sogar so weit gehen, um all ihr Styling in Ems zu machen. Zum Beispiel werden die Polsterung und die Ränder in em's gemacht.

Ist dies erforderlich, wenn Sie eine gute Skalierungswebsite haben möchten?

website-design typography Saif Bechan
quelle
2
Um die Sache noch verwirrender zu machen, unterstützen die meisten modernen Browser relative ems oder rems snook.ca/archives/html_and_css/font-size-with-rem .
Paulmorriss
Es gibt eine neuere, bessere Antwort auf StackOverflow: stackoverflow.com/questions/11799236/…
Denis de Bernardy

Antworten:

3

Meine Antwort, denn der Text selbst ist ein klares "Nein". Gute Browser betrügen (wie sie sollten), wenn es um die Skalierung von Schriftarten geht, die in Pixeleinheiten angegeben sind. Der Webentwickler sollte unabhängig von Unterschieden bei den Geräten sein, auf denen der Inhalt gerendert wird.

Versuchen Sie dies im w3Schools Tryit-Editor :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Halten Sie dann die Strg-Taste gedrückt und scrollen Sie mit dem Mausrad oder drücken Sie Strg-Numerisch +. Sie sollten alle in einem guten Browser gleichmäßig skalieren.

Es kann nicht garantiert werden, dass die Pixel gleichmäßig so hoch sind, dass die Auflösung immer 96 DPI beträgt, und die Benutzereinstellungen gelten möglicherweise für das Hoch- oder Herunterskalieren aller Inhalte. Vor diesem Hintergrund berücksichtigen die meisten Browser diese Auflösungsunterschiede und skalieren die Ausgabe entsprechend der spezifischen Hardware / Einstellungen. Wenn ein Browser die tatsächlichen Pixeleinheiten strikt anwenden würde, wäre der Browser (oder das Hardwaregerät, auf dem er ausgeführt wird) dazu verdammt, vom Endbenutzer als Fehler wahrgenommen zu werden.

Beachten Sie jedoch, dass HTML nicht für die Skalierung optimiert ist, sondern für die Rückführung von Text in ein möglichst breites Auflösungsseitenverhältnis (Breite geteilt durch Höhe). Browser unterscheiden sich in der Skalierung und den Rändern, wenn sie in verschiedenen Einheiten angegeben werden. Für wirklich skalierbare Designs (z. B. wenn die Position auf dem Hintergrund wichtig ist) sollte die Verwendung eines skalierbaren, nicht fließenden Formats wie SVG in Betracht gezogen werden . Polsterung und Margen in Prozent sind immer riskant!

Wenn Sie einen Bildhintergrund oder ähnliches verwenden und möchten, dass der Abstand oder der Rand eine bestimmte Anzahl von Pixeln nach innen aufweist, sollten Sie diese Ränder und den Abstand in Pixeleinheiten angeben!

Louis Somers
quelle
1
Nur ein Punkt - die Funktion "Textgröße" im IE skaliert keine Schriftarten, die explizit mit ptoder festgelegt wurden px.
Zhaph - Ben Duguid