Most websites nowadays are built responsively and employ breakpoints, when the browser width changes the content areas will either shrink, expand or stack.
This is fine for images either they can scale maintaining their aspect ratio or expand to cover the content area either cropping the top and bottom or the left and right sides to fit.
With text this is a little trickier, normally text will stay the same size between breakpoints and must be made small enough for the narrowest width otherwise the text will wrap or wrap where it is not supposed to wrap.
What would be great, would be for the text to change size more proportionately to the browser width. Fortunately we have the unit 'vw' (view port width) which defines a unit length of 1/100th of the view port size. We can use this to calculate the font size we need at different browser widths.
This calculation is easy for fonts that scale in direct relation to the browser width. For example where the font-size is 0px at width 0px and font-size 24px at width 1920px.
The solution is 24px / 1920px x 100 = 1.25vw so we would use font-size: 1.25vw. This calculation is a linear solution through the origin where font-size is 0px at browser width of 0px. Obviously this is of no use as the text would shrink to an illegible size, at 320px (mobile) width it would only be 4px tall.
We could modify this slightly to get a better solution by adding extra font-size to the calculation using the relatively new but acceptable 'calc' function so that 4px tall could be supplemented by say 10px.
So we would use font size: calc(1.25vw + 10px), but hold on - at 1920px the font size will now be 24px + 10px = 34px which is far too big. This has been a problem for web developers for some time. How do you reconcile these two font-sizes across two different browser widths?
Well there is a solution, but you’re not going to like it, you will have to pull out those old school books because we are heading into the realm of simultaneous equations.
Is anyone still there, hello...
Okay maybe fewer readers than a minute ago, but for those that are dedicated and holding off for an answer, you could continue reading and find the gist of what's going on or just jump to the bottom and implement my findings.
Yes, simultaneous equations. We are looking at two equations because we have to come up with a formula that has a value for a multiple of vw and a value for the offset we can call c that agrees with two values at two widths.
So if we take our current problem of finding a formula for font-size:calc() that is 24px at 1920px and 14px at, let's get brave, 320px as its more in common with what we would be looking for we would express the solution as follows:
For:
font-size: calc(a.vw+c)
Solve:
a*(1920/100)+c = 24
a*(320/100)+c = 14
Here we place the width in the formula divided by 100 and show the font size as the solution of the two equations. Now to solve a and b, we can use the website http://www.webmath.com/solver2.html by punching in the equations and getting the values of a & b. Hit solve and it will show you all the work it did to find your solution.
So the values are a = 0.625 and c = 12
So from our equations we now have a nice function we can use that will automatically resize the font based on the browser width.
font-size: calc(0.625wv+12);
We can also limit the scaling to only work between break points, if this is required.
p {
font-size: 24px;
}
@media(max-width: 1920px){
p {font-size: calc(0.625wv+12);}
}
@media(max-width: 320px){
p {font-size: 10px}
}
And there we go, fully responsive fonts between two breakpoints. that your designers have asked you to design exact to the font size both at mobile size and at desktop size.