4 ms·

Free Ligature Symbols

46 points by dirkk0 14y ago

A webfont containing ligature symbols.

indiecore 14y ago
I wish sets like this came with an ordered and unordered list icon.
Foomandoonian 14y ago
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 14y 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 14y 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.
    - thristian 14y ago
      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.
      - zachinglis 14y ago
        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.
      - vacri 14y ago
        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.
    - ZoFreX 14y ago
      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.
- 178 14y ago
  Not to mention it seems plain wrong. These are icons, not ligatures.
  - 178 14y 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 14y 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 14y 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?
zachinglis 14y 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 14y 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 14y ago
Icon(ic) Fonts have come along way recently. These resources may be of use to some. http://icomoon.io/app/ http://icomoon.io/app/ http://fontello.com/ http://fontello.com/ http://symbolset.com/ http://symbolset.com/ http://somerandomdude.com/work/iconic/ 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 14y ago
Strange. it doesn't work under IE8 & 9. I checked the font-face and it seems ok at first glance.
jahewson 14y ago
Nice. But they're not ligatures. Also 'refreshbutton' is backwards.
- lukeholder 14y 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.
  - jahewson 14y ago
    Yep. It's called a "glyph substitution".
callahad 14y 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.
- jahewson 14y 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 14y 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.

46 points by dirkk0 14y ago

A webfont containing ligature symbols.

indiecore 14y ago

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

Foomandoonian 14y ago

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 14y 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 14y 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.
  - thristian 14y ago
    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.
    - zachinglis 14y ago
      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.
    - vacri 14y ago
      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.
  - ZoFreX 14y ago
    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.
178 14y ago
Not to mention it seems plain wrong. These are icons, not ligatures.
- 178 14y 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 14y 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 14y 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?

zachinglis 14y 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 14y 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 14y ago

Icon(ic) Fonts have come along way recently. These resources may be of use to some. http://icomoon.io/app/ http://icomoon.io/app/ http://fontello.com/ http://fontello.com/ http://symbolset.com/ http://symbolset.com/ http://somerandomdude.com/work/iconic/ 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 14y ago

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

jahewson 14y ago

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

lukeholder 14y 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.
- jahewson 14y ago
  Yep. It's called a "glyph substitution".

callahad 14y 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.

jahewson 14y 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 14y 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.