Free Ligature Symbols | Hacker News Reader

Free Ligature Symbols

kudakurage.com

46 pointsdirkk022 comments

A webfont containing ligature symbols.

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.

Icon(ic) Fonts have come along way recently. These resources may be of use to some.

http://icomoon.io/app/

http://fontello.com/

http://symbolset.com/

http://somerandomdude.com/work/iconic/

Benefits include:

- Consistent Interface Fonts across all modern browsers

- Variety (not the same old bootstrapped site)

- Loading Time (sometimes faster than using images for headlines)

- SEO Friendly (it's just text)

- Better rendering for high resolution devices like retina displays

Disadvantages:

- Loading Time (additional download resource for clients)

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).

They are all codepoints from the private use area (U+E000-U+F8FF), so they don't conflict with any standardised characters.

I'd speculate that someone's released a font of ligatures that uses the PUA, so this person thinks that's what the PUA is called.

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.

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.

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.

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.

Not to mention it seems plain wrong.

These are icons, not ligatures.

After careful consideration and reading the page again, I retract everything I said and claim the opposite.

The use of ligatures for icons is ingenious!

I quite like the idea.

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?

I rather like this too, as they degrade gracefully. It's quite elegant.

Does anybody know what support exists (or is required) for ligatures across common browsers?

Awaesome. I use Symbolset which is similar.

One issue: in = Login icon invert = Invert icon vertical = Phone orientation

invertical = [invert icon]ical

Obviously this is an edge case issue to happen, but this is an example of a way this can seriously screw up.

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!

Nice. But they're not ligatures. Also 'refreshbutton' is backwards.

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.

Yep. It's called a "glyph substitution".

I'd be interested in the results if you show these symbols (without the names) to 1,000 people and asked them to name them.

Strange. it doesn't work under IE8 & 9. I checked the font-face and it seems ok at first glance.

I wish sets like this came with an ordered and unordered list icon.

Reply on news.ycombinator.com