Free Ligature Symbols

by dirkk0 • 14 years ago

46 22 14 years ago

A webfont containing ligature symbols.

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

mooism2• 14 years ago

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.

pgeorgi• 14 years ago

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.

1782• 14 years ago

Not to mention it seems plain wrong.

These are icons, not ligatures.

1782• 14 years ago

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!

darklajid• 14 years ago

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?

sakai• 14 years ago

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?

zachinglis2• 14 years ago

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.

josscrowcroft• 14 years ago

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!

charlieirish• 14 years ago

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)

bchhun• 14 years ago

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

indiecore• 14 years ago

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

jahewson3• 14 years ago

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

lukeholder• 14 years ago

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.

jahewson3• 14 years ago

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

callahad• 14 years ago

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.

jahewson3• 14 years ago

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.

DanBC• 14 years ago

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.

Free Ligature Symbols

Related Stories