Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davatron5000/Lettering.js
A lightweight, easy to use Javascript <span> injector for radical Web Typography
https://github.com/davatron5000/Lettering.js
Last synced: about 2 months ago
JSON representation
A lightweight, easy to use Javascript <span> injector for radical Web Typography
- Host: GitHub
- URL: https://github.com/davatron5000/Lettering.js
- Owner: davatron5000
- Created: 2010-09-12T01:24:29.000Z (about 14 years ago)
- Default Branch: master
- Last Pushed: 2020-07-27T15:59:40.000Z (about 4 years ago)
- Last Synced: 2024-07-18T16:11:52.506Z (2 months ago)
- Language: JavaScript
- Homepage: http://letteringjs.com
- Size: 21.5 KB
- Stars: 5,385
- Watchers: 184
- Forks: 757
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-javascript - Lettering.js - A lightweight, easy to use Javascript <span> injector for radical Web Typography - ★ 5110 (Typography)
README
## Lettering.js, a jQuery plugin for radical Web Typography
[](https://cdnjs.com/libraries/lettering.js)
We developed a lightweight, easy to use Javascript `span` injector for radical Web Typography, we're calling it "lettering-jay-ess", and we're releasing it today for free over on Github. Let me demo it for you: ``
### Individual Letter Control with Lettering.js
We'll start with some really basic markup:
```html
Some Title
```
After including `jQuery 1.6.2+`, [download and include the minified version of Lettering.js](http://github.com/davatron5000/Lettering.js/downloads), then a script block with the magical `.lettering()` method:
```html
$(document).ready(function() {
$(".fancy_title").lettering();
});
```
The resulting code will churn your `.fancy_title` and output the following:
```html
S
o
m
e
T
i
t
l
e
```
Magical. Now the text is easy to manipulate in your CSS using an ordinal `.char#` pattern. This plugin assumes basic counting skills, but it's a pretty fast and easy way to get control over every letter.
### Letters, words, lines, and more!
There you have it, but Lettering.js does even more! Lettering.js has the ability to split `words` and `lines` as well. If you want more information on how you can get radical with text, read the Lettering.js Wiki:
[https://github.com/davatron5000/Lettering.js/wiki](https://github.com/davatron5000/Lettering.js/wiki)
#### Best Practices
We've found this to be a pretty quick and elegant solution to create typographical CSS3 posters. It's also a great solution for really custom type headings, while keeping the text selectable. Be smart and use sparingly. You'll probably break your browser if you try to wrap every letter on your page in a `span` tag, so don't do that. Look to use this in your Headings, Blockquotes, Asides, etc.
#### Kern Well
If you're going through the trouble to load a fancy font and that word or phrase is the largest on the site, then it's important for it to be kerned well. With Lettering.js, kerning is a breeze. You can simply use `$("#id-of-what-i-want-to-kern").lettering();` and then on each `.char#`, you can set relative position or left/right margin. Works like a charm.
### Accessibility
Lettering.js is now accessible by default. It uses an `aria-label` on the parent element and `aria-hidden` on each of the children to prevent screenreaders from pausing while reading each individual characters or words.
### Non-Javascript Fallback
As with any kind of Javascript, have a fall back plan in case the user doesn't have javascript enabled. The bottom line is up to you, my bottom line would be "legible and on the screen". Also, use `lettering.min.js` [Download the Minified Version of Lettering.js here](http://github.com/davatron5000/Lettering.js/downloads)
#### Performance Anti-Pattern
Web performance patterns advise that you put Javascripts at the bottom of your page before your `