Web typography is blossoming right now thanks to new font solutions like @font-face and Google Fonts, but we still often feel limited by how much control we have over the typography in designs and publishing apps. There are some jQuery plugins out there however that are beginning to catch up to the other new font solutions gaining popularity.
Chris Spooner compiled some of the best jQuery plugins for web typography that help offer the precise control designers desire, and any designer concerned about their text can benefit from them.
The Lettering.js plugin is a super simple plugin, and that simplicity has also assisted it in gaining huge popularity. The plugin splits up text and wraps each letter in a custom <span> element giving you exact control over kerning, or even customizing CSS styles for individual letters.
Other plugins like FitText.js help solve issues that responsive design has created for typography. Responsive design changes the containers for text, which makes the text reformat to match the size, but that often makes headings and titles looking worse for wear. The FitText.js plugin allows you to scale your headings and titles just like responsive images, keeping everything on the same line.
My favorite plug Spooner has found is great for its name as well as its function. Bacon is a plug in the allows you to shape your text around a bezier curve directly within the design. InDesign has allowed designers to easily shape text around images, but HTML and CSS has traditionally made text flow in square blocks. Now, rather than using tedious and dirty HTML markups, Bacon makes it easy to easily, and cleanly, design your text around shapes with just a series of coordinates.
If you are a stickler about typography like I am, all of the plugins offered in Spooner’s article will seem like life-savers, as well as huge time-savers. Designers have struggled to take control over fonts and text since the invention of the internet, but only recently has web typography become fun rather than tiresome.