Bigger fonts on smaller screens without @media queries or javascript?

Question

Is there an alternative for @media queries to accomplish font-size inversely proportional to the screen size? (e.g.: opposite effect of 2vw, where the font gets smaller on small screens);

My first try was divide a value by a viewport width increment, but font-size: calc(10vw / 2); works while font-size: calc(100 / 2vw); unfortunately doesn't works.

codepen of my first try

Answer 1

You can't divide a px value by a viewport-width increment, but you can achieve this inverse size behavior reducing a px value by a viewport-width increment.

Example:
font-size: calc(40px - 2vw);

Codepen DEMO

Alternatively, you could use the other 3 units related to the viewport's size: vh vmin and vmax.

Examples:
font-size: calc(40px - 2vh);
font-size: calc(200px - 20vmin);
font-size: calc(200px - 20vmax);

vw - Relative to 1% of the width of the viewport*;
vh - Relative to 1% of the height of the viewport*;
vmin - Relative to 1% of viewport's* smaller dimension;
vmax - Relative to 1% of viewport's* larger dimension;

*viewport = the browser window size.

Source: w3schools

Answer 2

By definition, a vw is 1/100th of the width of the viewport. That's it. 2vw = 2/100ths of the screen. There is no way to get it to be inversely proportional because math doesn't work that way. I am assuming you are doing this as a thought experiment, rather than trying to solve a problem in your code so I'm going to leave it at that.

You could calculate the size of the font to be inversely proportional via javascript. Here's a codepen

HTML:

<div >
    This is text
</div>

JS:

$(window).resize(function() {
    area = 50000;
    width = $(window).width();
    fontSize= (Math.ceil(area/width));
    $('div').css('font-size', fontSize);
    }).resize();