Wie konvertiere ich Zeilenabstand und Kerning, die in CSS-Stile ausgedrückt werden?

Ich habe einen Design-/Stilleitfaden für eine Website erhalten, auf der die Schriftarten in Punkten (pt) angegeben sind, sowie zusätzliche Zeilenabstands- und Kerning-Anpassungen – z.

Ich möchte em anstelle von pt oder px im CSS verwenden und gehe (mit reset) von einer Basisschriftgröße von 16px aus. Das Gespräch über die Kernschriftgröße kann ich führen, aber ich weiß nicht, was ich mit dem Zeilenabstand und dem Kerning tun soll?

(PS Ich weiß, dass dies bedeutet, dass die Schriftart auf verschiedenen Geräten / Browsern unterschiedlich dargestellt wird. Ich muss nur irgendwo anfangen.)

[UPDATE: Ich habe ein Google-Dokument mit der Konvertierung von pt in px / em erstellt]

Antworten (1)

Kerning entspricht.class { letter-spacing: Xem; }

Führen entspricht.class { line-height: Xem; }

Verwenden Sie genau dieselbe Konvertierung, die Sie für die Schriftgröße verwenden, um die richtigen em-Werte zu erhalten. 1pt = 1px

Um spät am Tag darauf zurückzukommen - (und einen Typografiekurs zu veröffentlichen) - Kerning bezieht sich speziell auf Buchstabenpaare (z. B. AW, AY usw.) und unterscheidet sich von "Tracking", das sich auf den Abstand zwischen ihnen bezieht Briefe im Allgemeinen. Der CSS-Stil „letter-spacing“ bezieht sich auf „tracking“ und nicht auf „kerning“, was in CSS nicht direkt verwaltbar ist. Es gibt JS-Bibliotheken, die dabei helfen, und einen nicht sehr gut unterstützten CSS-Stil {text-rendering: optimizeLegibility;}, mit dem sich der Browser selbst optimieren kann.
word-spacingentspricht Tracking.
Tracking[1] ist der Abstand zwischen Zeichen, nicht Wörtern. Gemäß der formalen Definition von Wort- und Buchstabenabstand[2], wodurch der Buchstabenabstand dem Tracking entspricht. [1] adobe.com/uk/type/topics/glossary.html#tracking [2] w3.org/TR/CSS2/text.html#spacing-props
Wie konvertiere ich Zeilenabstand und Kerning, die in CSS-Stile ausgedrückt werden?
AntwortenHierDatenschutz-Bestimmungen1y, 0v