Calculate from the confirmed CSS values ​​(formula)

[gafimiv406]

Once you know the font-size (px value) and letter-spacing (px value), use the following formula to calculate.

letter-spacing(px value) ÷ font size(px value) × 1000 = character spacing (AV)
If you apply the example numbers to the formula, the answer is "50", and if you specify "50" for the character spacing (tracking, AV) in Adobe XD or Photoshop, it will be reproduced correctly.

1px ÷ 20px × 1000 = 50

③Enter AV (tracking) values ​​in Adobe XD
This time, we verified whether the spacing between characters in the example text actually looks correct.
(*Please make sure to match the font type with the existing site.)

fig04

It's a little hard to see, but I've overlaid semi-transparent red text on top of the captured image. You can see that the spacing between the characters (tracking) is perfectly aligned.
Below, I've shifted the overlapping characters to make it easier to see, and drawn lines at equal intervals between the characters.

fig05



You can also reproduce the effect in Photoshop or Illustrator by entering similar values ​​in the "VA" field.

▼Photoshop

fig06

▼Illustrator

fig07



This concludes how to calculate the letter spacing armenia number data (AV, VA) of design tools such as Adobe XD from the letter-spacing of text on a web page. I hope you found the calculation easy!

How to calculate CSS letter-spacing when coding
In contrast to the coding → design calculation of letter spacing introduced earlier, I would like to introduce a method to calculate CSS letter-spacing values ​​from the tracking (AV) values ​​of design files such as Adobe XD when coding.

① Check the tracking value of the design file
Open your design file, select the text you want to edit, and look at the “AV” value in Adobe XD, or the “VA” value in Photoshop or Illustrator, to see the character spacing (tracking) values.

The example below is from Adobe XD, but the number is 80.

fig08