Balsamiq Community Discussion

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!


#6

Any update to this @Brendan ?


#7

Hi @marcooos and thanks for checking on this one.

We’re still in the middle of our big move to being native on all platforms but we’ll get back to adding new features to the tool as soon as we can! I’ll add your vote for this one in the meantime.

Let us know if there is anything else we can do!


#8

I am struggling through newsletter design where I’m attempting to use Balsamiq (ok, ok, it might not be the best platform for newsletter mockups) and the lack of line height is literally killing me. Just wanted to throw in my pleas for adding this at some (soon?) future point. Would be really helpful for text-heavy features.

Ok, if others know of a better platform for text-heavy things that need to be mocked up, I’m all ears - feel free to PM me.


#9

Hi @grebe,

We’re definitely tracking this request but it’s one of those issues which is somewhat at odds with the concept of low-fidelity wireframing. I know that can be an unsatisfying answer but we also understand that we’re not ever going to meet every requirement for every customer.

It’s an impractical workaround but you could lay out formatted text in a word processor and paste in an image of the rendered text. Honestly, I’m not crazy about even making that suggestion but maybe you can use it e.g.

spacing


#10

I appreciate the low-fidelity goal of Balsamiq. :slight_smile: Thanks for the comment!