次：https://www.slideshare.net/kmaztani/kmc-font-project-3-fontforge 前：https://www.slideshare.net/kmaztani/kmc-font-project-1-typeface-design フォント制作時に必要になる視覚調整とカーニングの知識を学ぶ。 錯視に対策を施し、美しく見えるようにする。 京大マイコンクラブ(KMC) KMCフォントプロジェクト第2回の内容

1. KMC Font Project
2016 #2
2016.7.31 Sun. kmc-id: maztani
視覚調整実践 ／ カーニング

2. 事前準備
Inkscape の起動
マウスの準備
演習テンプレートとスライドをダ
ウンロード

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

4. 近況報告
Glyphs と MacBook Pro 合わせて欲しい
Illustrator最高です
「君の名は。」めっちゃ見たい
KMC Sans（仮称）開発中
https://https://ja.wikipedia.org/wiki/Adobe_Illustrator#/media/File:Adobe_Illustrator_Icon_CS6.png

5. 近況報告
KMC Sans（仮称）
Lorem ipsum
Font project

6. Section
第1回の復習
1

7. 視覚調整
書体は「どう見えるか」が重要
眺めたときの違和感を減らす調整 ＝ 視覚調整
……技法を復習しましょう

8. フィック錯視への対策
縦横の線を均一な太さに見せるためには、横線を若干細くする
数値的な正確さよりも、「人間の目にはどう見えるか」という
観点が重要
例

9. ポゲンドルフ錯視への対策
斜めに線が交差する部分では、斜めの線をぶった切ってずらす

10. ポゲンドルフ錯視への対策
線がずれて見える
交差部が厚ぼったい
線が繋がった
交差部がすっきり

11. 真円 クロソイド的
クロソイド曲線

12. Section
視覚調整の技法①
幾何学的なグリフの描き方
2

13. 幾何学的造形の難しさ
幾何学的な造形：錯視の影響が大きい
→ 視覚調整が必須
前回紹介した「フィック錯視」「クロソイド曲線」は幾何学的
なグリフを自然に見せる技法
より実践的な技法を紹介します

14. 1. 真円の描き方
視覚調整あり視覚調整なし

15. 1. 真円の描き方
視覚調整あり視覚調整なし
四隅が弱い
縦線が細い
縦方向に間延び

16. 1. 真円の描き方
「フィック錯視」の考え方に基づく
縦線を太く
扁平な外形
安定感UP
均等に膨張するイメージ
四隅を強調

18. 2. 角丸長方形の描き方
こんな書体に
応用可

19. 2. 角丸長方形の描き方
直線＋円弧 視覚調整

20. 2. 角丸長方形の描き方
4辺がへこんで見える 4辺がまっすぐに見える

21. 2. 角丸長方形の描き方
「クロソイド曲線」の考え方に基づく
曲率半径を滑らかに遷移させていく
辺を外側へ膨らませる
円弧部を内側へ寄せる
安定感UP
外圧に強そうなイメージ

23. Section
視覚調整の技法②
イタリック体の描き方
3

24. 1. 楕円の視覚調整
イタリック O のような楕円形を含むグリフは調整が必要

25. 1. 楕円の視覚調整
イタリック O のような楕円形を含むグリフは調整が必要
細い
細い

26. 1. 楕円の視覚調整
イタリック O のような楕円形を含むグリフは調整が必要
細い
細い

28. 2. 角度の視覚調整
bdhkの縦棒の角度を調整
ローマン体で調整が必要（サンセリフ等では修正しない）
ローマン体だが、視覚調整を行なっていない書体もある

29. 演習02
明朝体の「あ」を描こう
本文用のウェイト
ゲシュタルト崩壊に注意
ポイント
○始筆の形状
○運筆
○太さのピーク位置
○間架結構法

30. Section
ペアカーニング
4

31. 書体からフォントへ
今まで紹介してきた視覚調整は書体（デザイン）に関すること
次はフォント（データの集合体）に関わる話題
フォントにはグリフの形だけではなく、他にも様々な情報を付
与できる
まずは、ペアカーニングについて紹介します

32. そもそもカーニングとは
主に欧文の組版において、
プロポーショナルフォントの
文字同士の間隔（アキ）を
調整する技法
Wikipedia より引用

33. カーニングの効果
均等なスペースはバラバラに見える
スペースを調整すると、綺麗に並ぶ

34. ペアカーニングとは
特定の文字の組み合わせ〈ペア〉で動作する、文字詰め機能
〈カーニング〉のこと
主な欧文フォントには、フォント内部にペアカーニング情報を
持つ
和文フォントにも、ペアカーニング情報を持ったものがある

35. カーニングとペアカーニングの違い
 手動で調整する
 ツメ具合は任意
 主に見出しに使用
 自動で調整される
 ツメ具合は固定
 主に本文に使用
カーニング ペアカーニング

36. ペアカーニングの組合せ
知らなきゃ絶対損するPCマル秘ワザ
http://daredemopc.blog51.fc2.com/blog-entry-752.html
より引用
※ 一例です

37. お疲れ様でした