Find file
Fetching contributors…
Cannot retrieve contributors at this time
233 lines (222 sloc) 9.26 KB
<!doctype html>
<meta charset="utf-8">
<title>Fitter Happier Text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
body {
font-family: 'Avenir Next', 'AvenirNext-SemiBold', 'Futura-Medium', Futura, 'Futura Std', 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
line-height: 1.5;
padding: 1em 1.5em;
margin: 0 auto;
color: rgba(255,255,255,.8);
background-color: #f40;
background-image: linear-gradient(#f40, #f37);
@media (min-width: 40em) {
body {
padding: 1em 3em;
h1 { font-size: 3rem; font-weight: 600 }
a {
color: rgba(0,0,0,.6);
transition: color .1s ease-out;
text-decoration: none;
background-image: linear-gradient(transparent 50%, rgba(0,0,0,.6) 50%);
background-size: 4px 4px;
background-position: 0 1.125em;
background-repeat: repeat-x;
a:hover {
color: white;
background-image: linear-gradient(transparent 50%, white 50%);
pre {
font-family: 'Source Code Pro', Consolas, Monaco, monospace;
text-transform: none;
letter-spacing: 0;
padding-top: .25em;
padding-bottom: .25em;
padding: .25em .75em;
overflow-x: scroll;
background-color: rgba(0,0,0,.2);
.right-align { text-align: right }
.py2 { padding-top: 2rem; padding-bottom: 2rem; }
.xs-show { display: none }
@media (max-width: 40em) { .xs-show { display: block } }
#carbonads {
display: inline-block;
font-size: 14px;
line-height: 1.25;
text-align: left;
max-width: 320px;
text-transform: none;
#carbonads a,
#carbonads a:hover {
text-decoration: none;
color: inherit;
background: none;
#carbonads span { display: block }
#carbonads > span::before,
#carbonads > span::after {
content: '';
display: table;
#carbonads > span::after {
clear: both;
.carbon-img {
float: left;
margin-right: .5em;
.carbon-img > img { display: block }
.carbon-text { overflow: hidden }
.carbon-poweredby {
float: left;
margin-top: .25em;
opacity: 0.5;
@media (min-width: 32em) {
.table { display: table; table-layout: fixed; width: 100%; }
.table-cell { display: table-cell; vertical-align: middle }
<header class="py2">
<div data-fitter-happier-text class="">Fitter Happier Text</div>
Performant, fully fluid headings
<br class="xs-show">
<a href="">View on Github</a>
<div class="table">
<div class="table-cell py2">
<iframe src="" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<a href="" class="twitter-share-button" data-via="jxnblk" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="table-cell right-align">
<script async type="text/javascript" src="//" id="_carbonads_js"></script>
<section class="py2">
<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>
<div data-fitter-happier-text class="">(Three days a week)</div>
<div data-fitter-happier-text class="">Getting on better with your associate employee contemporaries</div>
<div data-fitter-happier-text class="">At ease</div>
<div data-fitter-happier-text class="">Eating well</div>
<div data-fitter-happier-text class="">(No more microwave dinners and saturated fats)</div>
<div data-fitter-happier-text class="">A patient better driver</div>
<div data-fitter-happier-text class="">A safer car</div>
<div data-fitter-happier-text class="">(Baby smiling in back seat)</div>
<div data-fitter-happier-text class="">Sleeping well</div>
<div data-fitter-happier-text class="">(No bad dreams)</div>
<div data-fitter-happier-text class="">No paranoia</div>
<div data-fitter-happier-text class="">Careful to all animals</div>
<div data-fitter-happier-text class="">(Never washing spiders down the plughole)</div>
<div data-fitter-happier-text class="">Keep in contact with old friends</div>
<div data-fitter-happier-text class="">(Enjoy a drink now and then)</div>
<div data-fitter-happier-text class="">Will frequently check credit at (moral) bank (hole in the wall)</div>
<div data-fitter-happier-text class="">Favors for favors</div>
<div data-fitter-happier-text class="">Fond but not in love</div>
<div data-fitter-happier-text class="">Charity standing orders</div>
<div data-fitter-happier-text class="">On Sundays ring road supermarket</div>
<div data-fitter-happier-text class="">(No killing moths or putting boiling water on the ants)</div>
<div data-fitter-happier-text class="">Car wash</div>
<div data-fitter-happier-text class="">(Also on Sundays)</div>
<div data-fitter-happier-text class="">No longer afraid of the dark or midday shadows</div>
<div data-fitter-happier-text class="">Nothing so ridiculously teenage and desperate</div>
<div data-fitter-happier-text class="">Nothing so childish, at a better pace</div>
<div data-fitter-happier-text class="">Slower and more calculated</div>
<div data-fitter-happier-text class="">No chance of escape</div>
<div data-fitter-happier-text class="">Now self-employed</div>
<div data-fitter-happier-text class="">Concerned (but powerless)</div>
<div data-fitter-happier-text class="">An empowered and informed member of society</div>
<div data-fitter-happier-text class="">(Pragmatism not idealism)</div>
<div data-fitter-happier-text class="">Will not cry in public</div>
<div data-fitter-happier-text class="">Less chance of illness</div>
<div data-fitter-happier-text class="">Tires that grip in the wet</div>
<div data-fitter-happier-text class="">(Shot of baby strapped in back seat)</div>
<div data-fitter-happier-text class="">A good memory</div>
<div data-fitter-happier-text class="">Still cries at a good film</div>
<div data-fitter-happier-text class="">Still kisses with saliva</div>
<div data-fitter-happier-text class="">No longer empty and frantic like a cat tied to a stick</div>
<div data-fitter-happier-text class="">That's driven into frozen winter shit</div>
<div data-fitter-happier-text class="">(The ability to laugh at weakness)</div>
<div data-fitter-happier-text class="">Calm</div>
<div data-fitter-happier-text class="">Fitter</div>
<div data-fitter-happier-text class="">Healthier and more productive</div>
<div data-fitter-happier-text class="">A pig in a cage on antibiotics</div>
<section class="py2">
<a href="">Download source</a>
or install via NPM:
npm install fitter-happier-text
Link to fitter-happier-text and pass it a nodelist.
var nodes = document.querySelectorAll('[data-fitter-happier-text]');
Since this is based on the SVG text element, no JavaScript resize events are fired –
JavaScript is only used on initial load.
For a Gulpjs-based preprocessed example, see the README on Github.
<h1><a href="">View on Github</a></h1>
<footer class="py2">
Inspired by
<a href="">FitText</a>
<br class="xs-show">
<br class="xs-show">
Lyrics by
<a href="">Radiohead</a>
<br class="xs-show">
<br class="xs-show">
<a href="">Made by Jxnblk</a>
<script src="dist/fitter-happier-text.js"></script>
var nodes = document.querySelectorAll('[data-fitter-happier-text]');
fitterHappierText(nodes, { baseline: 16 });
<script type="text/javascript">
WebFontConfig = { google: { families: [ 'Source+Code+Pro::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);