京大マイコンクラブ(KMC) 春合宿2017 KMC Website: https://www.kmc.gr.jp/index.html

1. フォントの
選び方・使い方
2017.3.19 kmc-id: maztani
脱・野暮デザイン！

2. 自己紹介
 kmc-id: maztani （抹谷）
 工学部電気電子工学科1回
 一応 graphics に生息
 Twitter: @k_maztani
 Pixiv: @maztani

3. 自己紹介（フォント）
NF2016で
フォントを出展した
フォントの人と
覚えて下さい

4. 自己紹介（お絵かき）
 ベクタ絵も描いている
 すべてのストローク・塗りが独立
して存在しているので、後からの
編集が容易
 解像度の悩みとおさらば
 みんなも Inkscape か Illustrator を
導入してベクタ絵を描こう！

5. 自己紹介（お絵かき）
 ベクタ絵も描いている
 すべてのストローク・塗りが独立
して存在しているので、後からの
編集が容易
 解像度の悩みとおさらば
 みんなも Inkscape か Illustrator を
導入してベクタ絵を描こう！

6. 近況報告
最高に楽しい ／ UIデザインが綺麗で好き

8. ロゴGブラック
ニタラゴ（改変）

9. ▲ ロダンNTLG（ニタラゴ）
◀ ロゴGブラック

10. いい感じの
デザイン

11. いい感じのデザイン
作りたい

12. いい感じのデザイン
ゼロから己の手で
創り上げるのは無謀

13. いい感じのデザイン

14. いい感じのデザイン
良質なフォントを
適切に組めば、
優れたデザインが
生まれる

15. 0 はじめに
1 フォントを知る
2 フォントの選び方
3 フォントの使い方
目次

16. Section
フォントを知る
1

17. フォントって何だ

18. フォントって何だ
字形 ＋ 様々な情報

19. フォントって何だ
字形 ＋ 様々な情報
これだけがフォントと思われがち

20. フォントって何だ
字形 ＋ 様々な情報
これだけがフォントと思われがち
コレがとても重要

21. フォントファイルが持つ主な情報
 字形
 ファミリー情報（ウェイト・イタリック）
 サイドベアリング（左右の字間）
 リガチャー（合字）置換
 ペアカーニング（特定２文字間の字詰め）
情報量が多いフォント ＝ 良質なフォント

22. Section
フォントの選び方
2

23. 書体の分類を
もとに選ぶ

24. 書体の分類を知る
 書体の特徴によるグループ分けを知っていると、書体を選ぶ
際の助けになる
 和文・欧文書体の主なジャンルを紹介します

25. 和文書体の分類

26. 和文書体の分類
 「ウロコ」と呼ばれる飾り
 縦横の線幅差
 線の太さが均等
 太さが均一
 線端や角を丸く処理

27. 欧文書体の分類

28. 欧文書体の分類（基本）
Roman
Sans Serif
Script

29. 欧文書体の分類（基本）
Roman
Sans Serif
Script ブラック・レター
12–15世紀に使用された。
筆記の速さと単位面積当たり文字数の
多さが特徴。
現在では重厚感を表す場合によく使用
される。

30. Roman
Sans Serif
Script
欧文書体の分類（基本）
ローマン体
ブラックレター体の後に出現。
もともと古代ローマで使用されていた
大文字体と、神聖ローマ帝国で使用さ
れたカロリング小文字体を起源に持つ。

31. 【参考】トラヤヌス帝の碑文

32. 【参考】トラヤヌス帝の碑文
 トラヤヌス記念柱の台座に刻まれた碑文。
 ローマ皇帝トラヤヌスのダキア戦争勝利を記念したもの。
 西暦113年完成。

33. 【参考】トラヤヌス帝の碑文
元老院とローマ市民は皇帝カエサル、神聖なネルウァの息子、ネルウァ・トラ
ヤヌス・アウグストゥス・ゲルマニクス・ダキウス、最高神祇官、17歳にして
護民官になった者、6回インペラトルとして賞賛された者、6回執政官になった
者、国民の父に、この丘がどんな高みだったかを示し、この素晴らしい作品の
ために取り除かれた場所を示すために（これを与えるか、または捧げる）

34. 【参考】カロリング小文字体
 9 – 13世紀、神聖ローマ帝国
（フランク王国）で使用された。
 規律ある丸みを帯びた字形。
 字が区別しやすく可読性が高い。
 単語間にスペースが設けられた。

