Search code examples
cssfontscalc

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

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

Solution

  • 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