Download
User Rating: 0/5 ( 0 votes)
Fitter Happier Text is a javascript library for performant and fully fluid heading.
Fitter Happier Text replaces each node with an SVG text node and sets the viewBox attribute based on its width and height.
Source: jxnblk.github.io
1. INCLUDE JS FILE
<script src="dist/fitter-happier-text.js"></script>
2. HTML
<div data-fitter-happier-text class="">Fitter, happier, more productive</div>
<div data-fitter-happier-text class="">Comfortable</div>
<div data-fitter-happier-text class="">Not drinking too much</div>
<div data-fitter-happier-text class="">Regular exercise at the gym</div>
3. JAVASCRIPT
var nodes = document.querySelectorAll('[data-fitter-happier-text]');
fitterHappierText(nodes);
To adjust for different fonts, use the baseline and paddingY options.
fitterHappierText(nodes, { baseline: 14, paddingY: 2 });
JS Tutorial
