Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Serif Times New Roman

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

Sans serif Helvetica Neue

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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