6

Here on ux.StackExchange they have gaps that are a bit smaller than one line height (~88%), but I’ve read a few times that 100% of the line height provides best readability because it continues the grid of the text lines. I personally find the 100% gap a bit too tall. Does the eye even process these gaps as parts of a grid?

Improve this question
3

2 Answers 2

Reset to default
4

Your content will have its own tone, rhythm and meaning. One of the main jobs of typography is to help bring this out.

As kontur stated "it requires a visual eye and is always context-dependent". While it is true that the final choice should come down to your specific example typography is quite an old art and has a lot of guidlines.

While there are no hard and fast rules, these guidelines should help in most situations:

  • Try to set a baseline grid. This will help your page maintain a vertical rythm.
  • As line lengths get longer or font sized get larger you should increase line heights (in typography this is known as 'leading'). This makes it easier for youe eye to scan back to the start of the next line. A line height of 1.5 times the font size is usualy a good starting point.
  • Do not make your line heights (or paragraph spacing) too high or the text will appear fragmented.
  • Paragraph spacing is usualy less than a single line height (often 75% - 90%). This is to compensate for the lack space taken up by descenders (there are no descenders on a blank line).
  • Each new paragraph should be clearly seperate from the last but not so seperate that it looses continuation.
  • Use 12 point font size as a minimum. This usualy equates to 16px but not always.
  • Stop your text feeling cluttered by using enough whitespace.
  • I am also a big fan of using the golden ratio for many layout solutions (not just text).

Typography is a subject that can (and does) fill whole books (and lots of them) and can take a lifetime to master. It is always worth getting a graphic designer or better yet a typographer to check what you have done - they will be able to quickly give you tips for improving your specific examples.

Some more reading for you:

Improve this answer
2
  • But are there actual findings that a baseline grid or rhythm can be even perceived by the eye? Or is it more important that the distances are consistent and symmetric? In this example I would move the second paragraph up a bit, so that the distance of the headline equals the distance to the top paragraph instead of typesetting the baselines in a grid.
    – Lenar Hoyt
    Commented Jan 14, 2013 at 7:21
  • 1
    It is most important that it comminicates effectively. That is the point off all graphic design and typography. Visual hierarchy, grid layouts, optimal line length, font choice - they are all there to aid the ease of communication. It is not important that the distances are consistent and symmetric if it does not aid in this cummunication. Baseline grids and rhythm should be discarded if they are not helping to get the message across.
    – Tims
    Commented Jan 14, 2013 at 11:07
0

The best readability that I have personally tested observed time and again is the golden ratio, keep the line height at 1.61803398875 and check out the paragraph readability. Anything more makes the UI waste a lot of space whereas anything less does not convey optimal readability

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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