Units

A Unit determines the size of a property you are setting for an element or its content. It can be Relative or Absolute.

Whether to use Relative or Absolute Units is determined by:

Whether you want what you are styling to scale when the viewport size changes.
What you want it to scale relative to.

Absolute Unit

An Absolute Unit stays the same size even if the parent element or window size changes. If you change between screen sizes, an Absolute Unit will always stay the same size.

Measures

px (pixel, most commonly used)

pt (point)

pc (picas)

cm (centimetre)

mm (millimetre)

in (inches)

Relative Unit

It is important to choose the most appropriate option for the property you are targetting.

A Relative Unit scales relative to the parent or window size. This makes it useful for styling responsive sites.

Measures

% (percentage), may be more appropriate for layout-related properties like width than for font-size.

EM (Relative to the current font size of the element), can be used when you want the font size of a child element to be related to the size of its parent’s font size.

REM (relative to the font size of the root element), can be used when you want the font size to be related to the size of the root element's font size. This is commonly used for headers because they should all be the same size regardless of the parent container.

VW (relative to the width of the viewpoint) can be used for a section with text as it should be relative to the viewport/window.

VH (relative to the height of the viewpoint) can be used for your landing page because it should always be the relative in height to the viewport/window.

CH (number of characters) can be used when you have a mono-spaced font in which the characters are always the same width and you only have limited space.

Units Shortcut

The Units Shortcut property allows you to input a new unit without having to select it in the dropdown. This saves time and improves your workflow.

For instance, if you want to change a Font unit to em, simply input "em" after the numeric value and it will be applied.

Find property to which you want to change the unit.
Write in new unit, for example "em".

The new unit will be automatically applied without having to search through the dropdown.

Last updated 1 year ago

Was this helpful?

Relative Unit

It is important to choose the most appropriate option for the property you are targetting.

A Relative Unit scales relative to the parent or window size. This makes it useful for styling responsive sites.

Measures

% (percentage), may be more appropriate for layout-related properties like width than for font-size.

EM (Relative to the current font size of the element), can be used when you want the font size of a child element to be related to the size of its parent’s font size.

VW (relative to the width of the viewpoint) can be used for a section with text as it should be relative to the viewport/window.

VH (relative to the height of the viewpoint) can be used for your landing page because it should always be the relative in height to the viewport/window.

CH (number of characters) can be used when you have a mono-spaced font in which the characters are always the same width and you only have limited space.

Units Shortcut

The Units Shortcut property allows you to input a new unit without having to select it in the dropdown. This saves time and improves your workflow.

For instance, if you want to change a Font unit to em, simply input "em" after the numeric value and it will be applied.

Find property to which you want to change the unit.

Write in new unit, for example "em".

The new unit will be automatically applied without having to search through the dropdown.

Default Units

Rem conversion