Why you should use rem instead of px in webdesign

Ive always used px sizes in my font styles. It's an out of date practice and there is a more modern way. Rem is the modern equivalent with some benefits.

There is a font-size set as default in all browsers as a default style.  If you do not specify any font size on an HTML page, it will typically render 16px font size text to the page.  This can be overridden in the browser settings. 
When you use px based font sizes in your font styles, you are overriding the users defauly size prefernce.  A better way is to specify your font size using rem units.

Example of a font size specified in pixels (px):
font-size: 16px;

Example of a font-size specified in rem:
font-size: 1rem;

In the above example, if the browser preferences are set to default this will typically be 16 px.  So this will mean that 1 rem is equivalent to 16px.  If the user overrides that setting, then 1rem will be equivalent to the new font size in px set in the browser settings.

By using rem instead of px for you font-sizes you will respect the users preferences by not overriding their preferred default text size.  If you specify your font size in px, it will mean the browser font-size will ignore the users preference for font size set in the browser settings.   If you use rem to specify font-size, it will match the users preference relative to the value set in their browser settings. 

Photo by Anton Rybakov on Unsplash


Popular posts from this blog

Rant: Don't name your mobile app with a pronoun prefix

Web 3.0: Component driven responsive design