Requesting more in-depth typography control


#1

Just wanted to request some more typography controls in the upcoming release. I use custom letter-spacing in about every project I’ve been working on lately and its a real bummer to be missing out on that.

So maybe just adding letter-spacing for now would be ideal :wink:

Thanks guys


#2

Thanks for the suggestion, Ryan. Tracking/letter spacing/character spacing is definitely on our list for typography improvements.

One thing we’ll need to suss out before we implement this is what unit to use:

  • Adobe apps use a unitless value equal to 1/1000em. This is the “standard” measurement for tracking: it’s proportional to the font size, so as the font size scales up or down, the tracking stays consistent. Not every font is set to 1000 UPM, so the tracking values often need to differ font-to-font to get a similar visual result.

  • Sketch uses pixels. This is closer to how many people specify letter-spacing in CSS. The downside is that pixels aren’t a relative unit, so if you change the font size, the tracking will be wrong. Sketch gets around this by automatically scaling the pixel value up or down.

  • Edit: Figma and Affinity Designer use percentages (of the font size). These are proportional and perhaps less abstract than using a 1/1000em measurement, especially for designers without print typographic experience.

Do you have any preferences on this? Anything I’m missing?


#3

I think out of the two suggested above, I’d prefere the Sketch way, reason being, it seems more familiar to me than the adobe method but I use figma so they use a weird letter-spacing percentage, so I guess anything works for me, just want to adjust it.


#4

Huh. In CSS a percentage would calculate based on the width of the parent, but it looks like Figma is actually resolving it as a percentage of the font size. That’s an interesting decision. It’s neither translatable to CSS / iOS / Android without conversion, nor does it hew to the traditional typographic standard. On the other hand, it’s perhaps more understandable as a relative unit to the font size.

(Edit: It looks like Figma’s CSS export does auto-convert from percentage to an em unit, which is helpful.)

Regardless, I’ll see what we can do about getting this in for you. Besides the unit decision, there’s some complexity around the hug calculation when letter spacing is in play, so it may be a few releases out.


#5

I’ll rebound on the subject because I also feel like we’re missing some things in the Typography panel, like options that would reflect some control we have in CSS (besides the kerning and all, being able to apply text styling like underline, small caps, all caps, etc.), plus the ability to control those aspects through classes would be wonderful too and would speed a lot of things up!

Still in the typography panel, there’s a little thing that annoys me a lot (okay I may have swear at the screen a couple time now) : why can’t I search in the typeface list via a search field or something? Having to scroll down the (huge) list of fonts on my computer each time to set something right is sooooo frustrating!