Select Page

Category: calc

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 - 400)); } See the Pen Fluid Typography by Martino Stenta (@martinostenta) on CodePen. The important numbers here are 24px...

Read More