0

Body text used in different situations

I am using texts in different context and thus I am changing the padding depending on the context. (as in the attached image) Regarding collaboration with developer what is the good practice ? Developers are reluctant to inspect screen to search for spacing specs and would rather use a more generic solution as the following : establish a padding for each type of text style (e.g H1 has 24px bottom padding, H2 has 16px bottom padding etc.) For me, the problem with this solution is that depending on the context I consider that the padding needs to be adjusted.

2 Answers 2

0

From my personal experience, the best (and I don't know if the only) way to get along with developers is to try not to mix terms they are used to working with, with design concepts.

For a developer h1, h2, h3 are standards that support specific and generic modifications. On the other hand, if we present the project talking about title1, title2, title3, etc. the developer will understand these elements as new components to incorporate.

In other words:

NO → h1 {padding-bottom: 6px;} ❌

YES →
h1 {line-height:0;}
.title1 {padding-bottom:12px;}
.title2 {padding-bottom:4px;} ✅

<h1 class="title1">This is a title</h1>
<p>This is the beginning of a paragraph</p>
<h1 class="title2">This is a title</h1>
<p>This is the beginning of a main text</p>

Result

enter image description here

0

While it depends on the designer and style, you're on the right path. Personally, I think you're leaving too much space between elements, which breaks Gestalt's Law of Proximity, but your presumption about different spacing between elements is still correct.

If you need some tips, there's an interesting article on Typography for the web. A couple of points are arguable, but all in all, it's a quite handy resource.

EDIT: Based on Danielillo's comment, it appears that I misunderstood your question initially. In this case, it seems that if you're using a prototyping tool, it would be easier for developers to review your design and make the necessary adjustments. Instead of relying on measurements or screen checks, they can simply refer to the code output from your design.

However, it's true that sometimes developers may overlook certain adjustments because they assume they have already implemented a particular element. Additionally, making those adjustments may require additional work. Either way, it may be necessary for you or a project manager to conduct a quality assurance (QA) process. This ensures that the design is implemented correctly and any necessary adjustments are made. Do not to assume that developers will make mistakes, just wait and see what they do.

1
  • I think the question is not focused on the design, but rather on communication with the developers. Devs want everything standardized and the designer wants different spaces according to the content relationship
    – Danielillo
    May 25, 2023 at 22:18

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.