Hubspot CSS Font Size Guide: How to Control Typography

Designing readable, scalable text is essential for any website that wants to match the polished look of Hubspot. This guide walks you through CSS font size fundamentals, relative and absolute units, and responsive sizing so your typography works smoothly across devices.

Why Font Size Matters in a Hubspot-Style Layout

Good font sizing improves readability, accessibility, and overall user experience. Pages designed with a clean Hubspot-style layout rely on clear hierarchy, consistent spacing, and predictable scaling as screens get smaller or larger.

When you understand how CSS font-size works, you can:

• Set a clear typographic hierarchy for headings and body text.
• Create layouts that stay legible on phones, tablets, and desktops.
• Adjust just a few root values instead of editing every selector.

Core CSS Font-Size Syntax Used by Hubspot-Style Sites

The basic property you will use is font-size. It can be applied to most text elements:

p { font-size: 16px; }
h1 { font-size: 2.5rem; }

Every Hubspot-like design starts with a consistent base for the body text and then scales headings relative to that base.

Absolute Font Size Units in a Hubspot Layout

Absolute units do not change based on surrounding elements. They are easy to understand but less flexible on responsive layouts.

Pixels (px)

Pixels are the most common absolute unit and are heavily used in simple marketing pages similar to those from Hubspot.

body { font-size: 16px; }
p { font-size: 14px; }
small { font-size: 12px; }

Pros:

• Simple to reason about and design in static comps.
• Consistent across most browsers and devices.

Cons:

• Less flexible when users adjust browser preferences.
• Can require more manual work for responsive typography.

Points (pt) and Other Print Units

Points (pt) are used mostly for print stylesheets and are rarely used for screen-first designs like a modern Hubspot page. Stick to pixels or relative units for better on-screen control.

Relative Font Size Units for Hubspot-Level Responsiveness

Relative units scale based on another value such as the font size of the parent element or the root HTML element. This is how you achieve flexible typography that feels like a refined Hubspot interface.

Using em for Component-Level Scaling

em units are relative to the font size of the element’s parent.

body { font-size: 16px; }
.card { font-size: 1rem; }
.card h2 { font-size: 1.5em; } /* 24px inside .card */
.card p { font-size: 1em; }   /* 16px inside .card */

Advantages:

• Great for scaling entire components together.
• Useful when you want nested text to grow in proportion.

Caution: em values compound. If a parent is already scaled up or down, children layer on top of that scaling, which can surprise you if not tracked carefully.

Using rem for Hubspot-Style Global Consistency

rem units are relative to the root html element’s font size. This is ideal when building large systems like a Hubspot marketing site or app interface.

html { font-size: 16px; }
body { font-size: 1rem; }
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; }   /* 32px */
p  { font-size: 1rem; }   /* 16px */

Benefits:

• Change html font-size once to scale the entire site.
• Eliminates compounding issues common with nested em sizing.
• Makes design systems easier to document and maintain.

Viewport Units for Responsive Hubspot-Like Typography

Viewport units tie font size to the size of the browser window, allowing text to grow or shrink as the screen changes. Many modern landing pages similar to Hubspot use these to create bold, responsive hero headlines.

• vw – viewport width (1vw = 1% of viewport width)
• vh – viewport height (1vh = 1% of viewport height)

h1.hero-title {
  font-size: 6vw;
}

This makes the heading scale dynamically as the viewport changes size.

Combining rem and vw for Hybrid Control

To get more predictable results in a Hubspot-style design, you can combine relative units:

h1.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

clamp() sets a minimum value, a preferred flexible value, and a maximum value. This technique keeps headings from becoming unreadably small on mobile or excessively huge on large screens.

Creating a Hubspot-Inspired Font Scale

A font scale is a sequence of font sizes with a consistent ratio, creating a visual rhythm like that seen in polished marketing sites such as Hubspot.

Step 1: Choose a Base Size

Start with a base size on the html or body element:

html { font-size: 16px; }

Step 2: Pick a Typographic Ratio

Common ratios include:

• 1.125 (minor third)
• 1.2 (major third)
• 1.25 (perfect fourth)

Apply the ratio across heading levels. For example, using 1.25:

body { font-size: 1rem; }      /* 16px */
h6   { font-size: 1.125rem; }  /* 18px */
h5   { font-size: 1.25rem; }   /* 20px */
h4   { font-size: 1.563rem; }  /* ~25px */
h3   { font-size: 1.953rem; }  /* ~31px */
h2   { font-size: 2.441rem; }  /* ~39px */
h1   { font-size: 3.052rem; }  /* ~49px */

Step 3: Test Across Devices

Preview your scale on multiple devices and breakpoints so the experience feels as polished as a Hubspot landing page:

1. Check legibility on small phones (320px–375px width).
2. Verify balance between headings and body copy on tablets.
3. Ensure headings are not overbearing on large desktop screens.

Responsive Techniques from Hubspot-Style Pages

To keep typography flexible yet controlled, combine relative units with media queries and modern CSS functions.

Media Queries for Fine-Tuning

html { font-size: 16px; }

@media (max-width: 768px) {
  html { font-size: 15px; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
}

This makes all rem-based text scale down slightly on smaller screens, similar to techniques used on responsive Hubspot templates.

Using clamp() for Automatic Scaling

clamp() is ideal for hero text and key headings that need strong presence without manual micro-adjustment.

h2.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

The heading never goes below 1.5rem or above 2.25rem, but can flex in between using vw.

Practical Tips for Hubspot-Level Readability

• Keep body text around 16px–18px for most audiences.
• Maintain at least a 1.4–1.6 line-height for paragraphs.
• Limit line length to 60–80 characters per line.
• Test with users who have different display sizes and accessibility needs.

Learning from the Hubspot Example and Additional Resources

To see a live reference of how font size units are explained and applied, review the original guide at this Hubspot CSS font size article. Analyze how examples mix px, em, and rem to balance control with flexibility.

For broader strategy on building scalable design systems, growth, and technical implementation, you can also explore resources at Consultevo to complement what you learn from the Hubspot ecosystem.

Conclusion: Applying Hubspot Font Size Principles to Your Site

By mastering CSS font size units—px, em, rem, and viewport-based values—you can craft typography that feels as professional and user-friendly as a Hubspot marketing page. Start with a solid base size, define a clear type scale, use rem for consistency, and add responsive behavior with viewport units, clamp(), and media queries. With these techniques in place, your site’s text will remain readable, attractive, and consistent across all modern devices.