Figma Support Forum

When designing, do you measure spacing from cap heights and baselines, or the layer bounding box?

Got an interesting one. We sometimes have issues communicating with developers what padding should be on elements, recently we’ve realised that this may be down to the way designers measure things vs how developers do.

As designers, we have always measured from the text cap height or baseline when creating our designs. For example we’ll create a pod and make a mental note that our padding rule is 30 pixels for example. Like the graphic on the left.

But obviously in HTML, line-height is taken into account, so the padding for the above pod would actually look like the graphic on the right.

It also means that the padding for this pod would be different if there is different content. For example, if body copy or a button is added instead of a heading, the body copy would have a different line-height and the button would have no line-height at all.

Interested to see how people tackle this issue? Is there anything we can do to alleviate this issue? Should we just adopt the practice of measuring from bounding boxes too when creating our designs for simplicity?

Thanks!

As a designer, I measure the top and bottom padding from the cap height and descenders because I need to align the text visually. The same goes with left padding. I align for example the left side of an image together with letter D och H. That way I get the most exact visual alignment.

The developers then use the bounding boxes to get the “real” padding. Therefore I newer use the same spacing rules as the developers.

I sure wait for this to happen for even better control. the [css-inline] Leading control at start/end of block · Issue #3240 · w3c/csswg-drafts · GitHub

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