Responsive Font-Sizes In React Apps
Tags: css, webdev, beginners, react
Published: 2022-07-03 08:05:33

## Best CSS practice to ensure consistent styling in web applications

We live in a mobile-first world and hence as a front-end developer it is our job to ensure that the web-apps we are building are mobile-friendly. With the rise of hybrid frameworks, things that are developed for web are easily translated to Android and iOS applications.

This shift in the development community has not only reduced the cost of shipping products but has also increased the speed at which these products are being shipped. Having responsive apps thus becomes far more important today. There are a ton of ways to [style your react apps](https://adityatyagi.com/index.php/2022/02/06/4-ways-to-style-react-components-a-beginners-guide/) but for making your web apps responsive, you need to have your fundamentals clear!

## Pre-requisite to understanding responsive layouts

Copy-pasting this little hack will serve the purpose but that is not how true developers work, and if you are reading this, I know you are are legit developer! So, please understand the underlying principles first and then implement it.

With this little hack, you can ensure consistent:

1.  Spacing
2.  Fonts
3.  Image sizes

across your web app. This one little hack will require you to use a CSS pre-processor like [SCSS or SASS](https://sass-lang.com/).

As a pre-requisite, you need to understand relative CSS length units

1.  `px`
2.  `em`
3.  `rem`
4.  `vh` / `vw`
5.  `vmin` / `vmax`

> Relative length units are relative to something else, perhaps the size of the parent element’s font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.  
> \- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages)

There are 18 relative CSS length units and you can read about them [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages). But for this little hack, all we need to understand `rem` .

## CSS REM — What is REM in CSS?

Any CSS value that is measured in `rem` is measured **_relative to font-size of the root element._**

> TLDR: Using `rem` and `em` units is better than using px.

`rem` stands for **root em** and it means “root element’s font size”. As web developers we need to understand that our apps will be used by all types of users — young, old, specially abled, and thus we need to take care of accessibility. `rem` helps us to maintain that accessibility.

Why not `px` ? The disadvantage with using `px` with everything like padding, margin and font-sizes is that the UI _does not scale proportionately_. This is where `rem` shines. It helps the UI to _scale_ _proportionately._

The root font-size is 16px. So, when we encounter a value of `1rem` , we mean `16px`

## When to use `rem` and when to use other relative CSS units?

I personally use `rem` for font-sizes and `em` for `margin` and `padding` . You care read more about it [here](https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/).

There are solid reasons to use `rem` and not `em` for font-sizes. While re-searching about this blog post (yes, I do my homework!), I came across this very detailed analysis on `rem` on font-sizes. Please go through it once and thank me later!

[Use Rems for Font Size to Respect User Preferences](https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/) by [Aleksandr](https://www.linkedin.com/in/aleksandr-hovhannisyan-ba154b120/)

## How To Use REM In CSS

There are multiple ways to use `rem` in your front-end applications. This is not something specific to React. You can use it with any web-applications.

Some of them, from the same [article](https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/) above are:

-   Work out the math by hand (e.g., `24 / 16 = 1.5rem`).
-   Use a CSS calc expression (e.g., `calc(1rem * 24 / 16)`).
-   Use a CSS preprocessor like Sass and write a custom `to-rems` utility function.
-   [Use the 62.5% font size trick to make the math easier](https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/).

Here, we’ll be discussing the third in the list i.e **Use a CSS preprocessor like Sass and write a custom** `to-rems` **utility function.**

As I have already pointed out that we need to use a CSS preprocessor for this. I am going with [SASS](https://sass-lang.com/).

This is a utility function wherein you just pass the value in `px` and the function returns the `rem` equivalent.

![pxToRem function](https://miro.medium.com/max/1260/1*VIR1MPPHT9Yo5-IdzUgXEg.png)


Consider this situation:

You are working with a UI/UX designer and the designer provides you with a Figma file. Your job is to convert Figma designs in front-end code, but in a responsive manner. Now the font-size values can vary for different designs and screens and hence you cannot have a pre-determined CSS variables. This is where the CSS utility method `pxToRem` will come handy!

You can use this function like this:

![Using utility function](https://miro.medium.com/max/1260/1*XzMaMVdu-gvhARbdfeZHZQ.png)



## Need for a utility function

Getting `rem` values for `px` values like 16px, 32px, 8px is easy for a root font-size of 16px. It will be 1rem, 2rem, 0.5rem.

But what if we want to capture font-size values of 15px, 35px, 7px? I certainly cannot divide 15/16 and come to a floating value with proper rounding off at a moments notice. But it might be easy for you. So, kudos to the “genius” in you!

Not everyone is a genius like you! I certainly am not!

Now, for dumb people like me who are not math wizards and are able to do the calculation on the fly, we need a simple utility function.

But for a math wizard/genius like you, all you need to do is divide the value in `px` you want to convert in `rem` by the root font-size.

So, if the root font-size is `16px` then the utility function can give back `rem` values pretty easily. All we have to pass is the font-size values from the Figma designs.

![Using utility function](https://miro.medium.com/max/1260/1*HiFy8hMXT-Hv3lH5N011Yw.png)



## Why Not To Use EM For Font-Sizes in CSS?

I’d like to cover this part as well so that you can appear smart in-front of your peers when they attack you with this questions!

> So, `em` calculates the value relative to its parent element with an explicit `font-size` Therefore it will take the relative value from it’s **closest common ancestor with any _explicit_ font size value**. So even if it’s container or container’s container had an explicit font size set, it will use that value  
> \- [A very thoughtful comment](https://dev.to/ortonomy/comment/1fbpg)

Let me show via an example, where things can go south when using `em` for font-sizes:

![HTML file with parent-child elements](https://miro.medium.com/max/1260/1*uALGkyyfdWWpv-8PGwvLeg.png)



Now we give a `font-size` to the parent element. The child element will consider parent’s i.e **closest common ancestor with an _explicit_ font size value** as its base for the calculation of `rem`

![CSS file where child gets parent’s font-size as base for em value](https://miro.medium.com/max/1260/1*ACgkRMBVHhbc9VwDgOx3pQ.png)



But, this can create an issue as you can see here. Different parent elements can have different explicit values for font-sizes and hence it will lead to different results for the same `0.5em` values in children elements.

The issue becomes even more serious with nesting:

![Nested child](https://miro.medium.com/max/1260/1*SoxYGKqP6R1u2VYmB3CROA.png)



If we give font-size to `parent` and `sub-parent` , the child will get the nested value in terms of `em`

![Problems with nested child when using em](https://miro.medium.com/max/1260/1*MuWJbY4-3smpRsMjG73deg.png)



Hence, we cannot use `em` for font-sizes.

## Other ways to use REM in CSS for responsive web apps

The above is just one of the ways to use `rem` for your web applications. There are other ways as well. Please feel free to explore them here.

1.  [The 62.5% Font Size Trick](https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/)
2.  Work out the math by hand (e.g., `24 / 16 = 1.5rem`).
3.  Use a CSS calc expression (e.g., `calc(1rem * 24 / 16)`).

---

Thanks for reading ❤

If this blog was able to bring value, please follow me [here](https://dev.to/adityatyagi)! Your support keeps me driven!

Originally published on [adityatyagi.com](https://adityatyagi.com/index.php/2022/07/02/responsive-font-sizes-in-react-apps/)

Want to connect?
Follow me on [Twitter](https://twitter.com/secondbestcoder) and [LinkedIn](https://www.linkedin.com/in/aditya-tyagi-03b4189a/) or reach out in the comments below!