---
description: Units that commonly used on websites.
icon: ruler-combined
---

# Units

Understanding **rem**, **unitless**, **em**, and **px**:

<table data-card-size="large" data-column-title-hidden data-view="cards" data-full-width="false"><thead><tr><th>Unit</th><th>Purposes</th></tr></thead><tbody><tr><td><strong>rem</strong></td><td>Use rem for most parts of your website. Rem units are relative to the root (HTML) element, making them ideal for fluid, scalable, and consistent sizing.</td></tr><tr><td><strong>-</strong> (unitless)</td><td>Ideal for <strong>line-height</strong> as using em may lead to unexpected results. Unitless values ensure that the line height scales proportionally with the font size.</td></tr><tr><td><strong>em</strong></td><td>Great for spacing between text and elements. It scales nicely relative to the parent element's text size, providing responsive and proportional spacing.</td></tr><tr><td><strong>px</strong></td><td>Use px when on borders and small spaces that are fixed and unlikely to change. It helps to display correctly and eliminates the need for calculations.</td></tr></tbody></table>



Visit this section to learn more about the purpose of fluid font sizes that use **rem** as unit:

{% content-ref url="fluid-typography.md" %}
[fluid-typography.md](fluid-typography.md)
{% endcontent-ref %}