Lettering.js
A lightweight jQuery plugin that injects span tags into text for granular CSS control over letters, words, and lines.
What is Lettering.js?
Lettering.js is a jQuery plugin that injects span tags into HTML text elements, allowing developers to apply CSS styling to individual letters, words, or lines. It solves the problem of limited typographic control in web design by enabling granular manipulation of text for creative effects like custom kerning, animations, and CSS3 posters.
Frontend developers and designers working on projects that require advanced typographic styling, such as custom headings, artistic text layouts, or print-quality web typography.
Developers choose Lettering.js for its simplicity and precision—it provides direct DOM manipulation without heavy dependencies, integrates seamlessly with jQuery, and maintains accessibility while enabling creative freedom.
Overview
A lightweight, easy to use Javascript <span> injector for radical Web Typography
Use Cases
Best For
- Creating CSS3 typographic posters with animated letters
- Applying custom kerning to headlines in web designs
- Building artistic text effects for landing pages or hero sections
- Enhancing blockquotes or asides with individual word styling
- Developing accessible typographic experiments without breaking screen readers
- Animating text character-by-character for interactive experiences
Not Ideal For
- Projects built with modern JavaScript frameworks like React or Vue that prefer component-based styling
- High-performance websites where minimizing DOM nodes and script execution time is critical
- Static or server-rendered sites aiming for zero JavaScript dependency for core content
- Teams seeking pre-built, animated typography components without custom CSS work
Pros & Cons
Pros
Splits text into characters, words, or lines with sequential classes (e.g., .char1, .char2), enabling precise CSS styling for kerning, animations, and custom effects as demonstrated in the README.
Uses aria-label on parent elements and aria-hidden on child spans by default, ensuring screen readers interpret text naturally without pausing on each character.
Minimal JavaScript focused solely on DOM manipulation, easy to integrate with jQuery and set up with a few lines of code, as shown in the basic usage example.
README explicitly recommends sparing application to headings, blockquotes, and asides to prevent browser performance issues, promoting best practices.
Cons
Requires jQuery 1.6.2+, making it unsuitable for projects not using jQuery or those transitioning to modern frameworks, limiting its relevance in contemporary web development.
To avoid flash of unstyled text (FOUT), the README advises placing scripts in the head, which contradicts web performance best practices and can slow initial page load.
Only injects span tags; developers must write all CSS for animations and effects, increasing development time compared to libraries with pre-styled components.
As a jQuery plugin, it doesn't integrate seamlessly with contemporary component-based frameworks, requiring additional work for use in React, Vue, or Angular projects.
Frequently Asked Questions
Related Projects
FitText.jsA jQuery plugin for inflating web type
fontminMinify font seamlessly
FontsourceSelf-host Open Source fonts in neatly bundled NPM packages.
opentype.jsRead and write OpenType fonts using JavaScript.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.