Web Browser

Code Editor

The size of text has an impact on how users experience a website. The font-size property sets the size of an HTML element's text.

h1 { font-size: 60px; }

In the CSS above, font-size is set to 60px. In CSS, size can be assigned in pixels (px), rems, or ems.

  1. pixel (px): Standard unit of measurement for sizing fonts and other HTML elements.

  2. rem: Represents the default font size for the web browser. Rems can be used to ensure that HTML elements scale in proportion to each other on various web browsers and screen sizes. On most web browsers, 1rem is equivalent to 16px, 2rem is equivalent to 32px (a doubling), 3rem is equivalent to 48px (a tripling) and so on.

  3. em: A relative value that changes in proportion to the size of the parent element. For example, if a parent element has font-size: 20px;, child elements with font-size: 1em; would be equivalent to 20px. Child elements with font-size: 0.5em; would be equivalent to 10px (a halving) and so on.

We will primarily explore px and rem values since these are the most commonly used today.

Report a Bug
If you see a bug or any other issue with this page, please report it here.