Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
In typography changing the leading can affect how your viewers read and interpret your piece.
For an example, by lowering the amount of leading between two lines, causing descenders and ascenders to collide, you will have an adverse effect on the overall readability of your text.
As a visual style, tight leading can increase the pace of that the reader the readers your text (in the increase of letters that catch their eyes) and/or invoke a cramped or claustrophobia feel to your overall piece (1), which might not be your desired effect here.
On the other hand, increasing leading may reduce the pace of the reader (2). By introducing more space between each line, you slow the pace of reader by reducing the amount of letters that catch their eye. This can invoke a relaxed sense of feel in text by the reader. However, be careful of the amount of whitespace you leave, as having too much leading may problems with cause continuity (3), as the eyes of the reader need to travel further between each line.
Your best bet to improve the readability of your text would be to do something with consistent leading, like this:
Personally, I don't mind those ascender/decenders living in the same zone as they aren't colliding. It does visually make the space between the first two lines seem bigger than the space between the second two, so you could consider dropping the baseline of the first line (some subjectivity required here)>
Within a big block of text, that would be a bit criminal, but a bold headline like this is more of a lockup/graphic, and I think a bit of a custom job is valid.
