Spacing in design - right or wrong?

Design & UX
1

Hi there,

I have just taken a short course in web design and found out the line height of text should be font-size x 1.5

However, I have seen many sites using larger spacing than this. Is there a right or wrong way of determining the spacing between text?

Also, I wondered if there are any rules on spacing elements such as headers, buttons etc?

For example if I have a h1 header, 50px with line height 75px what space should I leave under it for the opening paragraph and then button? I have always used 30px and 15px on smaller objects.

Can anyone suggest the best spacing formulas to use?

Many thanks!

2

Line spacing depends on the font size, font-family, and if it is serif or sans-serif (should be the fallback to the font-family).

serif is usually for headings (H1, H2…) and sans-serif is usually used for paragraphs p tag along with text that you want to make sure the user can read without no problem. The leading (space between adjacent lines of type) is usually greater between a h1 tag and a p tag. The 1.5 is usually the standard leading based off 16px (pixels) or 1 em hence the 1.5 (1.5x). That is why you should use em instead of px as when it comes to font-size as it isn’t as rigid as px. There really isn’t no spacing formula, but a basic guideline. My preference is to have 1.0 to 1.5 for line-height for p tags and 1.8 to 2.4 for h tags depending on the font-size and font-family of the h tag. This is just a guideline as one should look at the overall appearance of the page for readability as well as design. I suggest using no more than 3 fonts. I personally usually stick with two (serif for h tags and sans-serif for p tags or text I want easy readability) as I want the user to have no problem reading the content (which is usually between the p tags) and spacing in my opinion is easier.

Here’s a snippet of a current website I am working on -

    p {
        font-size: 1.0em;
        line-height: 1.5;
    }
1 Like
3

Thank you for the reply. That makes sense :slight_smile: I must admit, I have a bad habit of using px for font sizes so I am trying to switch over to ems now.

I have come across this website:

Which gives you font sizing based on other variables from the website such as the max-width.

If anyone if familiar with this, is there a way to choose what font size I should use for the different headers?

For example, you can see 1em @ a, but how do I know which one going upwards on the page would be the h6 tag and going up from that? Is there a way or is it just preference? Or do I choose all the “a” variables?

Thanks!

4

It depends on your design.

5

IMHO: Suitable line height also depends on line length and number of lines in the paragraph.

Take your post and compare it with the next post above:

Yours: Paragraphs with few lines can have much less line height and still be comfortable read, even if lines are long.

Here the margin between paragraphs provides leading space helping to not loose track.

Paragraphs with more than a few lines needs more line height space if the lines are longer.

Pepster64’s: Multi line paragraphs needs more space helping the reader to not loose track at line breaks. With longer lines the line height needs to grow more.

Here the margin between paragraphs also need to match the line height space to help the overview of text body.

So, as @Gandalf said, it all depends on your design.

6

I would prefer a low line height (like 1.0) on headings and give them a suitable top and bottom margin instead, because when a longer heading text breaks line a tall line height will split the heading visually and the readability suffers.

My two cents about text bodies:

Some designers apply max-widths using the em unit in order to keep readability. I oppose that because one size doesn’t fit all.

A fluid width lets the user control line lengths by adjusting the viewport, and a max-width in px lets the user zoom the size the same, but an advanced user could zoom text only and have the lines break to fit the width.

1 Like
7

Thanks @Erik_J Yes when I am in Photoshop, the headers look odd with large line heights actually so having a lower height looks much better.

Are there rules on margins above and below text? For example the margin needs to be twice the line height or similar?

Thanks again, your replies are really helping me learn more.!

8

I think heading margins could be in em units so the space to paragraphs adapts to the heading’s line height.

If I’m correct I think a usual margin could be 2/3 of the font size and a line height of ~1.3.

Only a thorough research would tell what total space is most common.

But that depends heavily on design, of course.

1 Like
9

I see, thanks.

I have tried using 2/3 margin on the following mockup, but not sure if it looks right, especially on the buttons under the paragraph tag.

Would you say it looks ok?

huh
huh1035Ă—434 368 KB

10

For a website you should be using em units rather than px.

11

This is a photoshop mock-up so I can only use px at this stage

12

No, I would say the space between heading and text is too much. :slight_smile:

What’s the paragraph margins?

Does the margins between them collapse as they should?
The result should be the lesser margin collaps in (soaks up of) the larger?

Edit)
The buttons seems too close, I think. :slight_smile:

13

Thanks for the feedback.

  • What would you say the margin should be and how would I calculate it based on the font size being 67px and line-height 77px? And also the margin under the paragraph? I agree the 14px is too small.

I would usually use 30px and 30px also under the h1, but would like to know the formulas to work out what they should actually be.

14

Try follow @Gandalf’s advice. :slight_smile:

15

the idea of line-spacing text is to aid readability. think of 1.3 - 1.6 as a good guideline for the normal line length and font size of body copy. For example, you may choose to use 1.2-1.1 for really large font-sizes in a short header with all-caps.

Another thing to consider is the contrast of the text in question. higher contrast text can survive tighter line heights.

If you are familiar with print design, you could think of line height similar to leading ( tho it’s important to note that in leading all the space is above the baseline, where as line height distributes the space above and below the letter :confused: )

Another useful technique is to think of the block of copy as a “gray box”. That is to say if your eyes blurred the text so that the block became a gray box, then the tighter the letter and line spacing the darker the gray box would be ( which is why it’s also important to consider the color/shade of the text).

hope that sheds some light on the subject

2 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.