Skip to main content

These polyfills will help you tinker with your web typography

Sometimes the web feels like a typewriter or, perhaps more fittingly, like Microsoft Word. It feels as if we don’t have the level of control we enjoyed in the days of layout for print using InDesign.

But browsers are catching up, and in places where they're still too far behind, people are building tools with JavaScript (called 'polyfills') to give us what we need. Here are a couple of fun polyfills for typography enthusiasts that are well worth checking out...

01. Lettering.js

If you are the type of person who itches to tinker with every letter in a headline, then Lettering.js is the perfect tool for you.

It's a JavaScript tool that takes a string of text and wraps each letter with a uniquely classed <span> element. Using CSS you can manipulate each span (and thereby each letter) in the headline to your heart's content. Imagine how content your heart will be!

This isn't the type of thing you want to do on an entire page of text. Remember, JavaScript is injecting spans around every single letter, so if you hand it Tolstoy, JavaScript will just take its toys and go home. However, what Lettering.js can be is a fantastic tool for art-directing a headline or two.

02. slabText

Taking this idea even further, slabText splits headlines into multiple rows that can fill space in a very clever manner.

You can specify important text or text that you want to be a bit larger than others to get a wood type poster effect that is pretty slick. For the right kind of design, this polyfill is just perfect.

Words: Brian Warren

This article originally appeared in net magazine issue 241

Liked this? Read these!

Know of a typographic trick for the web? Share it in the comments!