Wie berechnet man den CSS-Buchstabenabstand im Vergleich zum “Tracking” in der Typografie?

Ich habe Anweisungen von einem Grafikdesigner für ein Layout, das für einige Elemente “Spur 100” angibt. Im CSS letter-spacing ist die äquivalente Eigenschaft für “tracking”.

Wie drücken Sie bei einem gegebenen Tracking-Wert diesen Wert als CSS-Wert in Pixeln aus?

Müssen Pixel verwendet werden? Die Conversions, die ich gefunden habe, sind ein Tracking-Wert von 1000, der 1 em in CSS entspricht, also sollte Tracking 100 in Ihrem Fall 0,1 em sein.

BEARBEITEN

Verwenden Sie diese Seite, um von EM zu Pixeln zu wechseln PXtoEM.com. Für Ihren speziellen Fall werden 0,1 em in 2px konvertiert. Dies basiert jedoch auf einer 16pt-Schriftart, sodass Sie die von Ihnen verwendete spezifische Schriftgröße anpassen müssen.

TL;DR: Teilen Sie das Tracking durch 1000 und verwenden Sie es em‘s

Ein bisschen Hintergrundwissen dazu letter-spacing wird immer auf Text angewendet, daher sollten wir eine relative Längeneinheit verwenden. Wie font-size kann durch den Benutzer oder sogar durch Kaskade geändert werden.

Das Beste Längeneinheit für Text ist die em Einheit.

Diese Einheit repräsentiert die berechnete Schriftgröße des Elements. Wenn es für die Eigenschaft font-size selbst verwendet wird, stellt es die geerbte Schriftgröße des Elements dar.
CSS-Längen – Mozilla Developer Network

Warum ist Tracking anders?

Layout-Apps wie Photoshop, Illustrator und InDesign von Adobe verwenden emin ihrem Tracking, aber manipulieren Sie die Einheit so, dass es für Designer einfacher ist, mit ihr zu spielen. Um es ihnen leichter zu machen mal es um 1000.

Konvertieren von Tracking zurück zu Whole em‘s

Dazu müssen wir nur die Tracking-Nummer durch 1000 dividieren, um die Einheit wieder auf ein ganzes em zu bringen, das CSS verwenden kann.

So 50/1000 = 0.05em.

Berechnen Sie dies in CSS/SCSS

Wenn Sie verwenden SCSS und eine wiederverwendbare Lösung wollen – hier ist ein Mixin.

// Convert illustrator, indesign and photoshop tracking into letter spacing.

@function tracking( $target ){
  @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
  letter-spacing: tracking( $target );
}

Um die oben genannten Funktionen zu verwenden, können Sie dies einfach tun.

.example {
  @include tracking(50);
}

Alternativ können Sie einfach ohne Mixin zur Mathematik inline gehen, damit es weniger abstrahiert ist:

.example{
  letter-spacing: #{(50/1000)}em;
}

Die Ausgabe für die obigen Beispiele lautet:

.example {
  letter-spacing: 0.05em;
}

Notiz:
Sie sollten keinen pixelbasierten Wert verwenden, da Pixel fest sind und unterbrechen, wenn:

1. Der Designer ändert die Schriftgröße. Sie müssten den Wert neu berechnen.

2. Wenn der Benutzer seine Textgröße ändert, erscheint das Design Ihrer Website nicht wie gewünscht oder ist sogar unleserlich.

Darüber hinaus rendern Browser Text anders als die Grafikdesignprogramme. Wundern Sie sich also nicht, wenn der Designer bei der Überprüfung der Implementierung die Laufweite/den Buchstabenabstand verändert.

Tracking-Conversion-CSS „letter-spacing“

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

Zum größten Teil sind die obigen Antworten genau genug, aber die 1000, die verwendet wird, geht davon aus, dass Ihre Schriftart eine Em-Größe von 1000 hat, und das ist nicht immer der Fall. Ich habe Schriftarten gesehen, die eine Em-Größe von 1024 haben, und einige, die sogar 2048 waren, was offensichtlich Auswirkungen haben wird.

Sie können die Em-Größe einer Schriftart herausfinden, indem Sie sie in etwas wie öffnen Schriftschmiede und wählen Sie dann den Menüpunkt Elemente -> Schriftinformationen und die Registerkarte Allgemein aus.