Is it at all possible to set a default base font size to a project and then build out designs of components based on rem units. Then possibly testing out components and how they look/behave when that base font size is changes.
Right now for accessibility reasons you don’t normally want to override the user’s browser set font size incase they have chaned it from the normal default of 16px to something larger. When we deisgn however we do take the default into account but it’s hard in a design tool too see what our components look like if say the default font size were say 18px.
Also when handing over a design to a developer would be great to show all the various sizes of things in rem units and not have to convert px to rem everywhere.
I’m still very new to penpot so I’m really hoping this is either a feature or something they are planning on doing.
As far as I am concerned, Penpot and other design tools use pixels as unit, so currently your feature is not possible.
Just to check if if I understand you correctly: you would like to have a configurable base-size for the font (which, by default is on 16px like in most browsers) and then be able to choose rem as unit for font size or width; if you change the base-size, these elements would resize proportionally?
Notes (if my understanding is correct)
Since a lot of interactions rely on direct manipulation (aka moving stuff with your mouse), rem will produce long float numbers (since the input and output will still be in screen pixels)
It might be tricky to implement, since the data model might assume a fixed length internally, and adding such a feature might add a level of indirection
The feature will only ever replicate browser behavior somewhat. So if the goal is to predict browser behavior, the mileage might vary.
Yes that sounds about right. The only caveat I’d probably make is that PenPot should maybe not be the testing ground because I can see how much complexity that could add.
Maybe the compromise is more like display values in relative units like rem so that handoff could be easier.
So a designer could say that the base font size is 16px and then define all fonts used, or sizes, or border radius, padding etc in rem. Then when the developers look at the design it’s clear that this border radius for instance is 0.25rem and not 4px that they would have to go translate?
So maybe PenPot does not need to auto change to test at different base font sizes but have that layer of abstraction maybe?
