フォント入門 / intro-font

高専カンファレンス in 京都で発表した内容。作ってるうちに「これ入門か……？」となっていたのですがまぁいいでしょう。

Transcript

1. technical a set
   of letters of a
   particular size
   and style,
   used for
   printing
   books,
   newspapers
   etc or on a
   computer
   screen
   フ
   ォント入門
   フォント入門
   ϑΥϯτೖ໳
   高専カンファレンス in 京都 - 2019 / 09 / 14
   by Font lovers
   technical a set
   of letters of a
   particular size
   and style,
   used for
   printing
   books,
   newspapers
   etc or on a
   computer
   screen
   

   View Slide

2. Follow me
   かるたの人
   動画の人
   Webの人
   デザ
   イ
   ンの人
   変な人
   ͪ͛
   ͪ͛
   ಸྑߴઐઐ߈Պ ೥
   ిؾిࢠγεςϜίʔε
   !$IJHF
   @
   マルチタスク流石に懲りたかと思ってい
   たがまたやってる
   よ。来週には技術書
   典 � が控え UI の本を執筆中だという
   のに昨日一日かけてスライ
   ド作ったよ。
   オタク
   と Minecraft とか Human Fall
   Flat とかするの、無限に楽し
   くてダメ。
   え
   ？ 執筆しろって
   ？ え～と新刊はなし
   ！
   ！
   

   View Slide

3. https://speakerdeck.com/
   chige/intro-font
   https://speakerdeck.com/
   chige/intro-font
   

   View Slide

4. まずは基本的なところから行ってみよう
   ！
   　今回は最後まで明朝かゴシックかだよ
   ！
   ヒラギノ明朝 Pro W3 ヒラギノ角ゴシック W3
   明朝体 ゴシック体
   Ӭ Ӭ
   

   View Slide

5. 違いを見てみよう。とめやはらいの形、太さの変化、細部に宿る特徴が鍵。
   太
   さ
   と
   め
   は
   ら
   い
   ウ
   ロ
   コ
   ︵
   セ
   リ
   フ
   ︶
   ※
   角
   ウ
   ロ
   コ
   と
   呼
   ば
   れ
   て
   い
   る
   明
   朝
   体
   ゴ
   シ
   ッ
   ク
   体
   

   View Slide

6. ໌ேମ
   ஜࢵ " ݟग़
   ϛ
   ϯ4UE&
   

   View Slide

7. 永
   ＭＳ Ｐ明朝
   情に棹させば流される。 智に働けば
   角が立つ。 どこへ越しても住みにくい
   と悟った時、 詩が生れて、 画が出来
   る。 とかくに人の世は住みにくい。
   卒論の定番。リ
   ョービの「本明朝」を RICOH が PC でみやすいように改変、Windows に導入。無料フ
   ォン
   トではない。
   

   View Slide

8. 永
   IPAex 明朝
   情に棹させば流される。智に働けば
   角が立つ。どこへ越しても住みにく
   い
   と悟った時、
   詩が生れて、
   画が出来る。
   とかく
   に人の世は住みにく
   い。
   TypeBank 社の TB 明兆（有料）を元に IPA が「誰でも無料に使えるフ
   ォン
   トが必要だ」との考えの元制作された。
   

   View Slide

9. 永
   あおぞら明朝
   情に棹させば流される。 智に働けば
   角が立つ。 どこへ越しても住みにくい
   と悟った時、 詩が生れて、 画が出来る。
   とかくに人の世は住みにくい。
   IPA 明朝が改変可能になったことで、有志によ
   って生み出されたフ
   ォン
   ト。
   「はんなり明朝」等も同様。７ウェイ
   ト。
   

   View Slide

10. 永
    源ノ明朝 JP
    情に棹させば流される。智に働けば
    角が立つ。どこへ越しても住みにくい
    と悟った時、
    詩が生れて、
    画が出来る。
    とかくに人の世は住みにくい。
    Adobe と Google が共同開発したフリーフ
    ォン
    ト。スマホ等の小さな画面でも読みやすいよう設計された。７ウェイ
    ト。
    

    View Slide

11. ΰγοΫମ
    6% ֯ΰ @ ϥʔδ1S/
    

    View Slide

12. 永
    ＭＳ ゴシック
    情に棹させば流される。智に働けば
    角が立つ。どこへ越し
    ても住みに
    く
    い
    と悟った時、
    詩が生れて、
    画が出来る。
    とかくに人の世は住みに
    く
    い。
    初めての日本語 TrueType Font。MS 明朝も同様。ビッ
    トマップからアウ
    トラインデータへの技術移行がベースにある。
    

    View Slide

13. 永
    メイリオ
    情に棹させば流される。智に働けば
    角が立つ。どこへ越しても住みに
    くい
    と悟った時、
    詩が生れて、
    画が出来る。
    とかくに人の世は住みに
    くい。
    MS ゴシックに代わる、より可読性の高いゴシック体として開発された。
    「ClearType」に対応。名前は「明瞭」に由来。
    

    View Slide

14. Ӭ
    游ゴシック体
    ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ͚͹
    ཱ͕֯ͭɻͲ͜΁ӽ͠
    ͯ΋ॅΈʹ͍͘
    ͱޛͬͨ࣌ɺ
    ࢻ͕ੜΕͯɺ
    ը͕ग़དྷΔɻ
    ͱ͔͘ʹਓͷੈ͸ॅΈʹ͍͘ɻ
    游明朝と一緒に使う想定で、長文でも読みやすいように設計。緩いカーブと、角に少し丸みがあるのが特徴。
    

    View Slide

