Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フォント入門 / intro-font

ちげ
September 14, 2019

フォント入門 / intro-font

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

ちげ

September 14, 2019
Tweet

More Decks by ちげ

Other Decks in Design

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

    View Slide


  8. IPAex 明朝
    情に棹させば流される。智に働けば
    角が立つ。どこへ越しても住みにく

    と悟った時、
    詩が生れて、
    画が出来る。
    とかく
    に人の世は住みにく
    い。
    TypeBank 社の TB 明兆(有料)を元に IPA が「誰でも無料に使えるフ
    ォン
    トが必要だ」との考えの元制作された。

    View Slide


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

    View Slide


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

    View Slide

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

    View Slide


  12. MS ゴシック
    情に棹させば流される。智に働けば
    角が立つ。どこへ越し
    ても住みに


    と悟った時、
    詩が生れて、
    画が出来る。
    とかくに人の世は住みに

    い。
    初めての日本語 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