Kerning
Pixel perfect.
#pixel-perfect {
-letter-kern: 1px 1px 0 0 0
1px 0 2px 0 0
0 0 0;
}
CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web
type with real CSS rules, automatically.
Print designers have had it easy for way too long. This is 2014; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that, use Kerning.js!
Using Kerning.js is as easy as including a single script in your page. Just…
<script src="kerning.js"></script>
Done.
#pixel-perfect {
-letter-kern: 1px 1px 0 0 0
1px 0 2px 0 0
0 0 0;
}
#hello-goodbye {
-letter-size: _ _ _ _ _ 0.5em;
}
#pantone-please {
-word-color: #f5474b #000000;
}
#little-lean {
-letter-transform: skew(-5deg) none
none none
none none
skew(-5deg);
}
#helvetica-fallback {
font-family: 'FakeFont',
Helvetica Neue,
sans-serif;
-word-color: if-font(
'Helvetica Neue': #000 #f5474b
);
}
#mississippi {
-letter-color: -letter-pairs(
'ss': #777,
'pp': #f5474b
);
}
#double-bubble {
-letter-transform: -letter-repeats(
2n+1: translate3d(0,-5px,0),
even: translate3d(0,5px,0)
);
}
#red-on-webkit {
-webkit-word-color: #f5474b;
}
font-size conditional
#oh-goodness {
/* fallback if JS fails to load */
font-size: 2.4rem;
font-size: if-font(
'Helvetica Neue': 1.5rem
);
}
font-weight conditional
#thick-and-thin {
/* fallback if JS fails to load */
font-weight: 700;
font-weight: if-font(
'Helvetica Neue': 400
);
}
Want to apply Kerning.js styles whenever a new element is added to your page?
<script>$(function() { Kerning.live(); });</script>
That’s it! Custom styles will automatically be applied when you insert a new element.
FOUCs (flashes of unstyled content) are gross and annoying, like a hair in your soup.
To prevent them, just add visibility: hidden to any selectors that are using Kerning.js rules. The script will automatically set visibility: inherit when it’s done styling your content.
An attempt to improve the web for designers by Joshua Gross.
You should follow Josh on Twitter.
The Kerning.js logo and headers are set in Garamond Premier Pro Caption.
Thanks to the folks at Paravel for inspiration and Lettering.js.