15. Ӭ
    ヒラギノ角ゴシック
    ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ͚͹
    ཱ͕֯ͭɻͲ͜΁ӽͯ͠΋ॅΈʹ͍͘
    ͱޛͬͨ࣌ɺ
    ࢻ͕ੜΕͯɺ
    ը͕ग़དྷΔɻ
    ͱ͔͘ʹਓͷੈ͸ॅΈʹ͍͘ɻ
    Mac, iOS に標準装備の人気書体。フ
    トコロを少し締めた読みやすいデザイン。京都の地名「柊野」に由来。
    

    View Slide

16. 設計思想の英字フ
    ォン
    トとの対応
    ΰγοΫମ
    ໌ேମ
    Sans Serif
    4FSJG
    英字フォ
    ント
    日本語フォ
    ント
    

    View Slide

17. 試しに、英語で「Gothic font」と検索してみよう。あれれ？
    ？
    ϒϥοΫϨλʔͱݺ͹ΕΔ
    ૷০จࣈʢफڭ͕བྷΜͰͦ͏ʣ
    ͜Ε͸Կʁ
    ϥςϯจࣈىݯ
    ಡΈʹ͍͘ˠ4FSJG ஀ੜ
    ϩʔϚϯମ
    
    
    ※Sans serif 体を指す言葉としても使われています
    

    View Slide

18. Serif
    Times New Roman
    

    View Slide

19. Bodoni
    Its main scope is UI rendering
    while abstracting away the client/server distribution.
    Times New Roman
    Nuxt.js is a framework for creating Vue.js applications, you can choose between Universal, Static Generated
    or Single Page application.
    Iowan Old Style Roman
    セリフ / ローマン体 ローマン体の中にも 4～5 つ程分類がある。古いのから新しいのまで色々。
    serif（ウロコ）がついている。
    Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project
    based on Node.js. Nuxt.js presets all the configuration needed to make your development of a server-rendered Vue.js Application
    more enjoyable.
    

    View Slide

20. Sans serif
    Helvetica Neue
    

    View Slide

21. Franklin Gothic
    HelveticaIn addition, we also provide another deployment option
    called: nuxt generate. It will build a statically generated
    Vue.js Application.
    Franklin Gothic
    'SVUJHFS
    Futura
    サンセリフ serif がない。歴史的には新しいフ
    ォン
    ト。Sans-serif にも 4～5 つ程分類がある。気になる人は調べてみてね。
    8FCFMJFWFUIBUPQUJPODPVMECFUIFOFYUCJHTUFQJOUIF
    EFWFMPQNFOUPG8FC"QQMJDBUJPOTXJUINJDSPTFSWJDFT
    Furthermore, you can also use Nuxt.js to create single page applications (spa mode)
    quickly, useful to keep Nuxt features while working on backoffice applications.
    

    View Slide

22. ਪ͠ϑΥϯτ
    ๻͕ݸਓతʹਪ͍ͯ͠ΔϑΥϯτΛ঺հ͠·͢ɻ
    

    View Slide

23. ͕ͨͮͶ֯ΰγοΫ
    ͕ͨͮͶ֯ΰγ
    ο
    Ϋ
    ͕ͨͮͶ֯ΰγοΫ
    たづがね角ゴシック ドイツ Monotype 社が初めて開発した日本語フ
    ォン
    ト。このネタだけで 10 分は喋れる。ご飯 3 杯は余文字数
    

    View Slide

24. ஜࢵ " ؙΰγ
    ο
    Ϋ
    ஜࢵ " ؙΰγ
    οΫ
    ஜࢵ " ؙΰγ
    ο
    Ϋ
    筑紫 A 丸ゴシック 初めてみたとき、こんなに可愛いのに幼く見えないの度肝抜いた。使い所良すぎて脳死で使ってまう。起訴。
    

    View Slide

25. ஜࢵ " Φʔϧ
    υ໌ே
    ஜࢵ # Φʔ
    ϧ
    υ໌ே
    ஜࢵ $ Φʔ
    ϧ
    υ໌ே
    筑紫 { A || B || C } オールド明朝 A は王道。B は崩した感じ。C はフ
    トコロが大き
    く丸い。印刷とかで使うとよりオシャレ。
    

    View Slide

26. ͍͋
    ͏
    ͓͔͖͑
    ͘
    ͚
    ͜
    ͍͋
    ͏
    ͓͔͑
    ͖
    ͘
    ͚
    ͜
    ͍͋
    ͏
    ͓͔͖͑
    ͘
    ͚͜
    筑紫 { A || B || C } オールド明朝 ひらがなで見るとかなり特徴が分かれる。
    

    View Slide

27. ࣮ࡍʹ࢖ͬ
    ͯΈΔͷ͕Ұ൪͍͍ɻ
    ࢖ͬ
    ͯΈͨ
    ͘
    ͳ͍Ͱ͔͢ʁ
    

    View Slide

28. ߴઐ΋
    ͪΌΜͱॻ͍ͯ͋Δͥ
    ֶੜ൛ -&54'0/5
    ೥ؒܖ໿
    =
    ͓͢
    ͢
    Ί
    ର৅ϑ
    Υϯ
    τ
    ̎
    ̌
    ̌Ҏ্
    ঎༻Ҏ֎ͳΒ࢖͍์୊
    Inexpensive
    

    View Slide

29. ͝੩ௌ͋
    Γ
    ͕ͱ
    ͏
    ͍͟͝
    ·
    ͨ͠
    ஜࢵΞ
    ϯς
    Ο
    ʔ
    Ϋ4 ໌ே
    

    View Slide