Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Tricks


20 bookmarks. First posted by rtvenge 9 days ago.


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.
fridayfrontend  css  cssbasics  calc  layout 
4 days ago by spaceninja
I'm a big fan of using the lock method for most typography. It provides you the ability to gracefully scale your type with the viewport, but not to go too small or too big. This article continues that exploration into hero modules
newslettered  334  tutorial 
7 days ago by justinavery
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.
Article  calc  fluid  type 
9 days ago by inxilpro
flexible text size
css  responsive 
9 days ago by dalton
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
9 days ago by simps