Wie berechnet man den CSS-Buchstabenabstand gegenüber dem „Tracking“ in der Typografie?

Ich habe Anweisungen von einem Grafikdesigner für ein Layout, das für einige Elemente "Spur 100" angibt. In CSS letter-spacingist die äquivalente Eigenschaft für "Tracking".

Wie drücken Sie diesen Wert für die Nachverfolgung als Wert für CSS in Pixel aus?

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

BEARBEITEN

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

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

Ein bisschen Hintergrundwissen letter-spacingwird immer auf Text angewendet, daher sollten wir eine relative Längeneinheit verwenden. Da font-sizekann sich der Benutzer oder sogar durch Kaskade ändern.

Die beste Längeneinheit für Text ist die emEinheit.

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

Warum ist Tracking anders?

Layout-Apps wie Photoshop, Illustrator und InDesign von Adobe verwenden die emTracking- Apps , manipulieren das Gerät jedoch so, dass Designer leichter damit spielen können. Um es einfacher zu machen, mal mal 1000.

Konvertieren von Tracking zurück auf ganze em‚s

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

Also 50/1000 = 0.05em.

Berechnung in CSS / SCSS

Wenn Sie SCSS verwenden und eine wiederverwendbare Lösung wünschen, finden Sie hier 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 in die Mathematik inline gehen, damit sie weniger abstrahiert ist:

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

Die Ausgabe für die obigen Beispiele lautet:

.example {
  letter-spacing: 0.05em;
}

Hinweis: Sie sollten keinen pixelbasierten Wert verwenden, da Pixel fest sind und brechen, wenn:

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

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

Darüber hinaus rendern Browser Text anders als die Grafikdesign-Programme. Seien Sie also nicht überrascht, wenn der Designer das Tracking / den Buchstabenabstand bei der Überprüfung der Implementierung ändert.

Tracking Conversion CSS "Buchstabenabstand"

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

Die obigen Antworten sind größtenteils genau genug. Bei der verwendeten 1000 wird jedoch davon ausgegangen, dass Ihre Schrift eine Em-Größe von 1000 hat, und dies ist nicht immer der Fall. Ich habe Schriften 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 ermitteln, indem Sie sie in Font Forge öffnen und dann den Menüpunkt Elemente -> Schriftinfo und die Registerkarte Allgemein auswählen.

Wenn Sie eine Schriftgröße in Pixel haben, können Sie die folgende Formel verwenden:

tracking* font-size/ 1000 =letter-spacing