How to calculate letterSpacing for TextView from sketch values?

Question

In design I have a text field with 16 as text size and 0.6 as character spacing

But, if I set this value for android:letterSpacing attribute of TextView spacing will be much more larger than in design.

So, what is the way to convert sketch value to android value?

score 30 · Accepted Answer · answered Dec 01 '16 at 23:54

30

According to Romain Guy, Android uses the "1 em = font size" definition, so you'd just do

setLetterSpacing(characterSpacing / textSize)

...just make sure those values are in the same unit (dp vs px)

answered Dec 01 '16 at 23:54

Eric

5,323
6
30
35

Thank you very much! I just checked it and it works! :) – Slava May 10 '17 at 07:43
1

not working for me, spacing is smaller than in sketch – Wackaloon Jun 01 '17 at 15:26
3

This is documented here https://material.io/design/typography/the-type-system.html but specifies sp for the font size, so: `Android letter spacing = Sketch letter spacing / font size in sp` – vaughandroid Mar 19 '19 at 09:20
Right. Zeplin does with the same method. – Sattar Hummatli Aug 07 '19 at 08:49

score 3 · Answer 2 · answered May 02 '18 at 00:02

If Sketch provides the letter spacing value in Points, then the following is the conversion:

float textSizePx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,  textSizeInSp, displayMetrics);
float letterSpacingPx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PT,  sketchLetterSpacing, displayMetrics); 
float androidLetterSpacing = letterSpacingPx / textSizePx
return androidLetterSpacing;

score 2 · Answer 3 · answered Nov 14 '22 at 13:30

Material design 2 uses em as the unit for letter spacing on Android, and the following conversion ratio for Sketch values need to be applied:

(Tracking from Sketch / font size in sp) = letter spacing

To clarify, here is an example for Jetpack Compose:

fontSize = 14.sp,
letterSpacing = (1.25 / 14).em

1.25 is the Sketch value and 14 is the font size in sp, but note the unit is converted to em.

score -2 · Answer 4 · answered Nov 22 '16 at 12:19

-2

Check out android:textScaleX

Depending on how much spacing you need, this might help. That's the only thing remotely related to letter-spacing in the TextView.

answered Nov 22 '16 at 12:19

Srinivas Keerthiprakasam

885
11
29

Irrelevant. For instance, in Sketch I have 0.58. It means that I have 0 + .58. So it spacing should be bigger than original ( 0 ) spacing. If I use textScaleX, so I change scale. In this case 0.58 < 1, so scaling will be less, than original. – Slava May 10 '17 at 07:32

How to calculate letterSpacing for TextView from sketch values?

4 Answers4

Linked