When you set values for style properties such as font size or line height, the default unit applied to the numerical value that you enter in the field is pixels (px). There are a handful of other units you can choose from that change how typography sizing behaves.

Changing Units

You can either choose these units from the unit dropdown or by typing in the unit after the value and pressing enter.

Typography units in Webflow

Pixels (px)

Pixel values for font size can proportionally scale with images and other elements that have an assigned pixel value. To use the default pixel value, just type a numeric value, for example 90, and press enter. The value will be 90px.

Ems (em)

Every browser has a default font size, which is usually 16px. When you set the font size of an element on your site to 1em, then 1em will equal 16px. And 2ems will be equal to 2 x 16px = 32px.

Typography units in Webflow

This is important: ems are also relative to the font size of their parents. So, if a parent section has a value of 0.5ems the child paragraph with 1em value will have a font size of 16 x 0.5 = 8px. While another paragraph in the body with 1em font size will have a font size of 16px.

Typography units in Webflow

Rems or- Root ems (rem)

As an alternative to ems, you can use rems, aka root ems. Rems are relative to the HTML font size. Which is going to respect the browser's default font size. So, any element with value 1rem will be equivalent to 16px regardless of the font size of it’s parent element. Even if you change your default font in the body.

Typography units in Webflow

Percentages (%)

Like ems, the percentage is going to refer to the parent element's font size.

Viewport Units (vw & vh)

Viewport units can be used to create responsive fonts. Viewport width (vw) is based on the width of the viewport. This is used when you want to scale a text proportionally to the viewport width. Viewport height (vh) is based on the height of the viewport. This is used when you want to scale a text proportionally to the viewport height.

Pro tip: When using viewport units, test on actual devices specially when using vh. These font sizes will vary greatly on different devices.
Pro tip: In most cases, pixel values are a safe choice. The best way to get familiar with these is to try them out inside a project. You can experiment by observing the results on the canvas, and toggling browser and device widths.