Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Benjamin Hedgepeth
5,672 PointsFluid Typography & Character Measure
I've been reading this article on creating fluid typography using vw units: https://www.smashingmagazine.com/2016/05/fluid-typography/
To make the font size fluid in a particular viewport range, the following formula was used:
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
Now I want to keep the measure of text content at a particular number of characters. Take 70 characters for example. Further down in the article the following is stated:
In a responsive approach, in which we adjust the font size at set breakpoints, we will often also arbitrarily adjust the width of a container to maintain the right line length. However, with fluid typography, adjustment at specific breakpoints becomes unnecessary. Just set the size of the container to scale at the same rate as the font. We can use the calc() technique described above on the width property just as easily as we do on font-size.
My question is this: How would I formulate the width of the container that the text is in so that it retains it's line measure (using the calc() function)? Would I just apply the width property, set it to a fluid width, and use the same input values that were applied within the calc function to make the font smoothly transition?