The rem
unit helps maintain consistency with font sizes across elements, as they are based on the root element's (html) font size.
Additionally, when users adjust their base font size in the browser settings, using the rem
unit for your font sizes make sure that these changes are consistently reflected throughout your site.
Let us look at an example.
Open the above code in NeetoCode. Then adjust the browser's font size settings and observe how elements styled with rem units adapt in size. Note that while the h1
remains unchanged due to its absolute size (32px), the h2
, p
, and button
elements adjust their font sizes based on the browser's font settings.
We can also see the same in the GIF given below.