3

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?

-1

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;
}
| improve this answer | |
  • 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
-3

You are on the right path 👍.

Seems like you are more experienced than your designer 😃. Aesthetics are important, but designing is much more than just a pixel perfect layout. You have to consider about code quality also.

The only thing you can do from your side if the designer is not going to rework is trying to manage the code.

List all combinations of possible variations of font size and line-height used across the system. (again this is also part of style guides typography section, hope designer have sorted it for you)

Keep those minimal or it is going to be a real mess.

Then define the different classes with a negative margin which is a flexible approach (OOCSS) or set that margins inside already defined classes (BEM).

Again if you have used multiple fonts in the system because not every font has the same ascender height you have more work to do, 😫Oops...

What your designer trying to implement is vertical rhythm by means of using an 8pt grid system and unfortunately, he/she is not successful or he/she might know it but not implemented in the right way because of your stickler Boss 🤨.

I often do bad design and development not because I don't know how to do it but there are circumstances that force me to do so 🤞.

| improve this answer | |
  • Your feedback is appreciated if one who doesn't find an answer is appropriate. We may improve it. – Codesigner Jun 15 at 12:34

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.