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