フォント入門 / 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
2. Follow me かるたの人 動画の人 Webの人 デザ イ ンの人 変な人 ͪ͛ ͪ͛ ಸྑߴઐ
   ઐ߈Պ  ೥
   ిؾిࢠγεςϜίʔε !$IJHF @ マルチタスク流石に懲りたかと思ってい たがまたやってる よ。来週には技術書 典 � が控え UI の本を執筆中だという のに昨日一日かけてスライ ド作ったよ。 オタク と Minecraft とか Human Fall Flat とかするの、無限に楽し くてダメ。 え ？ 執筆しろって ？ え～と新刊はなし ！ ！
3. https://speakerdeck.com/ chige/intro-font https://speakerdeck.com/ chige/intro-font
4. まずは基本的なところから行ってみよう ！ 　今回は最後まで明朝かゴシックかだよ ！ ヒラギノ明朝 Pro W3 ヒラギノ角ゴシック W3 明朝体 ゴシック体 Ӭ Ӭ
5. 違いを見てみよう。とめやはらいの形、太さの変化、細部に宿る特徴が鍵。 太 さ と め は ら い ウ ロ コ ︵ セ リ フ ︶ ※ 角 ウ ロ コ と 呼 ば れ て い る 明 朝 体 ゴ シ ッ ク 体
6. ໌ேମ ஜࢵ " ݟग़ ϛ ϯ
   4UE
   &
7. 永 ＭＳ Ｐ明朝 情に棹させば流される。 智に働けば 角が立つ。 どこへ越しても住みにくい と悟った時、 詩が生れて、 画が出来 る。 とかくに人の世は住みにくい。 卒論の定番。リ ョービの「本明朝」を RICOH が PC でみやすいように改変、Windows に導入。無料フ ォン トではない。
8. 永 IPAex 明朝 情に棹させば流される。智に働けば 角が立つ。どこへ越しても住みにく い と悟った時、 詩が生れて、 画が出来る。 とかく に人の世は住みにく い。 TypeBank 社の TB 明兆（有料）を元に IPA が「誰でも無料に使えるフ ォン トが必要だ」との考えの元制作された。
9. 永 あおぞら明朝 情に棹させば流される。 智に働けば 角が立つ。 どこへ越しても住みにくい と悟った時、 詩が生れて、 画が出来る。 とかくに人の世は住みにくい。 IPA 明朝が改変可能になったことで、有志によ って生み出されたフ ォン ト。 「はんなり明朝」等も同様。７ウェイ ト。
10. 永 源ノ明朝 JP 情に棹させば流される。智に働けば 角が立つ。どこへ越しても住みにくい と悟った時、 詩が生れて、 画が出来る。 とかくに人の世は住みにくい。 Adobe と Google が共同開発したフリーフ ォン ト。スマホ等の小さな画面でも読みやすいよう設計された。７ウェイ ト。
11. ΰγοΫମ 6% ֯ΰ @ ϥʔδ
    1S/
