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.
In the CSS above,
font-size is set to
60px. In CSS, size can be assigned in pixels (px), rems, or ems.
pixel (px): Standard unit of measurement for sizing fonts and other HTML elements.
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
2rem is equivalent to
32px (a doubling), 3rem is equivalent to
48px (a tripling) and so on.
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.