35. 【参考】Roman体の出現
Imperial
Capital
Carolingian
Minuscule
9C
8 B.C.

36. 【参考】Roman体の出現
Imperial
Capital
Humanist
Capital
Carolingian
Minuscule
Humanist
Minuscule
ルネサンス (15C)
9C
8 B.C.

37. 【参考】Roman体の出現
Imperial
Capital
Humanist
Capital
Carolingian
Minuscule
Humanist
Minuscule
ルネサンス (15C)
Venetian
Roman
9C
8 B.C.
スピラ兄弟

38. 【参考】Roman体の出現
Imperial
Capital
Humanist
Capital
Carolingian
Minuscule
Humanist
Minuscule
ルネサンス (15C)
Venetian
Roman
9C
8 B.C.
Pre
Roman
スピラ兄弟

39. 【参考】Roman体の出現
Imperial
Capital
Humanist
Capital
Carolingian
Minuscule
Humanist
Minuscule
ルネサンス (15C)
Venetian
Roman
A.D. 9
8 B.C.
Pre
Roman
スピラ兄弟
ニコラ・ジェンソン

40. Roman
Sans Serif
Script
欧文書体の分類（基本）
サンセリフ体
19世紀初頭に出現。
初めは見出しなど限られた場面でしか
使われなかったが、現在では様々な書
体・ウェイトが開発され、本文での使
用も多い。

41. Roman
Sans Serif
Script
欧文書体の分類（基本）
スクリプト体
所謂「手書き文字」である。
カリグラフィーで使用される書体がこ
こに分類される事が多い。

42. Roman 体の分類

43. Roman体の分類
Roman RomanRoman
RomanRomanRoman
ルネサンス期以降、
時代に合わせてスタイルが変化してきた

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種類ある

52. 【参考】小文字の “g”
1階建て
single-story
2階建て
double-story

53. 【参考】小文字の “a”
1階建て
single-story
2階建て
double-story

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永

60. 書体の持つイメージ（和欧共通）
力強さ・信頼・安心 柔和さ・洗練・知的
太い書体 細い書体
A永 A永

61. 書体の持つ印象
ふところ編

62. 現代風・古風な書体の違いとは
和文書体で現代風と古風のデザイン差をどう表現する？

63. 「ふところ」の締まり具合に注目
 ふところ：画と画が構成している内側の空間のこと
現代風 古風
広 狭

64. 【参考】さっきのフォント一覧

65. 【参考】さっきのフォント一覧

66. 【参考】さっきのフォント一覧
¥5,000 / 4年

67. 使うべきでない
フォントを知る

68. 使うべきでないフォント
 フォントを否定するわけではないが、扱いづらいフォント・
機能に乏しいフォントは存在する
 使うべきでないフォントを知って、効率よくフォント選びを
するべし

69. 避けた方が
良いフォント
【和文編】

70. 避けるべきフォント①
 曲線がぎこちなく、グリフによって線の太さがまちまち
 画面表示に特化しているため、印刷時に品質を保てない
 太字が存在せず、疑似ボールド処理が成される
ＭＳ ゴシック
理由

71. 【参考】疑似ボールド
通常ウェイト書体の縁取りで擬似的に太字を表現すること
あ鬱 あ鬱
筑紫ゴシック
MS ゴシック

72. 【参考】疑似ボールド
画数の多い文字に擬似ボールド処理すると潰れてしまう
筑紫ゴシック
MS ゴシック
あ鬱 あ鬱

73. 【参考】疑似ボールド
鬱鸞
筑紫ゴシック
H
MS ゴシック
疑似ボールド

74. 避けるべきフォント①
 かな・漢字のバランスが悪く、洗練されていない
 画面表示に特化しており、印刷時に品質を保てない
 太字が存在せず、疑似ボールド処理が成される
ＭＳ 明朝
理由

75. 避けるべきフォント①
 UI用途のため、MSゴシックの かな を 2/3 に縮めたせいで、
かな文字の美しさを完全に無視したデザインを持つ
 もちろん太字は存在しない
MS UI Gothic
理由

76. 避けるべきフォント①
 UI用途のために、MSゴシックの かな を 2/3 の幅に縮めたせ
いで、かな文字の美しさを完全に無視したデザインを持つ
 もちろん太字は存在しない
夏でも底に冷たさを
理由

