What unit for fonts in Webflow?

There are many units for choosing font size on a website, but two of them are by far the most popular: pixels and REMs. 

By default, most CRMs offer to express the size in pixels, because this unit is absolute. This means it's the same size for everyone and across all browsing devices. 

Which is actually a mistake! In fact, REM is more ergonomic and accessible because it constantly adapts to the page and the device it's displayed on. 

Here's a complete guide to understanding what REM is, why it's the best unit for fonts, and how to convert text to REMs in Webflow. 

I. What is a REM? 

A REM, short for "Root em," is a unit based on the default font size of the user's web browser. Text in REMs therefore adapts to preference changes. This means that REM is a relative unit, which adopts "responsive" properties. 

Conversely, the Pixel is an absolute unit. The size of a font expressed in pixels is therefore strictly defined. For example, if you set a font size of 16 pixels, it will remain constant. It will be independent of any changes to its root or other elements. 

It is often recommended to use REMs for defining font size because it offers better adaptability and a better user experience, especially on mobile devices or when content is resized. 

For accessibility reasons, it is also recommended and necessary to set your fonts in REM. Indeed, for visually impaired people or those who have difficulty reading your content, it is essential to have the option to enlarge the content to improve its readability. 

If you would like more information on the rules for meeting accessibility standards, please read our article on digital accessibility. 

II. How to convert text to REM in Webflow? 

By default, the value of a REM is 16 pixels. 

To use REMs in your Webflow project, you simply need to divide all your pixel-defined fonts by 16 and opt for the REM unit. 

Most fonts in Webflow inherit their size from global elements like "All Paragraph," which defines the style to apply to each paragraph.

‍

To modify all your fonts, we recommend using REM sizes directly within the Body element. 

To simplify your conversions, you can also use Webflow extensions. At Afalence, we use Wizardry Technique Converter for its ease of use.

‍

Once the extension is installed, you can convert a unit to REM by adding a space after the pixel value. Then press Enter, and the conversion is done! 

III. Conclusion 

It is recommended to use REMs to define your font sizes, but also to define the size of your graphic elements. This is because if the font size increases but its container doesn't adapt, you risk ending up with disorganized and unreadable text.  

‍

As a general rule, pixels should only be used in certain specific cases : defining the width of a border, rounding the corners of a rectangle, etc. 

If you would like assistance with converting your fonts to REM, don't hesitate to contact us! 

For more Webflow tips, we invite you to read our Webflow tutorials!