Menu
I am currently building a site from a PSD. Most of the fonts have a letter-tracking of -25 ( <- AV-> : I'm guessing that is the symbol for letter spacing?).
How would I get the same effect in CSS? I know the property is letter-spacing: X but it doesn't take percentages and -25px or pts would be a huge figure!
493
Convert Photoshop Letter Tracking to px In this example, we're using z as the font size in px value, x PS letter tracking and y being the pixel letter spacing value. For example, using the same Photoshop letter tracking value of 20, with a font size of 10px, the resulting CSS letter spacing value will be 2px.
Step 1: Open the Window menu and select Character. Step 2: Switch to the Type tool and select your text layer. Step 3A: To adjust the spacing between two letters, click to place the type cursor between them and adjust the kerning setting in the Character panel.
Tracking is the spacing between glyphs applied to an entire piece of text. In CSS, this is called letter-spacing . Too tight, just right, and too open. Providing more open tracking—i.e., more space between the letters—usually helps with the readability of all-caps text.
In contexts like this, unitless numbers usually imply a typographic unit that is a small fraction of the em unit. It’s usually called just “unit”. The value of this unit depends on the font, and it is expressed as a UPM (units per em) value. The common UPM value is 1,000, but Microsoft fonts have 2,048, and other values occur too. (This issue is described in some detail in the article UPM value of 1000 set in stone?)
Assuming an UPM value of 1,000, -25 would map to -0.025em. Setting letter-spacing: -0.025em tends to have a rather small effect: a longish text line becomes about one “i” shorter. The effect you get using CSS should not be expected to be same as in PhotoShop; the rendering mechanisms of PhotoShop differ from those of browsers.
64
In Photoshop letter-spacing is called letter-tracking and is specifically the space between each letter of text. The problem is that Photoshop Letter Tracking doesn’t convert 1:1 to Letter Spacing in CSS.
It's very easy to calculate the conversion from Photoshop to CSS though.
em Formula X / 1000 = Y
X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS
Consider the following example: Photoshop has a letter tracking value of 200..
200 / 1000 = 0.2
The result is 0.2em in CSS.
px FormulaIf you prefer to use "px" values the formula is
X * S / 1000 = P
X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS
Consider the following example: Photoshop has a letter tracking value of 200 and a font-size value of 10.
200 * 10 / 1000 = 2
The result is 2px in CSS.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
