Fun Tip: Use calc() to Change the Height of a Hero Component

The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this in FitText (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution.

p {
font-size: calc(16px + (24 - 16)*(100vw - 400px)/(800 - …

The post Fun Tip: Use calc() to Change the Height of a Hero Component appeared first on CSS-Tricks.