HubSpot Guide to CSS REM Units
Designers and developers working with HubSpot sites need scalable, consistent styling, and CSS rem units are one of the best tools to achieve that. Understanding how rem works helps you create responsive typography, spacing, and layouts that look great on every device and are easier to maintain over time.
This guide breaks down how rem units work, how they differ from other CSS units, and how you can apply them step by step in your web projects.
What Is a REM Unit in CSS?
A rem (root em) is a CSS length unit that is based on the font size of the root element, usually the <html> element. That means every rem value is calculated relative to a single, central reference point: the root font size.
In many browsers, the default root font size is 16px. If that default is not changed, then:
- 1rem = 16px
- 0.5rem = 8px
- 2rem = 32px
Because the rem unit always looks to the root element, it remains consistent across your whole site, even when components are deeply nested in your HTML structure.
REM vs PX, EM, and Other Units
Before putting rem into practice, it helps to compare it with other common CSS units.
Pixel Units vs REM in HubSpot Design
Pixel (px) units are absolute. When you set an element to 24px, it will always render at 24 pixels, unless zoom or accessibility settings change the overall scale of the page.
With rem units, the value is relative to the root font size. If the root is 16px, then 1.5rem equals 24px. But if you or a user changes the base size in the browser, rem-based values scale automatically, making your layout more adaptable.
This is particularly helpful for sites built on platforms like HubSpot, where responsive design and accessibility are priorities.
EM Units vs REM Units
em units are relative to the font size of the element itself or its nearest parent, not the root. That means em units can compound when elements are nested, leading to unexpected sizes.
For example:
html { font-size: 16px; }
.container { font-size: 1.25rem; } /* 20px */
.container p { font-size: 1.2em; } /* 24px (1.2 * 20px) */
Using rem instead keeps sizing predictable, since every value is tied back to the root, not to a parent element.
How REM Units Work Under the Hood
The key to understanding rem is recognizing that all calculations start from the root font size. If you set:
html { font-size: 16px; }Then every rem-based property will be a multiple of 16px. When you update that single value, your entire scale adjusts.
Designers often use a base size that makes mental math easier. Common choices include:
- 16px (browser default)
- 10px (for a decimal-based scale)
- 62.5% of 16px (which is 10px, but responsive to user settings)
For example, using a percentage-based approach:
html { font-size: 62.5%; } /* typically 10px */
body { font-size: 1.6rem; } /* 16px body text */
This method keeps your layout flexible while making it easy to convert between rem values and pixels.
Step-by-Step: Using REM for Typography
Consistent typography is one of the biggest advantages of working with rem units. You can establish a type scale that cascades across your entire site.
1. Set the Root Font Size
Start by defining the base size on the html element:
html { font-size: 16px; }Or, to respect user settings and maintain flexibility:
html { font-size: 100%; } /* typically 16px, but user-controllable */2. Define a REM-Based Type Scale
Next, map your headings and body text to rem values that follow a simple progression, such as a modular scale:
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.5rem; } /* 24px */
small { font-size: 0.875rem; } /* 14px */
All of these values can be updated at once by changing the root, ensuring consistent scaling across your templates and modules.
3. Apply REMs to Line-Height and Spacing
To keep visual rhythm consistent, use rem for line-heights, margins, and padding around text elements:
p {
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: 1rem;
}
h2 {
font-size: 2rem;
margin-bottom: 0.75rem;
}
This keeps typography balanced and makes spacing adjustments straightforward.
Using REM for Layouts and Spacing
rem is not just for text. You can use it for layout elements to build a consistent system for spacing and components.
Creating a REM-Based Spacing Scale
Define a simple scale that you can reuse throughout your CSS:
:root {
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 3rem;
}
.section {
padding: var(--space-lg) 0;
}
.card {
padding: var(--space-md);
margin-bottom: var(--space-md);
}
Because everything uses rem, updating the root font size scales every spacing token in a predictable way.
REM in Responsive Layouts
You can also use rem units in media queries to create breakpoints that align with your type and spacing scale:
@media (min-width: 48rem) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (min-width: 64rem) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
This approach syncs your layout changes with your typographic and spacing rhythm.
Accessibility Benefits of REM Units
Using rem contributes to a more accessible experience. When users adjust their default font size in the browser, rem-based typography and spacing respond accordingly.
With px-only designs, zooming may not give users meaningful control over text scale. In contrast, rem ensures that your entire visual system respects user preferences.
- Better readability for users who need larger text.
- Consistent scaling for headings, paragraphs, and components.
- Improved compatibility with assistive technologies.
Practical Example with REM
The original reference for this article explains rem units in more depth and provides code samples. You can read it directly here: CSS REM guide.
Below is a simplified example of a card component using rem units consistently:
html { font-size: 16px; }
.card {
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08);
}
.card__title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.card__text {
font-size: 1rem;
line-height: 1.5rem;
}
If you decide later that your root font size should be larger for readability, you only need to adjust the value on the html element and every card on the site will scale automatically.
Optimizing Workflows Around REM
Teams that rely on design systems or style guides can standardize on rem to keep development efficient and code maintainable.
Documenting REM Scales for Teams
To keep developers aligned, document:
- The root font size and why you chose it.
- Your type scale and spacing scale in rem units.
- Guidelines for when to use
rem,em, or percentages.
This kind of documentation is especially useful when working with external partners or agencies that need to match your existing system. Agencies like Consultevo often use this practice to keep multi-developer projects consistent over time.
When to Use REM vs Other Units
While rem is powerful, you do not need to use it for every property. A balanced approach might look like this:
- Use rem for font sizes, spacing, and component dimensions that should scale.
- Use px for borders or hairline elements that must remain visually crisp.
- Use percentages or viewport units for large-scale layout behavior.
Conclusion: Why REM Units Matter
CSS rem units give you a predictable, scalable way to control typography, spacing, and layout from a single root setting. By anchoring your design system to the root font size, you make it easier to maintain consistency, improve accessibility, and adapt your site as design requirements evolve.
Whether you are building custom templates, refining landing pages, or maintaining a large content library, understanding and using rem effectively will help you deliver cleaner, more resilient front-end code.
Need Help With Hubspot?
If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.
“`