12. 永 ＭＳ ゴシック 情に棹させば流される。智に働けば 角が立つ。どこへ越し ても住みに く い と悟った時、 詩が生れて、 画が出来る。 とかくに人の世は住みに く い。 初めての日本語 TrueType Font。MS 明朝も同様。ビッ トマップからアウ トラインデータへの技術移行がベースにある。
13. 永 メイリオ 情に棹させば流される。智に働けば 角が立つ。どこへ越しても住みに くい と悟った時、 詩が生れて、 画が出来る。 とかくに人の世は住みに くい。 MS ゴシックに代わる、より可読性の高いゴシック体として開発された。 「ClearType」に対応。名前は「明瞭」に由来。
14. Ӭ 游ゴシック体 ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ͚͹ ཱ͕֯ͭɻͲ͜΁ӽ͠ ͯ΋ॅΈʹ͍͘ ͱޛͬͨ࣌ɺ ࢻ͕ੜΕͯɺ ը͕ग़དྷΔɻ ͱ͔͘ʹਓͷੈ͸ॅΈʹ͍͘ɻ 游明朝と一緒に使う想定で、長文でも読みやすいように設計。緩いカーブと、角に少し丸みがあるのが特徴。
15. Ӭ ヒラギノ角ゴシック ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ͚͹ ཱ͕֯ͭɻͲ͜΁ӽͯ͠΋ॅΈʹ͍͘ ͱޛͬͨ࣌ɺ ࢻ͕ੜΕͯɺ ը͕ग़དྷΔɻ ͱ͔͘ʹਓͷੈ͸ॅΈʹ͍͘ɻ Mac, iOS に標準装備の人気書体。フ トコロを少し締めた読みやすいデザイン。京都の地名「柊野」に由来。
16. 設計思想の英字フ ォン トとの対応 ΰγοΫମ ໌ேମ Sans Serif 4FSJG 英字フォ ント 日本語フォ ント
17. 試しに、英語で「Gothic font」と検索してみよう。あれれ？ ？ ϒϥοΫϨλʔͱݺ͹ΕΔ ૷০จࣈʢफڭ͕བྷΜͰͦ͏ʣ ͜Ε͸Կʁ ϥςϯจࣈىݯ ಡΈʹ͍͘
    ˠ
    4FSJG ஀ੜ ϩʔϚϯମ ※Sans serif 体を指す言葉としても使われています
18. Serif Times New Roman
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.
20. Sans serif Helvetica Neue
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 つ程分類がある。気になる人は調べてみてね。 8F
    CFMJFWF
    UIBU
    PQUJPO
    DPVME
    CF
    UIF
    OFYU
    CJH
    TUFQ
    JO
    UIF
    EFWFMPQNFOU
    PG
    8FC
    "QQMJDBUJPOT
    XJUI
    NJDSPTFSWJDFT 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.
22. ਪ͠ϑΥϯτ ๻͕ݸਓతʹਪ͍ͯ͠ΔϑΥϯτΛ঺հ͠·͢ɻ
23. ͕ͨͮͶ֯ΰγοΫ ͕ͨͮͶ֯ΰγ ο Ϋ ͕ͨͮͶ֯ΰγοΫ たづがね角ゴシック ドイツ Monotype 社が初めて開発した日本語フ ォン ト。このネタだけで 10 分は喋れる。ご飯 3 杯は余文字数
24. ஜࢵ " ؙΰγ ο Ϋ ஜࢵ " ؙΰγ οΫ ஜࢵ " ؙΰγ ο Ϋ 筑紫 A 丸ゴシック 初めてみたとき、こんなに可愛いのに幼く見えないの度肝抜いた。使い所良すぎて脳死で使ってまう。起訴。
25. ஜࢵ " Φʔϧ υ໌ே ஜࢵ # Φʔ ϧ υ໌ே ஜࢵ $ Φʔ ϧ υ໌ே 筑紫 { A || B || C } オールド明朝 A は王道。B は崩した感じ。C はフ トコロが大き く丸い。印刷とかで使うとよりオシャレ。
26. ͍͋ ͏ ͓͔͖͑ ͘ ͚ ͜ ͍͋ ͏ ͓͔͑ ͖ ͘ ͚ ͜ ͍͋ ͏ ͓͔͖͑ ͘ ͚͜ 筑紫 { A || B || C } オールド明朝 ひらがなで見るとかなり特徴が分かれる。
27. ࣮ࡍʹ࢖ͬ ͯΈΔͷ͕Ұ൪͍͍ɻ ࢖ͬ ͯΈͨ ͘ ͳ͍Ͱ͔͢ʁ
28. ߴઐ΋ ͪΌΜͱॻ͍ͯ͋Δͥ ֶੜ൛ -&54
    '0/5 ೥ؒܖ໿ = ͓͢ ͢ Ί ର৅ϑ Υϯ τ ̎ ̌ ̌Ҏ্ ঎༻Ҏ֎ͳΒ࢖͍์୊ Inexpensive
29. ͝੩ௌ͋ Γ ͕ͱ ͏ ͍͟͝ · ͨ͠ ஜࢵΞ ϯς Ο ʔ Ϋ4 ໌ே