Line25

10 jQuery Plugins to Enhance Your Web Typography

Read the full post

Web typography has come a long way thanks to the various custom font solutions like @font-face and Google Fonts, but we’re still lacking the precise control that we have over type in our design and desktop publishing apps. Thankfully there’s a range of jQuery plugins that give us some super useful features and allow us to manipulate our web text like never before. This post rounds up 10 of the most popular web typography plugins that allow you to fine tune your type as well as create some cool effects.

Lettering.js

Lettering.js example

Lettering.js is one of the simplest but most popular web type plugins. By splitting up your text and wrapping each letter in a custom <span> element it allows precise control over your headings. Use it to carefully tweak your kerning, or add various CSS styles to each individual letter to create some cool effects.

Download the Lettering.js plugin

FitText.js

FitText.js example

Responsive website designs are great, they allow the content to scale according to the user’s viewport size. Naturally your web text will wrap as its container narrows, but sometimes that leaves your titles and headings looking a little ugly, especially if it creates orphans or widows. This is where the FitText.js plugin comes in, it allows your headings to scale just like a responsive image, without words dropping down onto a new line.

Download the FitText.js plugin

Bacon!

Bacon.js example

Cool name, cool plugin! Bacon allows you to wrap text around a bezier curve, giving you advanced desktop publishing abilities directly within your website designs. Manipulating text around an image is super easy in InDesign, but in HTML/CSS text simply flows in square blocks. You could achieve similar effects using some dirty HTML markup, but Bacon allows you to cleanly style up your text with a series of coordinates.

Download the Bacon plugin

TypeButter

TypeButter example

There’s plenty of jQuery plugins that allow you to tweak the kerning of your web type, but most require direct input to move each letter individually. If you’re looking for a quick and easy solution check out TypeButter. Simply spread it over your type and it will automatically override the browser’s default values with visually pleasing optical kerning. By default the plugin supports Arial, Georgia, Helvetica, Times and Verdana, but you can also roll your own if you need another font.

Download the TypeButter plugin

Kerning.js

Kerning.js example

Despite its name, Kerning.js allows you to do so much more than just set individual letter spacings. With features such as size adjustment, color and various transformations on a per-letter basis it allows you to create some really cool type effects. What’s more, this is all done via CSS without any additional spans or markup added to the HTML, which is nice!

Download the Kerning.js plugin

Baseline.js

Baseline.js example

Achieving a nice vertical rhythm in your web designs is easy, right? Just set your line-height and away you go! Unfortunately things soon start to fall apart when images get involved, but this is where the Baseline.js plugin steps in. With just one line of Javascript Baseline.js will scale your image dimensions to a multiple of your desired baseline figure, meaning your content will always stay perfectly aligned to your baseline grid.

Download the Baseline.js plugin

Arctext.js

ArcText.js example

Setting lettering in an arc layout isn’t a requirement we run into every day but if you’re designing a page with an eye catching header, or recreating a vintage logo effect the Arctext.js plugin might just come in handy. Arctext.js does exactly what the name implies, it allows you to set your text along an imaginary arc of a given radius.

Download the Arctext.js plugin

Hatchshow

Hatchshow.js example

We’ve all seen those cool typography posters where each line is scaled to the same width. Now you can easily achieve the same effect in your web designs with the Hatchshow plugin. Hatchshow will automatically add a <span> to each line of text and scale the font size so each line ends up the same width. This is another plugin that’s useful for creating classic or vintage designs.

Download the Hatchshow plugin

slabText.js

slabText.js example

At first I thought slabText.js was just another title scaling plugin, but it’s actually much more. slabText takes the basic ideas of FitText and Hatchshow reviewed above and mashes them together. This means you not only have a responsive headline, it also intelligently splits itself into new rows and scales the font sizes to create equal measures. So once the viewport reaches a certain size, your headline will be rearranged to remain legible, rather than scale to an unreadable size.

Download the slabText.js plugin

jqIsoText

jqIsoText.js example

jqIsoText is a jQuery plugin for creating pseudo-isometric text effects, but what the hell does that mean?! Basically it means you can give your text various size related effects such as bulges by scaling from one value to another. This is another plugin that would be a great fit for creating cool headlines, or to mimic vintage style lettering layouts.

Download the jqIsoText plugin

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

11 Comments

  1. GizMecano says:

    Hello,

    The URL for Beacon! (http://baconforme.com/) seems to be down…

  2. Liam says:

    cool effects ! very useful !
    thanks for share!

  3. Jay says:

    All very cool, thanks for rounding these up. Bacon appears to be down. Also, Hatchshow does not appear to be responsive at all. It would be cool if it would recalculate on window resize.

  4. Peju says:

    Excellent. Thank you for sharing.

  5. Eric says:

    I like the HatchShow. I think that would be perfect style to go with Cowboy themed website.

  6. Awesome list here Chris! I definitely need to check some of these out. It's one of those things I've been meaning to dabble into, but forgot about until now :-)

  7. Robin THebs says:

    I personally like Lettering.js but i have never used in my website considering that it might not be SEO friendly.
    But in cases to showcase portfolio its a good and easy to implement solution.
    And thanks for the other list Chris.

  8. With jQuery plugins, you can implement superb things on your website quite easily. jQuery plugins will allow you a better control on your website for web typography. Typography is an important element in a web design and achieving a high level of typographic style can make your web design look eve more stunning and attention grabbing.

Comments are now closed