フォントの選び方・使い方
120 likes43,491 views
京大マイコンクラブ(KMC) 春合宿2017 KMC Website: https://www.kmc.gr.jp/index.html
More Related Content
What's hot (20)
Viewers also liked (6)
フォントの選び方・使い方
- 2. 自己紹介 kmc-id: maztani （抹谷） 工学部電気電子工学科1回 一応 graphics に生息 Twitter: @k_maztani Pixiv: @maztani
- 4. 自己紹介（お絵かき） ベクタ絵も描いている すべてのストローク・塗りが独立 して存在しているので、後からの 編集が容易 解像度の悩みとおさらば みんなも Inkscape か Illustrator を 導入してベクタ絵を描こう！
- 5. 自己紹介（お絵かき） ベクタ絵も描いている すべてのストローク・塗りが独立 して存在しているので、後からの 編集が容易 解像度の悩みとおさらば みんなも Inkscape か Illustrator を 導入してベクタ絵を描こう！
- 10. いい感じの デザイン
- 11. いい感じのデザイン 作りたい
- 13. いい感じのデザイン
- 15. 0 はじめに 1 フォントを知る 2 フォントの選び方 3 フォントの使い方 目次
- 17. フォントって何だ
- 21. フォントファイルが持つ主な情報 字形 ファミリー情報（ウェイト・イタリック） サイドベアリング（左右の字間） リガチャー（合字）置換 ペアカーニング（特定２文字間の字詰め） 情報量が多いフォント ＝ 良質なフォント
- 23. 書体の分類を もとに選ぶ
- 25. 和文書体の分類
- 26. 和文書体の分類 「ウロコ」と呼ばれる飾り 縦横の線幅差 線の太さが均等 太さが均一 線端や角を丸く処理
- 27. 欧文書体の分類
- 31. 【参考】トラヤヌス帝の碑文
- 34. 【参考】カロリング小文字体 9 – 13世紀、神聖ローマ帝国 （フランク王国）で使用された。 規律ある丸みを帯びた字形。 字が区別しやすく可読性が高い。 単語間にスペースが設けられた。
- 39. 【参考】Roman体の出現 Imperial Capital Humanist Capital Carolingian Minuscule Humanist Minuscule ルネサンス (15C) Venetian Roman A.D. 9 8 B.C. Pre Roman スピラ兄弟 ニコラ・ジェンソン
- 42. Roman 体の分類
- 44. 1. Venetian Roman (15c) アクシス（”o”の最細部を結んだ線）が左に傾斜している “e” 横棒が右肩上がり セリフが太め 特徴 http://typetuto.jp/column/ローマン体の歴史
- 45. 2. Old Roman (15–18c) アクシス（”o”の最細部を結んだ線）が左に傾斜している “e” 横棒が水平になった 大文字と小文字のデザインに、より統一感が生まれた 特徴
- 46. Transitional Roman 3. Transitional Roman アクシスが垂直、またはわずかに傾斜している “e” 横棒が水平 ベースラインと接するセリフが横一直線 特徴
- 47. Modern Roman 4. Modern Roman (18c–) 縦横のストローク幅の差が大きい アクシスが垂直 セリフはヘアライン・セリフ 特徴
- 48. Roman 体の選び方 古さ・新しさの度合いは、各時代のRoman 体のスタイルに対 応している Venetian Roman は使い所が難しいかも 本文：Old Roman または Transitional Roman が最適 タイトル：Modern Roman の美しさが映える場面。Old Roman や Transitional Roman でも良い
- 49. Sans Serif 体の分類
- 50. Grotesque 1. Grotesque (1890 頃 – ) 微妙に太さの差が目につき、野暮ったい印象を与える 曲線の先端は斜めにカットされ、小文字の “g” は2階建て 最初期のSans Serif 体ゆえ、古さを表現したいときに適する 特徴
- 51. 【参考】小文字の “g” 小文字の “g” には2種類ある
- 54. Geometric 2. Geometric (1920 頃 – ) 直線・真円で構成された印象を与える 急速に工業化する近代社会を反映した機械的・人工的な造形 可読性に劣るが、見出し・短文に適する 特徴
- 55. Neo Grotesque 3. Neo Grotesque (1957 頃 – ) 初期 Grotesque よりストロークが洗練され、字幅が広い 曲線の先端は垂直・水平にカットされ、小文字 ”g” が1階建て 現在最も標準的な Sans Serif 体と言ってよい 特徴
- 56. Humanist 4. Humanist Roman の骨格を残した造形だが、ストローク幅は均一 “c” などの開口部が広い 可読性が高く、本文書体や公共サインによく使用される 特徴
- 57. 書体の持つ印象 ウェイト編
- 58. 書体の持つイメージ（和欧共通） 力強さ・信頼・安心 柔和さ・洗練・知的 Sans Serif, ゴシック Roman, 明朝体 A永 A永
- 59. 書体の持つイメージ（和欧共通） 力強さ・信頼・安心 柔和さ・洗練・知的 Sans Serif, ゴシック Roman, 明朝体 A永 A永
- 61. 書体の持つ印象 ふところ編
- 64. 【参考】さっきのフォント一覧
- 65. 【参考】さっきのフォント一覧
- 67. 使うべきでない フォントを知る
- 70. 避けるべきフォント① 曲線がぎこちなく、グリフによって線の太さがまちまち 画面表示に特化しているため、印刷時に品質を保てない 太字が存在せず、疑似ボールド処理が成される ＭＳ ゴシック 理由
- 74. 避けるべきフォント① かな・漢字のバランスが悪く、洗練されていない 画面表示に特化しており、印刷時に品質を保てない 太字が存在せず、疑似ボールド処理が成される ＭＳ 明朝 理由
- 75. 避けるべきフォント① UI用途のため、MSゴシックの かな を 2/3 に縮めたせいで、 かな文字の美しさを完全に無視したデザインを持つ もちろん太字は存在しない MS UI Gothic 理由
- 76. 避けるべきフォント① UI用途のために、MSゴシックの かな を 2/3 の幅に縮めたせ いで、かな文字の美しさを完全に無視したデザインを持つ もちろん太字は存在しない 夏でも底に冷たさを 理由
- 78. 避けるべきフォント① イタリック体・ボールド体が実装されていない オブリーク・疑似ボールド体になってしまう 書体デザインそのものは素晴らしい Century 理由
- 79. 【参考】Century のなかま① イタリックとボールドが揃った Century Schoolbook を選ぶと良い Century Schoolbook Century Type Type Type Type
- 81. 【参考】従属欧文いろいろ MS ゴシック MS 明朝 HG 丸ゴシック M-PRO
- 83. 王道フォント
- 84. Windows の場合【欧文】 Segoe UI Neue Haas Grotesk Times New Roman
- 85. Mac の場合【欧文】 Helvetica Neue Avenir Next Didot
- 89. フリーフォント【和文】
- 91. 適切にカーニングを施す
- 93. カーニング “T” と “e” の間が空きすぎている
- 97. カーニングとは 主に欧文の組版において、プロポーショナルフォントの文字 同士の間隔（アキ）を調整する技法 カーニングなし：文字間に不自然な空隙を招く カーニングあり：字面間の空白の面積が均等になる 和文（横組み）の場合、見出しにカーニングを用いる ○ 仮名は縦組みベタで綺麗に並ぶ設計
- 98. カーニングを施す箇所
- 99. 和文も同じです
- 100. リガチャーで可読性UP
- 102. リガチャー “f” と “i” が重なって不自然な「黒み」が出てしまう
- 103. リガチャー “f” と “i” が重なって不自然な「黒み」が出てしまう
- 105. リガチャー “f” の先端と “i” の点が統合されたデザイン “ffi” すべての横棒が共通化されている
- 106. リガチャー機能を使うには ワープロソフトだと、「標準合字」または「任意の合字」が 表示されるように設定する グラフィックソフト (Illustrator 等) では「fi」ボタン等でリガ チャーに置換できる ソフトウェアによっては自動置換に対応していなかったりす るので、IME のワードパッド等から手動で合字を挿入する
- 107. 約物を正しく使う
- 108. 約物ってなんだ 約物 (punctuation mark) 言語の記述に使用する記述記号類の総称
- 109. アポストロフィと 引用符の正しい使い方
- 115. 3つの違いがわかりますか？ HYPHEN EM DASHEN DASH - —– すべて Hyphen で済ませてしまってはダメ！
- 116. Hyphen 使用箇所 複合語を作る場合 eg) mid-term 紙面デザインの都合上、行末の単語を音節で区切る場合 注意 基本的にハイフンの前後にスペースは入らない
- 117. En dash 使用箇所 範囲・期間を表す eg) 10:30 a.m. – 2:00 p.m. 入力方法 Windows: Alt + 0150 Mac: option + “- (hyphen)” テンキー入力でないと 反応しないので注意
- 118. Em dash 使用箇所 挿入・引用 入力方法 Windows: Alt + 0151 Mac: option + shift + “- (hyphen)” テンキー入力でないと 反応しないので注意
- 119. Alt キーコード Windows で利用できる Alt キーとテンキーを組み合わせた文 字入力方法 字形 コード 字形 コード 字形 コード £ 0163 Æ 0198 – 0150 ¢ 0162 æ 0230 — 0151 € 0128 ß 0223 ¤ 0164 Œ 0140 œ 0156
- 121. 参考文献 中央図書館にあった書体の歴史的な本（名前忘れた） typetuto.jp/column/ローマン体の歴史 typetuto.jp/column/サンセリフ体の歴史 www.kinkido.net/Europian/resume-ouji.html 「『左 Alt キー ＋ 数字キー』による特殊文字入力」 www2.kobe-u.ac.jp/~tmarutcm/album/specialcharacters.pdf
- 122. お疲れ様でした