1

I'm using Sketch app 46.2 and am creating a UI mockup where I'm changing the character spacing of some text to 0.2 (the default is 0) but I don't know how to communicate this to developers.

How do I translate this into an HTML/CSS specification that they'll understand? Thanks.

2

The CSS property this relates to is letter-spacing.

It doesn't display it within Sketch's interface, but the value is in pixels. So for your example of 0.2, that would translate to letter-spacing: .2px;


enter image description here

If you right click on any object within Sketch, you can Copy CSS Attributes and it'll grab as many attributes and values that particular object may have.

So in the context of a Text layer, this is the raw output:

/* Roundup of the lates: */ font-family: Lato-Light; font-size: 16px; color: #FFFFFF; letter-spacing: -0.1px; text-align: center;


Lastly, here's documentation of the spec:
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

And what the value actually does (emphasis mine):

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

  • No problem @duralexglass 👍 If you could mark my answer as correct, it'll help out others! – spjpgrd Mar 20 '18 at 23:54
  • I tried to up vote it but I can't because my reputation is <15. I can't see a "mark as correct" option... – duralexglass Mar 22 '18 at 0:39
  • @duralexglass — Ah, it's all good then :) – spjpgrd Mar 23 '18 at 0:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.