I am struggling to understand how to design he website so here’s the thing:
I am using rem units for all the text that may need to be made any bigger or smaller based on accessibility needs. As far as I understood I need to use it for paddings as well. I am using also the clamp function for text fluidity.
What I fail to understand is: I set the “Body (All Pages)” font size to 16 px for Desktop breakpoint and 14 px for Tablet breakpoint. However all the text that was set to rem doesn’t change its size throughout the different breakpoints…
Is this a webflow setting thing or the font size is user’s setting on their end?
I am totally lost, can someone please explain to a beginner what’s happening and how to act?
Yep. Timothy Ricks is the on this sort of thing for sure!
REM means the root though, so setting it on the body’s global tag won’t do it, as you’ve already found out. The size needs to be defined on the html element. You can do this with custom code and inject it to the Site settings. Once you’ve added it, you should be able to use 1 REM to get the desired effect.
You might already know this, but I think the users browser/OS settings can override this, so if they have their default size set to 20px, then your REM will be sized accordingly, which is a good and bad part of REM I guess
Some useful links:
Reach out if you get stuck, and welcome to WF forums!
Now that I have researched it a bit more isn’t the root font size change from the “Canvas settings > Text zoom preview” isn’t this gonna give me the vision of someone who has his root size set to higher than 16 px?
Ahh you’re right, yes, Text zoom preview is only a preview though so it will simulate what your design will look like if your end user updates their root font size.
So you can toggle that setting and design with REM at 20px and make it look nice for if and when they do visit… and honestly, I just learned today, from you, that you can toggle that from the Canvas settings!
on this sort of thing for sure!
