How do I change the default styling of my website without the need to update all individual items? This seems like this should be something that is very easy to to so I’m feeling kinda stupid asking the question but I’ve search through many tutorials and the forum but I can’t seem to figure it out…
I did found this older post Change attributes of all headings saying it’s not possible, but changing the default font should be simple right…? It’s set sómewhere in the CSS so should be possible right? Anyone that can point me in the right direction? Maybe through a custom code in the head if not possible through the designer?
Target Body (All Pages) on a new site and you can define the base characteristics. Font, text-size. They’ll then be the base for your em or % values all over the site.
Note that the line height is defined WITHOUT a unit. Which means it’s only a multiplicator of the text-size (that’s how you should use line height, all the time, never put a unit.)
Now the magic. Vary the Body text size and everything grows or shrink accordingly, nicely.
But this isn’t for you to make changes, this system is for accessibility, it allows people to change the zoom in their navigator and have everything behave like it should; proportionally.
Your normally set the base value on the HTML element. But it’s not easy to do in Webflow.
Nowadays, Chrome’s default is Sans serif, 16px. Webflows adds a default of 14px on the body… which is not so great: smaller than Chrome’s default, smaller than web design current default, and defined on the body.
So by doing nothing, and set your base text size on the BODY to counter Webflow’s default, using 1em as base, you get 16px on Chrome, as a browser default.
It’s also Safari’s default, Firefox default…
Here is chrome, safari, firefox side by side with a 1em on the body and nothing else defined:
I wish Webflow wouldn’t put a default 14px on the body actually. It’s a secure measure for most of designers I guess but it forces you to define a default on the body. Using em brings the reference back to the HTML element of the browser default.
Edit: I re-read a bit of documentation. Because I know I should use REM units more but I’m not used to them. So, while EM unit is relative to the font-size of its direct parent, REM is only relative to what’s set on the HTML element. And if nothing is set, to the browser default.
