Standardize EM or PX usage for spacing of components

[juliandoucette]

Background

We have recently decided in favour of using EM instead of PX for font-size, vertical margin, and vertical padding of text elements in ​default-content.

What to change

We would like to properly consider the effects of using EM instead of PX for vertical and horizontal spacing between components and recommend that the product team respects this whenever possible in design and style guides.

[juliandoucette]

The following example illustrates my primary concerns with using EM for component spacing.

• The 1st example shows a typical 2 column layout with cards spaced by 1em
• The 2nd example shows the same 2 columns with the font size drastically increased (which is possible via accessibility settings in the browser)
• The 3rd example shows the same 2 columns with the font size drastically increased but with a fixed horizontal spacing

When the user increases the font size of the browser and we space components using EM then we risk unexpected line-breaks, poor alignment when formats are mixed, and akward fitting into small spaces.

​https://jsfiddle.net/dnfymyuy/6/

My thoughts / opinion:

• I think using EM everywhere is the right thing to do because I think large spacing around large font is important for accessibility
  • I acknowledge that this may break 4+ column layouts on desktop and tablet
  • I recommend accommodating this by:
    • Setting the width of the website in EM also and allowing horizontal scroll of the page for users who have large font size
    • OR allowing horizontal scroll of 4 column sections
  • I acknowledge that using EM for vertical spacing *only* also solves this problem (although in a less accessible way IMO)

[juliandoucette]

@greiner your input is very welcome here :)

[greiner]

I'm always happy about making our UIs more accessible and specifying the cases where using em does contribute to that goal sounds beneficial.

The bigger question here is, however, whether we want to officially support page zoom which may have some other implications in regards to how we implement UIs and what developers and QA need to test. On the other hand we haven't formally specified our accessibility requirements so maybe we should start working on that first before we standardize implementation details.

[juliandoucette]

The bigger question here is, however, whether we want to officially support page zoom

Note: I am referring to default font size not page zoom. AFIK they are both different and relevant to accessibility.

[greiner]

Replying to juliandoucette:

Note: I am referring to default font size not page zoom. AFIK they are both different and relevant to accessibility.

I see, my bad. Don't the designs that we're basing our implementations on already take that into consideration that larger texts should have more space around them? If so, using em to realize those requirements would be an appropriate solution.

So it sounds like you want to establish a design standard rather than an implementation standard.

[juliandoucette]

Don't the designs that we're basing our implementations on already take that into consideration that larger texts should have more space around them? If so, using em to realize those requirements would be an appropriate solution.

Yes, the designs that we have received so far for websites have included more space around larger text elements.

Unfortunately, we have implemented these spaces exactly using px according to style guides (and consistency in our coding style).

So it sounds like you want to establish a design standard rather than an implementation standard.

I want to establish a design and implementation recommendation.

[juliandoucette]

Closing this in favour of a resolution in code review and later website-docs. There is no clear "What to change" in this ticket.