HubSpot CSS REM Units: A Practical Guide to Scalable, Accessible Design

What does rem mean in CSS?

Rem means root em. One rem equals the computed font size of the root html element. If the root font size is 16px, then 1rem is 16px, 1.5rem is 24px, and 0.75rem is 12px.

Unlike em, rem does not normally change because an element is nested inside another element. That makes it useful for site-wide rules such as heading sizes, section padding, card spacing, and form control dimensions. The reference point remains the root rather than moving from parent to child.

The root font size is often inherited from the browser default, commonly 16px, unless the stylesheet changes it. A user may also have browser preferences or zoom settings that affect how content is displayed. This is why a rem-based system should be tested for readability rather than treated as a fixed pixel conversion table.

Rem, em, px, and other CSS units

Choosing a CSS unit should follow the behavior a property needs. Rem is useful when a value should relate to the site’s global type and spacing scale, but it is not automatically the right unit for every property.

Rem versus em

Em is relative to the computed font size of the element or its parent context. That can be useful for components that should scale as a complete local unit, such as a button whose padding should follow its label. It can also create compounded results when nested elements each use em values.

For example, if a container is 1.25rem and a paragraph inside it is 1.2em, the paragraph is calculated from the container’s computed size. A paragraph set to 1.2rem is instead calculated directly from the root. The choice depends on whether the component needs local scaling or global predictability.

Rem versus px

Pixels are useful when a value should remain visually precise, such as a thin border or a carefully controlled icon stroke. Rem is usually more appropriate for text and space because those values belong to the broader reading and layout system. Neither unit is inherently more professional. The important question is whether the unit matches the intended behavior.

How to define a rem scale for a HubSpot website

A strong implementation starts with a small set of decisions rather than a large collection of isolated values. This matters in HubSpot because global styles, theme rules, custom modules, and page-specific changes can otherwise produce inconsistent results.

1. Confirm the root behavior. Decide whether the site will retain the browser-relative root size or deliberately define another root value. Document the reason.
2. Define type roles. Assign values to body text, supporting text, headings, labels, and other meaningful roles. Avoid creating a new rem value for every individual module.
3. Define spacing tokens. Create a limited scale for gaps, padding, margins, and section rhythm. Name tokens by purpose or size so developers can select them consistently.
4. Set boundaries. Identify which properties should use rem, which should use em or percentages, and which should remain in pixels.
5. Test actual content. Check long headings, translated text, larger browser text settings, forms, cards, and mobile layouts before treating the scale as complete.

Using rem for typography and readability

Typography is usually the clearest place to begin. Body text, headings, labels, and supporting text should have an intentional relationship. A simple scale is easier for a team to maintain than many one-off values that happen to look acceptable on a single page.

Line height needs separate consideration. A unitless line-height, such as 1.5, scales naturally with the element’s font size and can be more resilient when text changes. A rem-based line-height can be appropriate when a design requires a specific vertical rhythm, but it should be checked at larger text sizes and with multiline content.

Do not assume that changing the root font size automatically makes a site accessible. Readability also depends on contrast, line length, font choice, focus states, content structure, and whether text can enlarge without being clipped or overlapping other content.

Using rem for spacing, components, and responsive layouts

Rem can provide a shared rhythm for section padding, card gaps, button padding, form spacing, and the distance between headings and supporting content. A small spacing scale reduces arguments about whether a component should use 14px, 15px, or 16px and makes visual changes easier to coordinate.

For example, a HubSpot landing page might use a small spacing token for label-to-input gaps, a medium token for card content, and a larger token for section separation. The exact values are less important than having an explicit rule for when each token is used.

Responsive layouts still require more than rem. Grid columns, container widths, flexible images, and text wrapping depend on available space. Rem-based media query thresholds can be useful when breakpoints should relate to the site’s type scale, but the result must be tested against the actual content and component behavior. A breakpoint is a layout decision, not merely a mathematical rem conversion.

A hypothetical HubSpot module example

Imagine a reusable pricing or service card module with a heading, descriptive text, list, and button. A stable design might use rem for internal padding, the gap between content groups, the heading size, and the button’s vertical padding. The card width would remain controlled by its grid or container, while a border could use a pixel value for visual crispness.

If the heading becomes longer on mobile, the correct response is not necessarily to reduce every rem value. The module may need a different column arrangement, a flexible height, or a clearer content rule. Rem provides consistency, but it does not replace layout reasoning.

Accessibility considerations for rem units

Rem-based text can respond more predictably to changes in the root font size than a design built entirely around fixed values. This can support users who need larger text, provided the page remains usable when content grows.

• Check that headings and body copy remain readable at increased text sizes.
• Confirm that buttons and form fields do not clip their labels.
• Test navigation, cards, and tables for overlap or unwanted horizontal scrolling.
• Use responsive images and flexible containers alongside the rem scale.
• Review focus indicators and interactive states separately from typography.

Accessibility should be treated as a testable behavior of the page, not as a claim made because rem appears in the stylesheet.

Governance for rem-based HubSpot CSS

The technical unit is only part of the operating model. Teams need to know who owns the root scale, who approves new tokens, and where component exceptions are documented. Without that ownership, a design system can slowly become a collection of unrelated values even when most declarations use rem.

For larger HubSpot implementations, document the relationship between theme styles, custom modules, template-level rules, and any page-specific overrides. A developer joining the project should be able to determine whether a spacing change belongs in a shared token, a component rule, or a single page.

HubSpot work benefits from the same process-first discipline as other business systems: clarify the intended state, define the rule, assign ownership, and then choose the implementation method. If the site needs broader template, CRM, or automation alignment, the HubSpot consulting service page provides relevant context. For work spanning data, pipelines, and connected processes, see CRM consulting.

Common mistakes to avoid

Changing the root size to make conversion easier

Setting the root to 62.5 percent can make mental conversion from rem to pixels appear simpler, but it changes the baseline used by the site. It should not be adopted solely because 1rem becomes approximately 10px. Retaining a browser-relative baseline may make the system easier to reason about from an accessibility perspective.

Using rem everywhere without a purpose

Replacing every pixel value with rem can obscure intent. Borders, icons, shadows, and layout relationships may need different units. Consistency means consistent behavior, not identical syntax.

Assuming one scale fits every component

A global scale should create useful constraints, not prevent sensible component design. A compact navigation control and a large content card may share tokens while still needing different local relationships.

Testing only the default viewport

A stylesheet that looks correct with short English copy at one browser setting may fail when headings wrap, text grows, or content is translated. Test the states that matter to the business and the users, not only the design preview.

How to decide whether rem is the right choice

Ask three questions for each category of CSS value: Should it scale with the site’s root reading size? Should it scale only within this component? Or should it remain tied to a precise visual or container relationship?

Choose rem for the first category, consider em for the second, and use pixels, percentages, flex, grid, or viewport units where the third category requires them. This decision rule is more durable than a blanket standard because it connects the unit to the behavior the interface needs.

For HubSpot teams, the goal is a stylesheet that remains understandable as templates, modules, campaigns, and content evolve. Rem units can support that goal, but only when they are part of a defined design system with clear ownership, deliberate exceptions, and testing that reflects real page conditions.