In this article I'm going to go through a few CSS units for customizing the font-size of text when... Tagged with webdev, html, css.

Nitin Reddy

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The Battle of the Units: PX vs REM vs EM in this article. I'm going to go through a few CSS units for customizing the font-size of text when building webpages. There are a lot of other units such as pt, pc, ex, etc. I will be focusing on the 3 most popular units; px class="one-em">1 em based on 10px.

The Battle of the Units: PX vs REM vs EM

<ul>
<li>PX: Depends on the device pixel ratio. Same size on different devices.</li>
<li>EM: The size of the element is dependent on the parent element</li>
<li>REM: The size of the element is dependent on the root</li>
</ul>

<ul>
<li>PX: Most widely used. Suitable for borders and paddings</li>
<li>EM: Not recommended</li>
<li>REM: Best for accessibility</li>
</ul>