77. 避けた方が
良いフォント
【欧文編】

78. 避けるべきフォント①
 イタリック体・ボールド体が実装されていない
 オブリーク・疑似ボールド体になってしまう
 書体デザインそのものは素晴らしい
Century
理由

79. 【参考】Century のなかま①
イタリックとボールドが揃った Century Schoolbook を選ぶと良い
Century Schoolbook
Century
Type
Type
Type
Type

80. 避けるべきフォント①
 和文フォントに収録されたラテン文字を従属欧文という
 あくまでオマケ扱いのものが多く、欧文フォントとして使用
するにはあまりにも力不足である
従属欧文
理由

81. 【参考】従属欧文いろいろ
MS ゴシック
MS 明朝
HG 丸ゴシック M-PRO

82. 【参考】従属欧文いろいろ
游ゴシック
ヒラギノ角ゴシック
ヒラギノ明朝
Typography
Typography
Typography

83. 王道フォント

84. Windows の場合【欧文】
Segoe UI
Neue Haas Grotesk
Times New Roman

85. Mac の場合【欧文】
Helvetica Neue
Avenir Next
Didot

86. Windows の場合【和文】
游ゴシック
游明朝

87. Mac の場合【和文】
ヒラギノ角ゴシック
ヒラギノ明朝

88. フリーフォント【欧文】
フリーフォントなのに、OpenTypeFontの機能が満載
 多数のリガチャー
 豊富なペアカーニング
 スウォッシュ字形

89. フリーフォント【和文】

90. Section
フォントの使い方
3

91. 適切にカーニングを施す

92. カーニング
“Tech” と組んだ。良くない点はどこか

93. カーニング
“T” と “e” の間が空きすぎている

94. カーニング
字面幅を保ったまま詰めても、間隔が空いているように見える

95. カーニング
適切な詰め具合に修正したもの

96. カーニング
文字の組み合わせによっては、
字面幅以上に食い込ませる必要がある

97. カーニングとは
 主に欧文の組版において、プロポーショナルフォントの文字
同士の間隔（アキ）を調整する技法
 カーニングなし：文字間に不自然な空隙を招く
 カーニングあり：字面間の空白の面積が均等になる
 和文（横組み）の場合、見出しにカーニングを用いる
○ 仮名は縦組みベタで綺麗に並ぶ設計

98. カーニングを施す箇所

99. 和文も同じです

100. リガチャーで可読性UP

101. リガチャー
“Office” と組んでみた
不格好な点はどこでしょうか

102. リガチャー
“f” と “i” が重なって不自然な「黒み」が出てしまう

103. リガチャー
“f” と “i” が重なって不自然な「黒み」が出てしまう

104. リガチャー
“ffi” を1つの文字としてデザインされた
「リガチャー」に置換する

105. リガチャー
“f” の先端と “i” の点が統合されたデザイン
“ffi” すべての横棒が共通化されている

106. リガチャー機能を使うには
 ワープロソフトだと、「標準合字」または「任意の合字」が
表示されるように設定する
 グラフィックソフト (Illustrator 等) では「fi」ボタン等でリガ
チャーに置換できる
 ソフトウェアによっては自動置換に対応していなかったりす
るので、IME のワードパッド等から手動で合字を挿入する

107. 約物を正しく使う

108. 約物ってなんだ
約物 (punctuation mark)
 言語の記述に使用する記述記号類の総称

109. アポストロフィと
引用符の正しい使い方

110. アポストロフィ・引用符
アポストロフィ (apostrophe)
文字を省略したことを表す欧
文約物の一つ
引用符
英語・ドイツ語・ポーランド
語などで使用される引用符

111. アポストロフィ・引用符
アポストロフィ (apostrophe)
文字を省略したことを表す欧
文約物の一つ
引用符
英語・ドイツ語・ポーランド
語などで使用される引用符

112. アポストロフィ・引用符
アポストロフィ (apostrophe)
文字を省略したことを表す欧
文約物の一つ
引用符
英語・ドイツ語・ポーランド
語などで使用される引用符

113. 区別しよう
アポストロフィ・引用符とプライムは全くの別物である
アポストロフィ・引用符 プライム

114. Hyphen
En dash
Em dash

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

120. まとめ
良質なフォントを選ぶ
分類を知って書体のもつ雰囲気を掴む
約物を正しく使う
リガチャー置換を施す
カーニングを施す

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. お疲れ様でした