Line Spacing Setting


#1

Are there any plans to introduce Line Spacing settings for text?

You have a couple of blog posts describing how copywriters should use Balsamiq to see how their words will look in the finished product, which is a fantastic idea.

But as a copywriter I think line spacing is incredibly important for this.

Right now we can use lists to change line spacing, but the minimum it allows is 16 (which is usually too big).

The text seems to be limited to a line spacing of 1, which looks too squashed up for a lot of my designs. This means I end up changing designs to make the readability better, when really, changing the line spacing would be a much better option.

I’ve seen a few posts about this. One from back in 2015 said you were looking into it, what was the outcome of that?


#2

Hey @marcooos,

This is something we have talked about from time to time, but haven’t decided to implement yet. It’s hard because it’s not something we hear a lot of requests for - but we know that, to the folks requesting it, it’s really important.

We are in the middle of a big code transition right now, so our feature building has taken a back seat while we build new apps. But, as soon as that is done, we will look at this feature again.


#3

+1 for adding line spacing.

@Brendan this workaround that you mentioned a few years back recently worked for me in Balsamiq 3, but I’m now trying this in Balsamiq Cloud and it isn’t :frowning:

Here’s a screencap from Balsamiq 3:

And here’s one from Balsamiq Cloud:


#4

Hi @gordo,

Thanks for the post. It looks like Cloud balks at the size formatting if there’s nothing in between the tags. Try adding a space and you should get the look you’re going for e.g.

A line of text
A line of text
{size:20} {size}
A line of text
{size:50} {size}
A line of text

It’s not ideal and we’ll take a look at better line-spacing control. Indeed, we’re already considering adding row-height control to the Text control in the same way as the List control. I’ll add your vote in support.

You could take a look at the ‘List’ control for this? If you disable the border, it looks like it might do the job. One caveat - the row height applies to all rows in the list - it’s not possible to define different row heights in a single list but you could work around that by using more than one list. Let me know what you think?


#5

Thanks @alasdair, the list element with a row height of 36 is working well enough for me.

FYI: Adding a space to {size:XX} {size} did increase the line spacing, but the line spacing is more than what I see with the same element in Balsamiq 3.

In Balsamiq Cloud, It seems like minimum is determined by the font size. For example, in my case I want the font size to be 24 and I wanted my line spacing to be…less than that. TBH when I originally implemented the work-around in Balsamiq 3, I just kept trying numbers until the vertical spacing looked right for my use case. I’m not sure what “6” was counting.

Anyway, I’m good for now. But that row height feature for text would be nice. Been using Balsamiq for years. And I’ve recently been evangelizing to the students I teach. Thanks!