フォント入門 / intro-font

994abc15f0cfc4010e8125dba1bcfae7?s=47 ちげ
September 14, 2019

フォント入門 / intro-font

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

994abc15f0cfc4010e8125dba1bcfae7?s=128

ちげ

September 14, 2019
Tweet

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. 永 MS P明朝 情に棹させば流される。 智に働けば 角が立つ。 どこへ越しても住みにくい と悟った時、 詩が生れて、 画が出来

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

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

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

    と Google が共同開発したフリーフ ォン ト。スマホ等の小さな画面でも読みやすいよう設計された。7ウェイ ト。
  11. ΰγοΫମ 6% ֯ΰ @ ϥʔδ1S/

  12. 永 MS ゴシック 情に棹させば流される。智に働けば 角が立つ。どこへ越し ても住みに く い と悟った時、 詩が生れて、

    画が出来る。 とかくに人の世は住みに く い。 初めての日本語 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 つ程分類がある。気になる人は調べてみてね。 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.
  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 ໌ே