Respect browser font size instead defining a fixed px size

[dartcafe]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
Currently Nextcloud ignores the browser setting for the primary font size and defines a default font size of 15px. This means, nevertheless, which default font size I set as a user, all apps base on 15px font size.

Out of accessibility reasons I wonder, if it would be a good decision to get away from fixed px definitions to a relative font size by using rem and em.

Describe the solution you'd like

• Define a default font-size of 16px as used aqs the default by most of the browsers.
• Change font size definitions from px to rem
• Change any width (and maybe heights) to be calculated from the font size
• Same for margins, paddings and other elements like borders
• Define media queries by em (or rem, if safari has no more issues with that)
• Adopt this to nextcloud-vue and other libs

Additional context
This means some good planning and communication, since apps have to follow this change.

[skjnldsv]

cc @jancborchardt @kra-mo @marcoambrosini

[kra-mo]

I totally agree from a design POV, I didn't know sizes where defined in px…

This would also just be a big initiative as there are probably a bunch of edge cases where we'd want a fixed px size instead (think borders because of antialiasing on LoDPI) so I'm assuming it wouldn't be that easy to transition.

Unless other designers have objections, I'm passing the ball back to devs :D

[kra-mo]

…on the other hand, Material Icons are already hinted for 24px and we use them at 20 and I don't think a lot of people complained, browsers are pretty good at rendering this stuff nowadays.

[dartcafe]

Yes browsers are fine, when zooming. Using a font size which respects the browser's settings will affect not only the icons (which sizes should be defined as rem as well), but also a lot of components.

If nextcloud considers implementing this, there has to be a transition phase to allow the libs and all apps to adopt this settings.

Just for example. Comparing font size 30px and zoom factor 200% should show no differences.

30px	200%

Note: Polls already bases on rem in many places and is further slightly converting to rem.

Starting with setting the base font size to 16px would just make relative sizes easier to calculate.