When I started creating websites just last year, working mainly with HTML and SASS, I would only use the px unit for components sizing. I wasn't really that concerned with making the web pages as responsive oriented as it needed to be because my focus was to bring my interface designs to life as best as I could.
After about 2 to 3 school projects, I watched a video by Kevin Powell about CSS units eventually learning about the rem unit and I've been using it on almost anything every since.
Rem and the 62.5% Value
The default font size of the root html is 16px and whenever we use the rem unit, it is referencing this value; 1 rem is equal to 16px. But this value makes it hard for us to give sizes to components because we would then need to do computation just to get an exact px unit value.
By changing our root font size to 62.5% we are ultimately setting it to 10px which is way easier to use and manipulate. (10px is 62.5% of the default 16px root font size)
Closing Thoughts
Setting the root font size to 62.5% is a quality of life change for me and a lot of developers saving us a lot of time from the bothersome process of font computation and allowing us to reference our interface designs very easily. It's an easy check-mark to the responsive layout specification list!
Top comments (0)