Using rems for responsive text

While working on an old project I wanted to make it responsive. While doing this I faced the usual task of resizing the header font.

However, I didn’t want to have loads of media queries to set the size at specific breakpoints.

Therefore I decided to do some research and stumbled across REMs (Responsive Ems). I found this blog post and it gave a quick intro into the world of Ems from being used to pixel land.

To use responsive Em’s, basically set the initial html font size as 100%, then at specific break points change the body font size via the body tag in rems, not px. This way you only have to declare one size and all your text will adhere to it.