CODEWITHSUNDEEP
cssmathcalcviewport-units
Jake Wilson
Jake Wilson

Reputation: 91233

Linear scaling between 2 font sizes using calc and vw

Is it possible to use some combination of calc() and vw units to scale linearly between 2 different font sizes?

Example: I'm giving a web page design with the following font sizes:

<h1> is font-size: 18px @ 360px

<h1> is font-size: 32px @ 1024px

If I wish the font-size to scale up along with the browser width using vw units, the math is pretty simple (SCSS syntax):

font-size: 18/360*100vw; = font-size: 5vw;

So based on a font size of 18px @ 360px, you would use 5vw. However, by the time the browser gets up to 1024px:

1024*0.05 = 51.2px which is how big the <h1> will be at 1024px which is far higher than the designed 32px. The opposite problem will occur if I set the font-size to use 32px as the base: font-size: 32/1024*100vw; = font-size: 3.125vw. Now the font will be too small @360px;

So the question again, is it possible to linearly scale a font-size between 2 font-sizes at 2 different breakpoints? Is it possible to use some sort of combination or vw units and calc to achieve this. I've tried to work out the equation for such a thing but I'm not sure if it is possible.

I've been thinking about trying to something like:

font-size: calc(18/360*100vw * 1.01vw); or something along those lines but apparently that type of syntax is not accessible for calc().

Note: I'm not looking for a simple media query solution where I simply increase the font size @1024px. I'm looking for a way to linearly scale it smoothly between all resolutions.

Upvotes: 4

Views: 2440

Answers (2)

vals
vals

Reputation: 64254

An aproximate solution (I have not taken into account the fractions) would be

font-size: calc(2vw + 12px);

You need to solve the system of equations for the 2 points, and find the equation of the result

The first equation is , for a viewport of 360, a font size of 18. thus,

a * 3.6 + b = 18

Where a is the part of the vw units and b the px part

the second equation is

a * 10.24 + b = 32

Let's go to webmath and enter

enter image description here

The result given is

enter image description here

So your exact answer would be

font-size: calc (2.11vw + 10.41px);

Upvotes: 6

EikiProg
EikiProg

Reputation: 83

Why don't you try scaling whith media query:

.text {
    font-size: 5vw;
}

@media screen and (min-width: 768px){
    .text {
        font-size: 3.125vw;
    }
}

@media screen and (min-width: 1024px){
    .text {
        font-size: 32px;
    }
}

http://caniuse.com/#feat=calc check the "Known issues" tab.

You can also try using js, check this link https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Upvotes: 0

Related Questions