Does Webflow support Rem & Em for text and if so, where do I set the initial value for the site or page?

Published on
September 22, 2023

Yes, Webflow does support the use of rem and em units for setting font sizes in text elements. These units are great for creating flexible and scalable typography that adapts to different screen sizes and device settings.

To set the initial value for the site or page, follow these steps:

  1. Select the root element of your site or the specific page you want to modify.
  2. In the Styles panel on the right-hand side, click on the gear icon next to the Typography section.
  3. This will open the "Root settings" or "Page settings" dialogue box.
  4. Under the "Default font size" section, you will find a dropdown menu with options like "Rem" and "Em".
  5. Choose either rem or em from the dropdown depending on your preference.
  6. Enter the desired value in the input field next to the dropdown to set the initial font size for the site or page.
  7. Click outside the dialogue box to apply the changes.

It's important to note that when using rem and em units, the font sizes of elements within the site or page will be relative to this initial value. This allows for easy adjustments and consistency throughout your design.

Additionally, you can also set font sizes using rem or em units on individual elements by directly modifying the typography settings within the Styles panel.

By using rem and em units in Webflow, you can create responsive and accessible typography that can adapt to various devices and screen sizes, enhancing the overall user experience of your website.

Example:

## How to set the initial value for `rem` or `em` units in Webflow1. Select the root element of your site or a specific page.2. Open the Styles panel on the right-hand side.3. Click on the gear icon next to the Typography section.4. In the "Root settings" or "Page settings" dialogue box, choose the desired unit (`rem` or `em`) from the dropdown menu.5. Enter the initial font size value in the input field next to the dropdown.6. Click outside the dialogue box to apply the changes.7. Modify font sizes of individual elements using `rem` or `em` units in the Styles panel directly.

Additional questions related to this topic:

  1. Can I use both rem and em units in the same project in Webflow?
  2. How do I change the font size of specific text elements using rem or em units in Webflow?
  3. Are rem or em units recommended for responsive typography in Webflow?