There seems to be a lot of confusion around the use of the term "ligature" here. I, too, was a bit confused (especially since Kazuyuki lists corresponding HTML entities with each symbol). It turns out, his use is reasonable, and a bit clever:
1. What is a ligature? A ligature is a joining of two or more characters into a single character. A common one is "fi", which is often rendered with the dot of the i incorporated into the top of the f.
2. Why are they useful? Lots of folks find the aesthetically pleasing, but they have special import with movable type printing, in which characters are rendered in little rectangular slugs of lead. Since the lead slugs can't overlap, it's difficult to get just the right spacing between, say, an "f" and an "i" in a variable-width typeface. Thus, most fonts included specially cast ligatures, which were single slugs of lead containing multiple characters, like the "fi" mentioned above.
3. How do they work on computers? Lots of systems, including TeX, can look for sequences of letters like "fi" and replace them with a single ligature when rendered. Fonts can also embed this replacement table, which can be introspected and used by software when rendering text.
4. But how does this font use ligatures? So, it turns out that you don't have to limit yourself to things like "fi" and "ffl" -- you could embed a replacement table that matches any arbitrary sequence and replaces it with an arbitrary symbol. Lots of typefaces have "exotic" ligatures for things like "st" and "ct", and this typeface is no different. It defines a table of "ligatures" mapping sequences of letters like "file" into new symbols like that of a file icon.
So it uses existing ligature support (replacing sequences with symbols) in an unconventional but not unreasonable way.
5. Bonus: How does it do this without making a mess of Unicode? After all, there's no U+???? FILE SYMBOL code point! It turns out that Unicode actually demarcates a couple of codepoint ranges for "private use", explicitly saying that a font can put things in there that don't fit anywhere else. Kind of like private IP address ranges like 10.0.0.0/8 or 192.168.0.0/16. All of the replacement symbols are stored within the Unicode Basic Multilingual Plane's Private Use Area (U+E000 through U+F8FF), so they won't conflict with other, meaningful code points.
Using the private use area in this font is absolutely the wrong thing to do. There's no need to use any Unicode points for the symbols, a font can have "ligatures" (actually these are "glyph substitutions", via the GSUB table) which map to (non-encoded) glyph indexes, rather than mapping to (encoded) Unicode points. So defining a Unicode point for a ligature symbol is completely unnecessary, as there is an additional level of indirection which you don't explain in point 5.
I don't really understand why he used ligatures (or why he called these web font icons 'Ligature Symbols'). Surely if you are going to be substituting letters for icons, you may as well use easily accessible, memorable and slightly semantic keyboard characters (eg: B and I for bold and italic, S for save, X for cut).
People complaining that there's nothing 'ligature' about the font seem to be too harsh / don't like this particular take on the subject.
"In writing and typography, a ligature occurs where two or more graphemes are joined as a single glyph." (Wikipedia)
I consider the (ab)use of ligatures a clever term for the font, considering that it _does_ something related (replacing the text 'file' with a file icon/symbol).
I also actually prefer the idea of having actual, meaningful words (which I consider accessible and memorable, much more than any abbreviation) in the source.
No idea if this is useful in the wild, but the hack is clever and interesting. Why shoot it down?
The font also matches the strings: type "file" in this font, and you get the "file" icon (etc). Try to copy & paste some of the icons on the page, or look at the source.
Clever, but I don't know if I consider that a good idea.
It's an excellent idea, because if the font fails to load you get an actual human-readable fallback, instead of "whatever some random other font put in the PUA". For example, whenever I visit GitHub I find the interface decorated with random Korean glyphs and 7-segment-LCD symbols, which is somewhat distracting and confusing. With a ligature system like this, I'd see things like "file" and "folder" which at least make sense.
What are the benefits of having to supply a custom font instead of a custom icon?
edit: looking at it more closely, you'd have to specify the font just for the icon you want to use - if you used it for text, the ligatures would screw you up in short order. Try typing the word 'tileset' or 'padlock' in the box, for example. So if you're going to specify a font only for icons... why not just use the icon image alt text for screenreaders? (as suggested below)
A cute idea, but not sure of the pragmatic applications.
Except they only-sort-of match the text. Like using 'in' instead of login.
It all depends on usage. If you're using it next to text, then getting "Login Login" is annoying. If you're using icons only (which has debatable standards), then yes.
It's not the only symbol font that does this, and I like it - it provides a decent fallback if the font fails to load or isn't supported in your browser, and the symbols will be readable to screen readers.
I think you missed the part where there's a class="lsf" on the containing element, maybe a span - I don't think the typeface would be applied to an entire body of text!
No they are not in the actual definition - but they use the font rendering technology that enables ligatures; a new vector that replaces certain char combinations.
1. What is a ligature? A ligature is a joining of two or more characters into a single character. A common one is "fi", which is often rendered with the dot of the i incorporated into the top of the f.
2. Why are they useful? Lots of folks find the aesthetically pleasing, but they have special import with movable type printing, in which characters are rendered in little rectangular slugs of lead. Since the lead slugs can't overlap, it's difficult to get just the right spacing between, say, an "f" and an "i" in a variable-width typeface. Thus, most fonts included specially cast ligatures, which were single slugs of lead containing multiple characters, like the "fi" mentioned above.
3. How do they work on computers? Lots of systems, including TeX, can look for sequences of letters like "fi" and replace them with a single ligature when rendered. Fonts can also embed this replacement table, which can be introspected and used by software when rendering text.
4. But how does this font use ligatures? So, it turns out that you don't have to limit yourself to things like "fi" and "ffl" -- you could embed a replacement table that matches any arbitrary sequence and replaces it with an arbitrary symbol. Lots of typefaces have "exotic" ligatures for things like "st" and "ct", and this typeface is no different. It defines a table of "ligatures" mapping sequences of letters like "file" into new symbols like that of a file icon.
So it uses existing ligature support (replacing sequences with symbols) in an unconventional but not unreasonable way.
5. Bonus: How does it do this without making a mess of Unicode? After all, there's no U+???? FILE SYMBOL code point! It turns out that Unicode actually demarcates a couple of codepoint ranges for "private use", explicitly saying that a font can put things in there that don't fit anywhere else. Kind of like private IP address ranges like 10.0.0.0/8 or 192.168.0.0/16. All of the replacement symbols are stored within the Unicode Basic Multilingual Plane's Private Use Area (U+E000 through U+F8FF), so they won't conflict with other, meaningful code points.