Feedback on our fluid scaling

[Febakke]

Fluid scaling

Fluid scaling is a new way to solve issues we have today regarding breakpoints. But as it is a new way of setting this up we will probably have some hurdles along the way. This issue should collect feedback we get and suggest solutions and enhancments to our scaling.

Cons

Half pixels

We will always get issues with half pixels when using fluid scaling. This create some problems.

• Browsers handle this in different ways. Making it unstable
• It makes it hard to work in Figma

Hard to understand

• As a designer/developer I feel like I have less control.
  • "I have less control over the relationships. What looks great on desktop might not have the same relationship on mobile"

How do our components with fluid scaling work with other components

• Its not a given that a product will build their product using fluid scaling. If they add components from our design system it wont match their scaling.

Figma do not calculate values

• Designer needs to instal Token Studio, making it more complicated to work with. This could be simplyfied using variables without fluid scaling.

Pros

The sizes between viewports

When using fluid scaling we do not need to think about viewports. And depending on how many viewports we define we will avoid it looking weird between viewports

Less to think about

In theory I need to think less about diffent viewport. If my sizes work on desktop it should work on smaller screens as well

Possible Solutions

1. As is, with Fluid scaling on typography and spacing/sizing

All problems above will persist, but we wont risk breaking anything. But problems might add up over time.

2. Fluid scaling on typography and keep relationship between sizes. Static sizing/spacing

We will keep issues with half pixels on typography. (We need to define what the problems are in more detail)

@Thuneer Can you give som examples on what the half pixels problems are?

3. Static Typography and sizing/spacing

We will loose all the positive aspects that we get with fluid, but the problems would be solved. A standard way of solving spacing. Easier to understand for designers and developers.

We can still support fluid for simple cases if there are a need.

[Thuneer]

@Febakke

Understanding the issues with using float numbers with pixels

Rendering engines for different software render pixels differently. This is especially noticible when using Tokens Studio, Figma and browsers together to make websites. Let's say we have a token value set to 13.5px. In Tokens Studio this will show as 13px because they use math to round the value down. In Figma the value will stay at 13.5px because they allow float values for their pixel grid. In browsers, however, most half pixels are rounded up. For our example this will turn 13.5px into 14px.

The result of this discrepancy is that a value in the browser may appear 0.5px larger than in Figma. This is not optimal, but it is not the main problem. Issues arise when we begin incorporating fluid values for our sizes and spacing. Traditionally, the 4-pixel grid was employed to ensure precise alignment of elements to the pixel grid when designing components for a website. When values become fluid, they fluctuate between even and odd numbers, potentially causing alignment issues in your designs.

Say you have a checkbox on your website. The outer box is set to 24px and the inner circle is set to 14px on desktop. Then as the viewport shrinks down the values scale down to 20px for the box and 10px for the circle. For a developer the circle will align nicely inside the box because both are even numbers. But once you start scaling the website down the two values will jump between even- and odd numbers. On certain devices and viewports the outer circle will sometimes be one pixel off as illustrated in the image below. The 24px value has scaled down to under 23.5px, which means it's rounded down to 23px on tablet. The 14px value is still above 13.5px so it stays at 14px. This causes the circle to appear misaligned inside the box.

[mrosvik]

The text inside TextField and the global icon is moving 1px up/down on different viewport.

Skjermopptak.2024-02-02.kl.10.14.18.mov