Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.)

http://d.pr/i/g08p http://d.pr/i/ouTE

Any other design comments we'll be appreciated - as long as you behave yourselves :)

share|improve this question
1  
I don't mind it. You could perhaps tighten the line space between the first two lines to make it optically more consistent. All that said, that type seems really large for the form field. –  DA01 May 27 '13 at 21:39
    
try small caps? –  Lauren Ipsum May 27 '13 at 23:31
    
@DA01 - "type seems really large for the form field" - are you referring to the "enter your phone #" or the phone number input in the box? For the "enter your..." I wanted something big bold and edgy with making use of arrows and other visual cliches.... but maybe i over did it. –  user12985 May 28 '13 at 7:16
    
You might also find the answers to this question helpful: How do I deal with line spacing when a single descender is getting in the way? –  user568458 May 28 '13 at 8:20
    
I was referring to the 'please enter your phone' text. I suppose it's edgy, but it's also just a label for the field, so seems a bit odd being so huge. It's shouting at me. –  DA01 May 28 '13 at 14:57

2 Answers 2

up vote 8 down vote accepted

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.

share|improve this answer
    
I would just say I like Enter (Circle / Logo) then Your Phone Number. Another option would be to not state so much at all, I mean its pretty obvious from the form field that it is expecting a phone number. –  Ryan May 28 '13 at 13:43
    
@thomasrutter - thanks. really helpful. –  user12985 May 29 '13 at 7:16

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.

Dat fox

Your best bet to improve the readability of your text would be to do something with consistent leading, like this:

My mockup with overlay

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.