How should ascenders and descenders that share the same space be handled?

This is the initial registration page for my client’s communication app. ( I covered over the logo – note the white box – for his privacy)

I do not like that the “y” descends and the “h” ascends into the same space. makes the two lines a bit too cramped. Any suggestions?

(the app’s font is roboto. Here – I’m using Roboto Bold.)

Any other design comments we’ll be appreciated –
as long as you behave yourselves 🙂


So you have a few options, usually.

At the moment, your problem is that lines 1 and 2 look further apart than lines 2 and 3, even though they’re not. It’s an optical illusion created by the lack of descenders and ascenders between the first two, but not on the second two.

The solutions fall into two basic categories: avoiding this situation all together, or tackling it head-on. We’ll start with some ways of avoiding it.

Option 1: convert to capitals

This one avoids the situation. However, you’re probably attached to your lowercase.

(These examples use Franklin Gothic by the way because I don’t have Roboto installed).

Option 2: re-arrange line breaks

In this case, I’ve converted to 2 lines, but you can sometimes re-arrange line breaks in other ways.

Having only two lines is another way of avoiding the problem – there is nothing to compare it against.

Option 3: adjust spacing manually until it looks “visually right”

Here I’ve greatly reduced the gap between line 1 and 2 so it looks “more even”. You can’t use a formula for this, just your eyes.

In reality the line gap between the first and second line in this example is much smaller than the line gap between the second and third, but it doesn’t look too wrong because of the optical illusion created by the ascenders and descenders in the second one.

It’s plausible you could improve on this quick example further – when doing this, try viewing from further back, squinting your eyes, etc, so you’re not looking at the words but the letter shapes as if they’re blobs.

Bonus option: shift words so the ascendors and descenders don’t overlap

You don’t appear to have this option with your chosen words, but sometimes you can shift words left or right so the descenders and ascendors don’t overlap, as in this example with different words.

By the way, I think your use of the hash symbol # doesn’t look right and you’d be better off opting for No. or No – but that’s my personal opinion.

Source : Link , Question Author : user12985 , Answer Author : thomasrutter

Leave a Comment