Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

Answer 1

Use this equation:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

For anything larger or smaller than 1440 and 768, you can either give it a static value, or apply the same approach.

The drawback with vw solution is that you cannot set a scale ratio, say a 5vw at screen resolution 1440 may end up being 60px font-size, your idea font size, but when you shrink the window width down to 768, it may ended up being 12px, not the minimal you want.

With this approach, you can set your upper boundary and lower boundary, and the font will scale itself in between.