html{font-size:?} Responsive Magic

Today i am going to show you why do i use

html {
  font-size: 62.5%;
}

and why i think you should use it too.

The reason i am giving font size property to html is because it gives so much practicability to your code for further approaches. For example let's take this pen here:

There are still so many junior developers that are just changing the values of paddings, margins and the way layout is shown. But there is another important thing to change when you are writing the Media Queries, which is font size.

To make life easier you have to use rem whenever you give a font-size property unless it is a special text etc. Default value is defined as 1 rem = 16 px.
To make it down to 10 px and for the sake of doing calculations easier we are giving font-size: 62.5%. It can be calculated like if 16 px is 100% of the font size, 62.5% equals to 10 px. After making it so we can give any value to font-size as we desire while writing Media Queries.

As you can see in the pen i wrote earlier, i scale the font-size down to 50% if it hits the screen width of 380 px. And all the fonts just fit perfectly like i wanted to.

@media only screen and (max-width: 380px){

    html{
        font-size: 50%;
    }
}

If you want you can also give rem to margins, paddings, widths actually anything can have the px value. As the font size scales down or up with the query you write, same thing happens to any element which includes px value too. With the power of this magic you can set these properties between your elements(sections, list items etc.) and let the one line of Media Query code do the job for you. But for sometimes you can't get the perfect vision you want. If that happens to you just writing a couple lines of code can make it instead of writing different values for all the elements you have.

This is what i know and what i can give to you. If there is something i am missing please leave a comment.

That's all people, thanks for reserving your precious time to me. Love y'all <3

Comments

[Freddie]

I usually do something similar, but instead of using % in do this in my base css file.

:root {
   --font-calc: calc(14px + (16 - 14) * ((100vw - 400px) / (1600 - 400)));
}

html,
body {
    height: 100%;
    font-size: var(--font-calc);
}

So in this case 1rem is going to be anything between 14-16px depending on screen resolution, but it can't go lower than 14px unless I specify it with a media query.
It gives basically the same result as using % but you have a bit more control and don't have to use media queries to change the size unless you really need to

[Batuhan]

mvp

[Tomasz Buszewski]

Hello Batuhan.

I'm afraid this is a bad practice. While in most cases it works just fine, some users prefer to have a bigger default font size and are setting it in the browser. After such change, 62% will not be 10px, and your calculated values will change.

I am always hardcoding the html section:

html { 
  font-size: 8px;
}

That way I know that my layout is safe from user configs.

[Batuhan]

But as i give rem to most of the constitutive elements, website will be scaling in harmony and as far as i know giving a percentage to html also help the user who prefer their own font sizes. Does it really effect that bad?

[Tomasz Buszewski]

Yes, everything will scale just fine. But, when user turns up the font size, from, let's say 16, to 22, elements will be too big and the design will look awkward, elements may collide etc. Using fixed size in html and tuning certain elements to be responsive to user preferences is far safer, at least in my opinion.

[tuzemec]

I just created and account here just to post this:

I was recently assigned on a project that took this approach.
There's no words to describe the mess that this causes with a larger codebase.
To all the devs that stumbled on this hm... sad thing... please, just walk away.
Just walk the f**k away.

[Mwansa Chupa]

Thanks, never knew that I have to calculate sizes, I just put as long as it feels, fits and looks nice. Guess from now on I will start calculating.

[Freddie]

You don't HAVE to, but it's a nice thing to have. I just learned to do that a while ago, and it changed my life basically :P