http://kudakurage.com/ligature_symbols/ Ligature Symbols is to display the symbol with a ligature features. I created this font by using FontForge (open source postscript font editor). IF you want to learn more, you may read my blog entry ( http://d.hatena.ne.jp/kudakurage/20120720/1342749116 ).

1. ほんとにべんりな
フォントのはなし
Kazuyuki Motoyama

2. プロフィール

3. Kazuyuki Motoyama
Hatena Designer
kudakurage.com
@kudakurage

4. 今日のはなし

5. ほんとにべんりな
フォントのはなし

6. シンボルフォント

7. シンボルフォント
アイコンのベクターデータを
フォントにしたもの

9. 文字じゃなくてアイコンで
表示したい時などに便利！

11. ココがシンボルフォント

12. 1年くらい前から流行ってきた
（2012年9月現在）

13. Web Symbols typeface
http://www.justbenicestudio.com/studio/websymbols/
たぶんコレが最初

15. 利点

16. Webフォントで気軽に使える
ベクターデータなので拡大もOK
（勝手にRetina対応）
色や影などをCSSで制御できる
自作すればアイコンの種類も無限

17. 欠点

18. アルファベットなどに対して、
直接アイコンが対応付けされてる！

19. どういうことか？

21. なにがダメなの？

22. どのアイコンがどのキーなのか、
覚える必要がある（覚えれない）
マークアップやコード的にも
解釈できない表現になる

23. たとえば....

24. <a href= mailto: >m</a>

25. 「m」ってなによ？
フォントが読み込めないと
ユーザーも意味が分からない
<a href= mailto: >m</a>

26. セマンティック
じゃない！

27. そこで....

28. つくりました。

29. セマンティック
の問題を解決！

30. <a href= ... >mail</a>

31. 「mail」読める！
フォントが読み込めくても
意味が分かる！
<a href= ... >mail</a>

32. どうやってるの？

33. 「ほんとにフォントだけで？」
「どうせJSなんでしょ...」

34. フォントだけです！
JS使ってないです！

35. じゃあ、どうやってるのよ？
オーディエンス「おしえなさいよ！」

36. Ligature

37. Ligatureって何？

38. Ligature
二つ以上の文字を結合して一つの
文字記号としてデザインしたもの

39. Ligature
合字
（日本語だとね）

40. たとえば....

42. この辺が変にぶつかってて
気になるし、かっこ悪い...

43. Ligatureで解決！

45. スマート！かっこいい！

46. ほかにも...

48. 日本語でも...

49. 麻呂 麿
久米 粂
（漢字合字）

50. 話が少しそれましたが

51. 今日のはなし...
つくりました。

52. ふつうは...

54. では...

55. mail
camera
share

56. べんり！

57. しかも...

58. 普通のシンボルフォントは
大小アルファベット50文字
＋
数字・記号など40文字程度
90文字ぐらい

59. では...

60. 無限

61. べんり！

62. 使用例

63. CSS PhotoEditor for iOS6

64. この辺が

66. 拡大してもキレイ

67. べんり！

68. DEMO!
http://kudakurage.com/ligature_symbols/