How to use REM in Webflow

Hello! How can I set html tag font-size to use rem in site? When I add it in header style it doesn’t affect font-size in preview.

Because CSS code added at site level (in the custom code tab of site’s Settings page) or at page level (in the propertie panel of each page) don’t take effect in the Designer.

Instead, you can use the Custom Code Component right in the viewport, inside of the page. CSS code placed there will render live in the designer.

In order for the code to affect all pages, I recommend placing this Custom Code Component inside of the Symbol you’re most likely using for your Navbar.

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2018-11-28_14-42-08.png

<style>
	html {font-size: 14pt}
</style>
1 Like

Hi Vincent,

Do you need to do this to use REM sizes at the browser default (16px), or does it work without adding any custom elements?

Sizes appear to match the REM to PX conversion in my build without adding anything.

I’m confused.

Also, why pt instead of px in the snippet?

Any advice would be appreciated. The Webflow Uni videos go into detail about using EMs, REMs, PX and %, but don’t explain how (or why you should) set any default HTML element.

Thanks,
Will

<style>
html {font-size: 16px}
</style>

Edit: Grammar

I’ve seen other blogs recommending the following:

html {
font-size: 100%;
}

I can’t find any definitive answer on best practices in the forum or university.

Can anyone help?

Thanks,
Will

Will you don’t have to define anything.
REM is based on the default defined by the browser app.
All browser app use 16px as the default.
Only browsers set otherwise, mainly for accessibility matters, will show your content differently. And that’s good.
If you’re redefining your size on the HTML document, it ruins the purpose of using REM.

Thanks for clarifying Vincent, apologies for not noticing the reply.

1 Like