Relative Font Sizes (Using "rem")

In some themes, you may find that some typography, such as headings, might be set to use "rem" instead of a value like "px". 

What is a rem?

A rem is a measurement unit that is relative to the base font size in your theme (the size of a standard paragraph when you're typing into a Rich Text module or blog post, for example).

If your base font size is 16px, then:

• 0.5rem = 8px (0.5 x 16)
• 1rem = 16px (1 x 16)
• 1.5rem = 24px (1.5 x 16)
• 2rem = 32px (2 x 16)
• 2.75rem = 44px (2.75 x 16)
• ...etc. 

And if your base font size is 20px, then:

• 0.5rem = 10px (0.5 x 20)
• 1rem = 20px (1 x 20)
• 1.5rem = 30px (1.5 x 20)
• 2rem = 40px (2 x 20)
• 2.75rem = 55px (2.75 x 20)
• ...etc. 

Relative measurements are used by designers and developers because:

• They help create a consistent systems for your typography and spacing
• They scale well, so if you want different font sizes on mobile and desktop, for example, you only need to change the base font size and all other font sizes will update accordingly

How do I update my font sizes using rem?

You can update your theme's font sizes from your theme settings. You'll find these under the "Theme" tab of any page that uses your theme or by going to your HubSpot account settings (the gears icon in the top right hand corner) > Website > Themes and selecting your theme. 

Within your theme settings there should be a "Text" item under which you'll see options to customize Headings 1 - 6, Body and Links ⁽¹⁾.

If your typography has been set to "rem" ⁽²⁾, you'll see the value in "rem" under the font size field:

Notes:

• (1) Your theme settings may vary but should have similar settings
• (2) Your font sizes may use another value, like pixels. If you wish to use rem you'll need some development knowledge to update your theme's fields.json file with the new unit.