Renaming the SwissPost Design-System sizing variables

[oliverschuerch]

This discussion should serve as a descision base to refactor the sizing variables delivered with the swisspost-design-system.

Actual state

The actual state of the sizing variables is confusing and a mess. There is no obvious logic which variable is giving you the prefferd pixel-value. Take a look for yourself: Sizing Docs.

Possibilities for a better user experience

After some research we elaborated some possible ways to improve the variables by renaming them with some logic.
This should allow developers to choose the correct variable without having to consult the documentation every time.

Grouped sizes

This solution relies on subgroups. Note, that the group names and the partisions are only a proposal.

#	Size name (now)	Size name (new)	Size name in classes (new)	Size in Pixels
1	Hair	Line	*-line	1 px
2	Line	LineLarge	*-line-lg	2 px
3	Micro	LineXLarge	*-line-xl	4 px
4	Mini	GapXSmall	*-gap-xs	8 px
5	SmallRegular	GapSmall	*-gap-sm	12 px
6	Regular	Gap	*-gap | *-gap-md	16 px
7	SmallLarge	GapLarge	*-gap-lg	20 px
8	Large	GapXLarge	*-gap-xl	24 px
9	Big	DivisionXSmall	*-division-xs	32 px
10	BiggerBig	DivisionSmall	*-division-sm	40 px
11	SmallHuge	Division	*-division | *-division-md	48 px
12	Huge	DivisionLarge	*-division-lg	56 px
13	Giant	DivisionXLarge	*-division-xl	80 px
14	BiggerGiant	DivisionXXLarge	*-division-xx	112 px

Iterating sizes

This solution relies on numbers. We just iterate all sizes (starting by 1) and assign every size a consecutive number.

#	Size name (now)	Size name (new)	Size name in classes (new)	Size in Pixels
1	Hair	Size1	*-size-1	1 px
2	Line	Size2	*-size-2	2 px
3	Micro	Size3	*-size-3	4 px
4	Mini	Size4	*-size-4	8 px
5	SmallRegular	Size5	*-size-5	12 px
6	Regular	Size6	*-size-6	16 px
7	SmallLarge	Size7	*-size-7	20 px
8	Large	Size8	*-size-8	24 px
9	Big	Size9	*-size-9	32 px
10	BiggerBig	Size10	*-size-10	40 px
11	SmallHuge	Size11	*-size-11	48 px
12	Huge	Size12	*-size-12	56 px
13	Giant	Size13	*-size-13	80 px
14	BiggerGiant	Size14	*-size-14	112 px

Pixel sizes

This solution relies on the exact Pixel sizes. Every size name includes the exact pixel size of itself.

#	Size name (now)	Size name (new)	Size name in classes (new)	Size in Pixels
1	Hair	Size1	*-size-1	1 px
2	Line	Size2	*-size-2	2 px
3	Micro	Size4	*-size-4	4 px
4	Mini	Size8	*-size-8	8 px
5	SmallRegular	Size12	*-size-12	12 px
6	Regular	Size16	*-size-16	16 px
7	SmallLarge	Size20	*-size-20	20 px
8	Large	Size24	*-size-24	24 px
9	Big	Size32	*-size-32	32 px
10	BiggerBig	Size40	*-size-40	40 px
11	SmallHuge	Size48	*-size-48	48 px
12	Huge	Size56	*-size-56	56 px
13	Giant	Size80	*-size-80	80 px
14	BiggerGiant	Size112	*-size-122	112 px

Clothing sizes

#	Size name (now)	Size name (new)	Size name in classes (new)	Size in Pixels
1	Hair	Size3xs	*-size-3xs	1 px
2	Line	Size2xs	*-size-2xs	2 px
3	Micro	SizeXxs	*-size-xxs	4 px
4	Mini	SizeXs	*-size-xs	8 px
5	SmallRegular	SizeSm	*-size-sm	12 px
6	Regular	SizeMd	*-size |*-size-md	16 px
7	SmallLarge	SizeLg	*-size-lg	20 px
8	Large	SizeXl	*-size-xl	24 px
9	Big	SizeXxl	*-size-xxl	32 px
10	BiggerBig	Size2xl	*-size-2xl	40 px
11	SmallHuge	Size3xl	*-size-3xl	48 px
12	Huge	Size4xl	*-size-4xl	56 px
13	Giant	Size5xl	*-size-5xl	80 px
14	BiggerGiant	Size6xl	*-size-6xl	112 px

[gfellerph]

My 2 cents

• Grouped: Unclear continuity - where does one category start, where does it end and why? Why is division bigger than gap? This pattern is not consistent and self-explanatory enough
• Iterating: Clear start and continuity, unsure where it ends. The numbers have no relation to the actual size which I count as a slight downside as the sizes grow exponentially
• Clothing sizes: Clothing sizes actually progress as *xs - xs - s - m - l - xl - *xl and not *xs - xs - sm - md - lg - xl - *xl. Should we update the proposal? Also here the start and end are not really clear which is a slight downside but the progression is very clear. Also, there is no relation to the exponentially increasing spacing.
• Pixel sizes: Clear starting point, the , progression is confusing however as it does not follow exactly the multiples of 8 rules with intermediate sizes 1, 2, 4, 12, 20 and not having 64, 72, 88 etc. One distinctive advantage of this approach is the possibility to measure pixel distance in Figma and then being able to pick the closest available sizing easily without having to do a mental conversion. This is also the only really extensible spec as intermediary steps can easily added without changing the mapping of existing values.

Feature	Grouped	Iterating	Pixel	Clothing
Clear start		✔	✔
Extensible (open ending)	✔	✔	✔	✔
Extensible (steps in between)	limited*		✔
Clear progression		✔	almost**	✔
Relation to exponential growth			✔

* New groups could be introduced as intermediary sizes, but sizes in groups cannot be extended without changing the mapping to pixels

** The base progression is steps of 8, but the spec contains fractions of 8 as intermediary steps as well

[oliverschuerch]

Thanks @gfellerph!
A very systematic and valuable analysis of the various proposals!

I don't see the need to update the proposal.
As it is only this, a proposal. It does not need to be 100% correct or final.

I can totally see the pros of the Pixel proposal.
As you said, it would be even better/clearer for DEVs when we add the missing sizes (e.g. 64px, 72px, etc.).
If we do not add these sizes, there is in fact no spottable reason, why some sizes are missing.

[wueestd]

Great work, thanks @oliverschuerch 👏
I'm still not sure about my prefered solution. Here are some thoughts I see with the following proposals:

Grouped:
✅ good structure (we dont't have 20xl)
❌ where does a group start and where does it end

Iterating:
✅ don't bother about sizes, t-shirts, etc.
❌ a lot of try and error until you found the right spacing

Pixel:
✅ easy readable from figma prototyp
❌ does 76px exist
❌ some frontend engieers have to work with rem (how much is this in rem again?)

Clothing:
❌ we have 20xl

All in all out of a designing view, I think pixel is the best proposal! And thanks again for your effort 🙏

[gfellerph]

Small remark to pixel/rem: when devs use the variables provided by the Design System, they don't have to know how many rems it's in pixels, e.g.:

.class {
  margin-top: spacing.$size-80; // In the design system: $size-80: 5rem;
}

[oliverschuerch]

Alea iacta est...
Thanks to all participants!

I created a development task out of this: #684