0

We want to design our website so that all elements are spaced 24px apart (paragraphs, form groups, header & content, etc.) and "related" elements (label & form field) are spaced 8px apart. We are doing this with flex gap which works well (we built a polyfill for browsers that don't support this).

This works great for non-text elements. But for paragraphs and headers, a line-height > 1 results in additional spacing between the element before and the visual start of the text. The images below are a div, p, and div w/ row-gap:24px.

demonstration of line-height 1 demonstration of line-height 1.5 demonstration of line-height 2

Having this increased space between elements goes against the style (my boss is a real stickler on consistent spacing and will often open up Photoshop to count the pixels). To avoid this problem, we add psudo-elements to every text element with negative margins to compensate for the top and bottom white space. (If CSS supported a leading property, this would be easier as it would change the actual spacing between lines of text vs increasing the height of each line.)

enter image description here enter image description here

Looking at other sites, I often see a mess of margins and paddings of all different values. Nothing which makes a whole lot of logical sense. Do these developers just keep messing with the numbers until it looks good vs having some standard components to work with?

Perhaps our design/strategy is flawed in some fashion? Is it good that a increased font-size (and line-height increasing as well) would warrant more spacing between elements?

How do you guys deal with the extra spacing caused by line-height > 1?

0

I think it's all about well designed, curated and developed design system.

line-height is correlated with typography.

Example this dribbble picture.


In .scss preprocessors it's possible to define variables

(developers, usually do more intelligent/complex issues than styling so this may be the mess you mentioned)

It's possible to define line-height on a variable basis and then reuse it let me explain this in the example above (on eye - not math precision)

  • l-h - 1
  • l-h - 2
  • l-h - 3
  • l-h - 4

$line-height-1: 7.5 
$line-height-2: 4.0
$line-height-3: 1.75 
$line-height-4: 0.625

then you can define these values ​​in specific headers/paragraphs.

p{
 line-height: $line-height-1;
}
  • Your Dribble link is talking about rhythm. Not sure how this is related to the second half of your answer. – Chris Smith Jan 16 at 4:23
  • No, it's just an example of well designed line-heights.The point is about the variable system. – Piotr Żak Jan 16 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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