

Free Ligature Symbols - dirkk0
http://kudakurage.com/ligature_symbols/
A webfont containing ligature symbols.
======
callahad
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.

~~~
jahewson
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.

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

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

~~~
178
Not to mention it seems plain __wrong __.

These are icons, not ligatures.

~~~
178
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!

------
zachinglis
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
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!

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

~~~
lukeholder
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.

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

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

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

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

