Take control of your web typography.

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!

Getting started

Using Kerning.js is as easy as including a single script in your page. Just…

<script src="kerning.js"></script>




Pixel perfect.
#pixel-perfect {
    -letter-kern: 1px 1px 0 0 0
                  1px 0 2px 0 0
                  0 0 0;

Size adjustment

Hello & goodbye.
#hello-goodbye {
    -letter-size: _ _ _ _ _ 0.5em;


Pantone please.
#pantone-please {
    -word-color: #f5474b #000000;


Little lean.
#little-lean {
    -letter-transform: skew(-5deg) none
                       none none
                       none none

More specific

Font conditionals

Fallback? Yes.
#helvetica-fallback {
    font-family: 'FakeFont',
                 Helvetica Neue,
    -word-color: if-font(
        'Helvetica Neue': #000 #f5474b


#mississippi {
    -letter-color: -letter-pairs(
        'ss': #777,
        'pp': #f5474b


Double bubble.
#double-bubble {
    -letter-transform: -letter-repeats(
        2n+1: translate3d(0,-5px,0),
        even: translate3d(0,5px,0)

Vendor prefixes

Red on WebKit.
#red-on-webkit {
    -webkit-word-color: #f5474b;

New in0.2

Augmented properties

font-size conditional

Oh, goodness.
#oh-goodness {
    /* fallback if JS fails to load */
    font-size: 2.4rem;

    font-size: if-font(
        'Helvetica Neue': 1.5rem

font-weight conditional

Thick & thin.
#thick-and-thin {
    /* fallback if JS fails to load */
    font-weight: 700;

    font-weight: if-font(
        'Helvetica Neue': 400

New in0.2

Dynamic updating

Want to apply Kerning.js styles whenever a new element is added to your page?

<script>$(function() {; });</script>

That’s it! Custom styles will automatically be applied when you insert a new element.

Preventing FOUC

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.

Turn demo off Fork me on GitHub