How to make My Font Sizes Responsive without :root

Issue

I have this simple Blog template

@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { overflow-x: hidden; font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }

:root {
    --bodyBG: #fff; --bodyColor: #131313;
    --articleBG: #ececec; --articleColor: #303030;
    --selectionBG: #007fc9; --selectionColor: #fff;
    --bQuoteBorder: #333; --bQuoteBG: #d8d8d8;
    --codeBoxBG: #1e1e1e; --codeBoxColor: #fff;
    --codeHeaderBG: #121212; --codeColor: #fff;
    --hrColor: #333;
}

article {
    min-height: 100%;
    max-width: 35em;
    margin: 0 auto;
    padding: 1rem;
    background: var(--articleBG);
    color: var(--articleColor);
    line-height: 1.5;
}

@media (min-width: 50em) { :root { font-size: 22px; } }
p { font-size: 1.1rem;  font-size: calc(100% + .15vw); margin-bottom: .7rem; }
a { color: var(--bodyColor); } a:hover { color: #00aeff; }
h1 { font-size: 2rem;   font-size: calc(100% + 1.2vw); margin-bottom: .2rem; }
h2 { font-size: 1.6rem; font-size: calc(100% + 1vw);   margin-bottom: .2rem; }
h3 { font-size: 1.4rem; font-size: calc(100% + .8vw);  margin-bottom: .2rem; }
h4 { font-size: 1.2rem; font-size: calc(100% + .67vw); margin-bottom: .2rem; }
h5 { font-size: 1rem;   font-size: calc(100% + .5vw);  margin-bottom: .2rem; }
h6 { font-size: .9rem;  font-size: calc(100% + .25vw); margin-bottom: .2rem; }

time, .views { margin-bottom: 0.1rem; font-size: 0.8rem; text-transform: uppercase; }
blockquote { margin: .8rem auto; border-left: 3px solid var(--bQuoteBorder); padding: 10px; background: var(--bQuoteBG); color: var(--bodyColor) }
mark { background-color: #14b5ff; padding: 3px 3px; }
hr { border: 0; margin: 1rem 0; height: 1.5px; background: var(--hrColor); }
p.dropCaps:first-letter {
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(110% + 2.85vw);
    line-height: calc(110% + .2vw);;
}

.txtCenter { text-align: center; }
.txtLeft { text-align: left; }
.txtRight { text-align: right; }

.space { display: block; }
.space.sp5 { padding-top: 5px; }
.space.sp10 { padding-top: 10px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<article>
    <h2 class="txtCenter space sp10">Ivan Zakharov</h2>
    <hr/>

    <h1>Lorem ipsum</h1>
    <time><i class="fas fa-calendar-week"></i> JANUARY 1ST 2019 (3 YEARS AGO)</time><br>

    <p class="dropCaps">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae vehicula leo. Nullam maximus, nulla sed venenatis vulputate, metus ligula vestibulum leo, et volutpat felis velit eu libero. Ut ultricies elit at velit vehicula fermentum. Etiam pellentesque, justo sit amet tempus pellentesque, nulla velit interdum nunc, vitae blandit mauris nunc ac dui. Phasellus a dolor libero. Vestibulum maximus.</p>
    <hr>

    <h1>Lorem ipsum 1</h1>
    <h2>Lorem ipsum 2</h2>
    <h3>Lorem ipsum 3</h3>
    <h4>Lorem ipsum 4</h4>
    <h5>Lorem ipsum 5</h5>
    <h6>Lorem ipsum 6</h6>

    <p>My First letter is Capital!</p>
    <p>This is <b>Bold text</b></p>
    <p>This is <strong>Important text</strong></p>
    <p>This is <i>Italic text</i></p>
    <p>This is <mark>Marked text</mark></p>
    <p>This is <sub>Subscript</sub></p>
    <p>This is <sup>Superscript</sup></p>
    <p>This is <sup>Superscript</sup></p>
    <p>This is <q>natural quote</q></p>
    <p>This is <abbr data-tippy-content="Abbreviation is a short form of a word or phrase" tabindex="0">Abbreviation</abbr>. Try to Hover over it!</p>
    <p><blockquote>This is a Simple BlockQuote</blockquote></p>

</article>

In my styles file, i have this line @media (min-width: 50em) { :root { font-size: 22px; } } and when i remove it font becomes very small, even i thought i have this Code in my styles which makes my font size responsive

p { font-size: 1.1rem;  font-size: calc(100% + .15vw); margin-bottom: .7rem; }
a { color: var(--bodyColor); } a:hover { color: #00aeff; }
h1 { font-size: 2rem;   font-size: calc(100% + 1.2vw); margin-bottom: .2rem; }
h2 { font-size: 1.6rem; font-size: calc(100% + 1vw);   margin-bottom: .2rem; }
h3 { font-size: 1.4rem; font-size: calc(100% + .8vw);  margin-bottom: .2rem; }
h4 { font-size: 1.2rem; font-size: calc(100% + .67vw); margin-bottom: .2rem; }
h5 { font-size: 1rem;   font-size: calc(100% + .5vw);  margin-bottom: .2rem; }
h6 { font-size: .9rem;  font-size: calc(100% + .25vw); margin-bottom: .2rem; }

When I use this line @media (min-width: 50em) { :root { font-size: 22px; } } I get this output

Image1

And this is what i get when i remove it

Image2

So what does that @media (min-width: 50em) { :root { font-size: 22px; } } code exactly does and How can i get the same output without using @media (min-width: 50em) { :root { font-size: 22px; } } ??

Solution

All of your font sizes are in rem. By definition, rem is based on the root font-size.

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

Removing that :root font-size property changes...well the root font size. I believe the default is 16px, but someone can correct me if I'm wrong on that. So that's why it looks about 25% smaller.

To get the same effect without using :root, you'll have to use a different unit--perhaps percentages. A percentage font-size will reference the nearest parent element with a fixed font-size. You could define your fixed 22px font-size on the body element and then have everything below use a percentage. So 1.1rem would be 110%.

Here's a basic example.

div
{
  font-size: 20px;
}

h1
{
  font-size: 400%;
}

<div>
  <h1>Hi</h1>
</div>

Answered By - Liftoff