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();

Answer 3

I think that the best that you can do is to use a font size that is not relative to a viewport. For example, 1em will be relatively large on a mobile device and will relatively small on a desktop client. If you use a fluid layout, em is perfect. If you use a static layout, your best option would probably be px. But using px is a bit iffy because a mobile device could potentially have just as many pixels as a desktop client.

The reason that calc(10vw / 2) works but calc(100 / 2vw) doesn't is because the former evaluates to 5vw and the latter evaluates to 50/vw which isn't an expression of distance. More precisely, the engine can only divide by scalar

In summation, to do what you want to do, you'll need to have a fluid layout and use em as your unit for font sizes. But you won't be able to get a direct ratio of the size of the viewport without JavaScript, which you should of course generally not rely on for layout purposes.

Answer 4

Here is a script solution (even if you wanted, and found, a CSS only), though this one impact the performance very little and only need to run once per resize and for one element only, the body.

It has one benefit over CSS, you can have a min/max size, and works as a progressive enhancement for users that have script enabled so in a way risk free.

var fontMax = 40, fontMin = 14;

function sizeBodyFont() {
  var fontSize = ((screen.width / window.innerWidth) * 10);
  document.body.style.fontSize = Math.min(Math.max(fontSize,fontMin),fontMax) + 'px';
}

sizeBodyFont();

(function(el) {
  window.addEventListener('resize', sizeBodyFont);  
}(document.querySelector('#test')))

body {
  font-size: 20px;
}
span {
  font-size: 100%;
}
div {
  font-size: 150%;
}

<span>Hey there</span>
<div>Hey there</div>

Answer 5

You can use relative font-styling. like -

html, body {
font-size: 16px;
}

h1 {
font-size: 2.5em;
}

p {
font-size: 1em;
}