Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ligature Symbols 〜ほんとにべんりなフォントのはなし〜

14,327 views

Published on

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

Published in: Design

Ligature Symbols 〜ほんとにべんりなフォントのはなし〜

  1. 1. ほんとにべんりなフォントのはなし Kazuyuki Motoyama
  2. 2. プロフィール
  3. 3. Kazuyuki MotoyamaHatena Designerkudakurage.com@kudakurage
  4. 4. 今日のはなし
  5. 5. ほんとにべんりなフォントのはなし
  6. 6. シンボルフォント
  7. 7. シンボルフォントアイコンのベクターデータを フォントにしたもの
  8. 8. 文字じゃなくてアイコンで表示したい時などに便利!
  9. 9. ココがシンボルフォント
  10. 10. 1年くらい前から流行ってきた (2012年9月現在)
  11. 11. Web Symbols typefacehttp://www.justbenicestudio.com/studio/websymbols/ たぶんコレが最初
  12. 12. 利点
  13. 13. Webフォントで気軽に使えるベクターデータなので拡大もOK(勝手にRetina対応)色や影などをCSSで制御できる自作すればアイコンの種類も無限
  14. 14. 欠点
  15. 15. アルファベットなどに対して、直接アイコンが対応付けされてる!
  16. 16. どういうことか?
  17. 17. なにがダメなの?
  18. 18. どのアイコンがどのキーなのか、覚える必要がある(覚えれない)マークアップやコード的にも解釈できない表現になる
  19. 19. たとえば....
  20. 20. <a href= mailto: >m</a>
  21. 21. 「m」ってなによ? フォントが読み込めないとユーザーも意味が分からない<a href= mailto: >m</a>
  22. 22. セマンティック じゃない!
  23. 23. そこで....
  24. 24. つくりました。
  25. 25. セマンティックの問題を解決!
  26. 26. <a href= ... >mail</a>
  27. 27. 「mail」読める!フォントが読み込めくても 意味が分かる!<a href= ... >mail</a>
  28. 28. どうやってるの?
  29. 29. 「ほんとにフォントだけで?」 「どうせJSなんでしょ...」
  30. 30. フォントだけです!JS使ってないです!
  31. 31. じゃあ、どうやってるのよ? オーディエンス「おしえなさいよ!」
  32. 32. Ligature
  33. 33. Ligatureって何?
  34. 34. Ligature二つ以上の文字を結合して一つの文字記号としてデザインしたもの
  35. 35. Ligature 合字 (日本語だとね)
  36. 36. たとえば....
  37. 37. この辺が変にぶつかってて気になるし、かっこ悪い...
  38. 38. Ligatureで解決!
  39. 39. スマート!かっこいい!
  40. 40. ほかにも...
  41. 41. 日本語でも...
  42. 42. 麻呂 麿久米 粂 (漢字合字)
  43. 43. 話が少しそれましたが
  44. 44. 今日のはなし... つくりました。
  45. 45. ふつうは...
  46. 46. では...
  47. 47. mailcamerashare
  48. 48. べんり!
  49. 49. しかも...
  50. 50. 普通のシンボルフォントは大小アルファベット50文字 +数字・記号など40文字程度 90文字ぐらい
  51. 51. では...
  52. 52. 無限
  53. 53. べんり!
  54. 54. 使用例
  55. 55. CSS PhotoEditor for iOS6
  56. 56. この辺が
  57. 57. 拡大してもキレイ
  58. 58. べんり!
  59. 59. DEMO!http://kudakurage.com/ligature_symbols/

×