How to Adjust REM Size for Typography in CSS
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鈥檛 want to change all typography styles by adding .1-.2 to all HMTL styles
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鈥檛 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. Here鈥檚 how you can do it:
Locate or add the root font size in your CSS:
The default root font size is usually 16px. You can change this in your CSS file: html { font-size: 16px; /* default */ } 2. Increase the root font size to scale up your typography: 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): html { font-size: 20px; } 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. 3. Adjust as needed: You can experiment with different root font sizes to find the one that best suits your design needs. 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鈥檛 know where the CSS settings are.
Sure, Dave T., to change the base REM size for typography in Webflow, you鈥檒l want to adjust the root font size, typically set on the body element. Here鈥檚 how to do it:
Open your Webflow project and go to the Designer view.
Select the Body element from the Navigator in the left-side control panel. This will target the base styling for your entire site.
Once the Body element is selected, go to the Style tab in the right-side control panel.
Scroll down to the Typography section. Here, you鈥檒l 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.
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.