Select Page

Category: fluid type

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

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways. Magic Number it with viewport units If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. I’d call this a magic number. In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that. See the Pen Fitted Text with Viewport Units by Chris Coyier (@chriscoyier) on CodePen. This is kind of a less exotic version of fluid typography, which involves more of a sprinkling of viewport units and min/max sizes. FitText Dave Rupert’s FitText is up for the job. You still need a bit of a magic number to get the sizing just right for any particular job: See the Pen Fitted Text with FitText by Chris Coyier (@chriscoyier) on CodePen. FitText without jQuery If you aren’t using jQuery, there are options. Listed from the repo: non-jQuery FitText from @adactio Angular.js FitText.js from @patrickmarabeas AMP-HTML FitText FitText UMD by @peacechen Example of the first: See the Pen Fitted Text with FitText (no jQuery) by Chris Coyier (@chriscoyier) on CodePen. textFit...

Read More
000webhost logo