Opened 3 years ago

Closed 3 years ago

#4855 closed change (invalid)

Standardize EM or PX usage for spacing of components

Reported by: juliandoucette Assignee:
Priority: P2 Milestone:
Module: Websites Keywords:
Cc: saroyanm, p.pastourmatzis, jeen, mvelchevski, athornburgh, greiner, philll, wspee Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

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

Description

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.

Change History (9)

comment:1 Changed 3 years ago by juliandoucette

  • Review URL(s) modified (diff)

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)
Last edited 3 years ago by juliandoucette (previous) (diff)

comment:2 Changed 3 years ago by juliandoucette

  • Review URL(s) modified (diff)

comment:3 Changed 3 years ago by juliandoucette

  • Cc greiner added

@greiner your input is very welcome here :)

comment:4 Changed 3 years ago by greiner

  • Cc philll added

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.

comment:5 follow-up: Changed 3 years ago by 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.

comment:6 in reply to: ↑ 5 Changed 3 years ago by 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.

comment:7 Changed 3 years ago by 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.

Last edited 3 years ago by juliandoucette (previous) (diff)

comment:8 Changed 3 years ago by juliandoucette

  • Priority changed from Unknown to P2
  • Ready set

comment:9 Changed 3 years ago by juliandoucette

  • Cc wspee added
  • Resolution set to invalid
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.