More advanced typography options

Sketch is already pretty robust when it comes to typography, but we need a bit more. Things like easier control over different font options, more ways to set line height (percentages etc.), multiple styles inside of the text box etc.

I just tweeted about this thread, as I’d like to start a conversation around what can be improved, for honestly, this is quite a complex topic for everyone seems to want something very specific or niche.

Designers, assemble, hehe :smiley:

5 Likes

Please detach text styles from text colour. The way it is currently handled, you need a separate text style per colour for each font class. This quickly increases the number of font styles to an unimaginable size, or designers have to resort to workarounds that offer other disadvantages.

14 Likes
  • Add different styling (bold, italic, list, superscript, link colour etc) to text nested within a symbol. Right now, I need to detach to be able to do so.

  • If I have an H1 style, for example, I will then have a H1-left, H1-centre, and H1-right aligned style. It would be great to have one style (H1) and allow for alignment edits within a symbol or on the style itself without seeing the asterisks beside the style name. EDIT: I just checked on text symbols nested within a symbol, and this can be done (this is great), but it can’t be done on a style. If I could have one style for three alignments, it would mean I am reducing the number of styles by 2/3rds, and the same applies to text symbols.

  • When I make a bullet list or numbered list because I am technically editing the style, if the library resyncs, the list is lost, and I have to reapply it to the style. If I detach, it won’t do this. Could this be handled better? How about having the option for a list, superscript etc., in the styles panel as an additional layer of alterations on top of an existing style? It would be hugely beneficial for text styles nested in symbols.

Thanks!

4 Likes

To be able to snap the selection box to the top, bottom, and edges of text, removing any whitespace. Other apps do this by double-clicking a selection handle and it will snap to the baseline, ascender height, or left/right edges of the text. This will be especially useful with the introduction of leading-trim in the CSS spec.

3 Likes

I would really like to see proper hyphenation in Sketch. I know this is a complex topic and since Sketch is not really a editorial design tool, I suppose it is not as high a priority as I would like it to be.

Additionally I would like to have a better way to activate OpenType features. Currently you have to go through nested menus to try something out … really annoying imo.

Nevertheless, Thanks for the great tool!

1 Like

Let me define the font family as “system”, so that the exported svg doesn’t have to be manually edited (at least for the font).

1 Like

Exactly

  1. Unsynced (detached) font color for styles.
  2. Detached alingment for styles.
    Like you did for components basically.
    These two would save us from making H1/Black/Align-center kind of styles.
4 Likes
  1. Hanging punctuation.
  2. Highlight the text.
  3. Gradient fill selected text.
3 Likes

Let us apply multiple paragraph and character styles in a single text box. You know, just like all the graphic design apps have been working with text in the last 30 years or so.

4 Likes

Love all recommendations! :sketchy_kawaii:
All these ideas will help us so much.

Another thing to point out, we also need an easy way to convert all our massively complex text-style libraries into whatever new structure/logic your guys came up with.

So please yes, we definitely want a new fresh approach to handle advanced typography style, but also, if possible, an easy way to convert the current one. :raised_hands: and not waste days re-syncing multiple tons of text styles.

2 Likes

I am in agreement with @tudor about the ability to add multiple styles within a paragraph or text layer. The real trouble for this would be how to do it with text overrides in a symbol. If it were possible, it would also be really cool if there was some kind of sketch-specific markdown type formatting. So, in a text override field in the inspect panel, you could include something like _ text _ to use underline for that word.

More control over bulleted and numbered lists would be great as well. I normally end up creating a bulleted list symbol so I can control the margin and padding, but if I didn’t have to do that it would be really helpful.

1 Like

Hey :wave: thanks for all the feedback and suggestions. We appreciate you taking the time. We’ll certainly use this in the future. In the meantime, keep the ideas coming if there are more!

I am working on improving a library and I need to triple all of the typography styles (primary text, secondary text, and disabled text colours) and then double all of them because of the light and dark themes, even in elements that have no changes (in order to keep consistency across the component organization). I end up with six different typography styles with only colour variance, everything else is the same.

1 Like

I totally agree with @jkilp . And I also vote for this feature @jonne

2 Likes

Hi folks, I come to y’all with a provocative question.

Among the suggestions here is leading trim: the ability for the selection box of text layers to fall along the edges of characters, without the extra space above and first line — most commonly this is done along cap height and baseline.

This was also suggested in other topics [1, 2] by @technicarla and @leohans.

If we were to implement this, what are some reasons why we should NOT make it the default for new text layers? In other words, what are some use cases where do you actually want to have the extra leading inside the box?

Thanks!

The main reason is the css box model where the padding/margins are measured from that box.

1 Like

So it’s an engineering consideration, then? So that the engineers can get an accurate measurement they can implement and don’t have to eyeball it?

You said the main one — are there any besides that which concern only a designer’s workflow, fully removed from implementation considerations?

Michal Malewicz explained this very well here:

It’s useful as a designer to have closer to optical alignemet using the x-height instead of the box.

1 Like