Auto-fit text

Go back to prev

I used this on Digibilly’s website. It adjust the font weight according to the width of its parent container. You can adjust where the line-break can be based on character count. It looked really looks nice on a side-nav or on the headings of a blog posts page. One con would be it really doesn’t look all that great on a full-width page, it’s better in a restricted width area.

See the Pen Auto-fit Text by Josh Pears (@pearsstudio) on CodePen.

Get a Free 45 Minute consultation!

Size Charts

Half Chest Width cm. in.
S 45.72 18
M 73.66 20
L 76.20 22
XL 78.74 24
2XL 81.28 32
3XL 83.82 33