Community forum for knowledge and support

Updated 5 months ago

Adjust the root font size for your typography

At a glance
The community members discuss how to change the base size of 1 REM for typography without manually adjusting every style. The main suggestions are:

1. Modify the root font size in CSS by changing the font-size on the html element. This will scale up all elements using REM units proportionally.

2. For Webflow users, adjust the root font size by selecting the Body element and changing the Font Size in the Typography section.

Additionally, a community member suggests using a fluid responsive approach linked to viewport width, such as the Client First Fluid Responsive method.

Useful resources

Hey all, can anyone tell me how do I change the 1 REM size for my typography? The font is just too tiny, but I don’t want to change all typography styles by adding .1-.2 to all HMTL styles

M
S
D
5 comments

To change the base size of 1 REM for your typography without manually adjusting every style, you can modify the root font size in your CSS. REM units are relative to the root element (<html>) font size. By increasing the root font size, all elements using REM units will scale proportionally.<br /><br />Here’s how you can do it:<br /><br /><ol><li>Locate or add the root font size in your CSS:</li></ol>The default root font size is usually 16px. You can change this in your CSS file:<br /><br />html {<br /> font-size: 16px; /* default */<br />}<br /><br /><br />2. Increase the root font size to scale up your typography:<br />For instance, if you want to increase all your font sizes by 25%, you can set the root font size to 20px (25% more than 16px):<br /><br />html {<br /> font-size: 20px;<br />}<br /><br />By doing this, 1 REM will now equal 20px instead of 16px, effectively enlarging all your typography that uses REM units without the need to manually change each style.<br /><br />3. Adjust as needed:<br />You can experiment with different root font sizes to find the one that best suits your design needs.<br /><br />This approach keeps your typography consistent and scalable, ensuring that your styles remain responsive and easy to manage.

Even better if you wanted this change to be linked to viewport width, you can use Client Firsts Fluid responsive https://finsweet.com/client-first/docs/fluid-responsive

thanks, I forgot to mention that I use webflow. I don’t know where the CSS settings are.

Sure, , to change the base REM size for typography in Webflow, you’ll want to adjust the root font size, typically set on the body element. Here’s how to do it:

  1. Open your Webflow project and go to the Designer view.
  2. Select the Body element from the Navigator in the left-side control panel. This will target the base styling for your entire site.
  3. Once the Body element is selected, go to the Style tab in the right-side control panel.
  4. Scroll down to the Typography section. Here, you’ll see the option to set the (Font)Size. Change this to your desired REM value (e.g., 1.2rem or 1.5rem). This will increase the base font size, which will automatically scale up all text elements using REM units.
  5. Preview your changes to ensure the font size is appropriate across your site.

By adjusting the REM size on the body element, you efficiently scale up all typography that uses REM units without the need to manually adjust each individual style.

Add a reply
Sign up and join the conversation on Slack