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
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
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:
