KMC Font Project 1 - フォント製作・Typeface Designの基本

KMC Font Project
2016 #1
2016.7.31 Sun. id: maztani
Font 制作・Typeface Design の基本

事前準備
Inkscape のインストール
○https://inkscape.org/ja/
マウスの準備

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

近況報告
Glyphs 欲しい
○Mac 専用のフォントエディタ
ペンタブとIllustrator買うぞ！！
髪を切りたい
8/5 誕生日
https://glyphsapp.com/content/icon-glyphs-2.png

Section
プロジェクトの概要
1

KMC Font Project
フォントを作るプロジェクト
書体制作のノウハウを得る
ベジエ曲線に親しむ

使ってもらおう
フリーフォントとして配布する
売って稼ぐ
いい感じの配布サイトを作るのも良さそう

進捗を生む方法
頑張る
ゆるいプロジェクトなので締め切りは無いです
今年のNF・コミケでなくてもいいんじゃない？

Section
フォント制作の流れ
2

お世話になるソフト
Inkscape
SVG を描く
Illustrator代替
無料
https://commons.wikimedia.org/wiki/File:Inkscape_logo_2.svg
https://github.com/fontforge/fontforge
FontForge
TTFフォントを作る
既存のフォントの修正
無料

どうやって作るの
Inkscapeでアウトライン描く
○プレーンSVGで一文字ずつ出力
FontForgeでフォントを作る
○アウトラインの取り込み
○文字幅設定（サイドベアリング調整）
○ペアカーニングと合字の設定
○フォントを出力
完成
大まかな流れ
だいたい左記に沿って進む
用語などは
そのうち説明します
（たぶん）

どうやって作るの
Inkscapeでアウトライン描く
○プレーンSVGで一文字ずつ出力
FontForgeでフォントを作る
○アウトラインの取り込み
○文字幅設定（サイドベアリング調整）
○カーニングの設定
○TrueType形式で出力
完成
自動化できれば楽

詳細：アウトライン描き
FontForgeに読み込ませる関係上、1000px × 1000px のキャン
バス上で作る
FontForgeはベジエ曲線が扱いにくいので、この段階で完成さ
せてしまい、後から修正があまり出ないように
○１文字の中でのパーツは別々でも良い
○FontForgeでのパーツ結合が簡単／万一の修正のため

詳細：アウトライン描き
尖った角、鋭い谷は丸める
○フォントファイルに出力した際、意図しない線が現れる危険がある

フォント制作の流れ
以上を踏まえればOK
あとは試行錯誤でフォントはできる

Section
Inkscapeの扱い方
3

イラストソフトをマスターするべし
試行錯誤でフォントができると言っても、ツールの扱いに慣れ
ていないと極めて非効率
文字のデザインに最も時間がかかる
イラストソフトの扱いに慣れていれば仕事が捗る
マスターしましょう

注意
Inkscapeを例に説明します
Illustrator等は適切な表現に読み替えてください

パス
自由に形状を変形できる線や図形
パスはオープンパスとクローズドパスに大別される
パスは一連のベジエ曲線によって構成される
オープンパスクローズドパス
塗りつぶしの
挙動

ベジエ曲線
ノード（エンドポイント）とハンドル（コントロールポイン
ト）で構成される
○ノード：パスが絶対に通る点
○ハンドル：ノード周りにおけるパスの方向と曲がり具合を決定

ノードの種類
スムーズポイント： ■
コーナーポイント： ◆
ハンドル無しスムーズポイントコーナーポイント

パスの書き方
1. 始点位置で左クリック&ドラッグしてハンドルを調整
2. 次ノード位置で左クリック&ドラッグ、後方ハンドルを調整
3. Shiftで後方ハンドルを固定、前側ハンドルをドラッグで調整
4. 終点位置で左クリック&ドラッグしてハンドルを調整
5. 右クリックで終了

パスの書き方
1. 始点位置で左クリック&ドラッグしてハンドルを調整
2. 次ノード位置で左クリック&ドラッグ、後方ハンドルを調整
3. Shiftで後方ハンドルを固定、前側ハンドルをドラッグで調整
4. 終点位置で左クリック&ドラッグしてハンドルを調整
5. 右クリックで終了
習うより慣れる！

ハンドル操作を極めよ
キー操作を使いこなす
ノードからハンドルを引き出す：Shift + ドラッグ
ハンドルを一定角度にスナップ：Ctrl
ハンドルを折る：
はじめにノードだけ設置し、後からハンドルを引き出す描き方
でもOK
Shift
Ctrl
Shift

演習 01｜オープンパスで文字を描こう
フィルではなくストロークで文字の骨格を描いてください
文字の太さはストロークの太さで調節します
ファイル＞ドキュメントのプロパティにてキャンパスサイズ
を 1000px × 1000px に設定してください
課題
あ gor or

演習 01｜オープンパスで文字を描こう
コツ
最も急なカーブの両脇にノードを置くと調整しやすい
ノード数はなるべく少なめに
課題
あ gor or

ハンドル操作は練習あるのみ
The Bézier Game
http://bezier.method.ac/#
ベジエ曲線の練習ができる
ゲーム
キー操作はIllustrator準拠

Section
Typeface の基礎知識
4

書体
それぞれの字体が
一貫した特徴と独自の様式を備えた字形
として表現されている文字の集まり

デザインによる分類（和文）1
縦横で線の太さが異なる
ウロコと呼ばれる飾りがある
すべての線が均一な太さ
先端が角張っている
先端が丸い

デザインによる分類（和文）2
教科書体教科書で使用。点画が様式化されていない
宋朝体中国では明朝体と並んで正式な文書に使用
楷／行／草書体書道における各書法に則った書体
隷書体扁平な字形が特徴
手書き書体比較的制作が容易で、バリエーションに富む
デザイン書体さまざまなコンセプトの下に制作された書体

デザインによる分類（欧文）
線の強弱がある
セリフと呼ばれる飾りがある
セリフがない
サンセリフの線端を丸く処理
いわゆる手書き系書体
カリグラフィー由来が多い

サンセリフ体の分類
: グロテスク
: ネオ・グロテスク
: ヒューマニスト
: ジオメトリック

ローマン体の分類
: オールドフェイス
: モダンフェイス
: トランジショナル
: スラブセリフ

セリフによる分類（欧文ローマン体）
ヘアラインブラケットスラブ Clarendon
Clarendon をスラブセリフから
独立させて考える派閥もある

ウェイトによる分類
Ultra Light
Extra Light
Light
Regular
Demi Bold
Bold
Heavy
Black
Extra Bold
Ultra Bold
細
太
10段階
Light
Regular
Demi
Bold
Heavy
Black
細
太
6段階

ワイドによる分類
欧文では、文字幅の異なる同一書体を制作する場合が多い
近年、文字幅の展開を取り入れた和文書体が登場
e.g.) AXIS フォント／UD新ゴ／UD角ゴ
サンセリフ体（ゴシック体）のみの概念

斜体による分類
斜体変化を
かけていない状態
正体イタリックオブリーク
一部の字形に
変化がある
正体をそのまま
傾けただけ

ウェイト・ワイド・斜体による書体展開

フォントファミリーとは
書体のデザイン方針を維持したまま、様々なウェイト・スタイ
ルに展開したフォント群
○太字・斜体を揃えるだけでも、立派なフォントファミリーです
コンセプトを維持したまま、ゴシック体から明朝体まで展開し
たフォント群は、フォントシリーズと呼んだりする
e.g.) 筑紫書体シリーズ

和文の基準線
仮想ボディが隙間なく並ぶ
文字は字面枠いっぱいにデザインする
仮想ボディと字面枠の大きさの比率が書体の個性に繋がる
仮想
ボディ字面枠

欧文の基準線
① ボディサイズ ② アセンダライン
③ キャップライン ④ Xハイト
⑤ ベースライン ⑥ ディセンダライン

欧文の基準線
ボディサイズ（①）に対する
Xハイト（④）の比率が書体の個性に大きく関わる

Section
Typeface Design の基本
和文書体編
5

和文活字の二大潮流
秀英体築地体
http://www.screen.co.jp/ga_product/sento/pro/typography/05typo/pdf/051_shogo.pdf
http://morisawa-resources.s3.amazonaws.com/uploads/ung/font_family/set_sample_file/109/ShueiShogo.pdf

秀英体
大日本印刷の前身、秀英舎の時代
から開発が続く
明治45年に初号～八号の活字が
揃った
重厚さとしなやかな強さ
左の例は秀英初号明朝

築地体
東京築地活版製造所で開発
かな書体
角寸法 14.76mm を最大まで使っ
たデザイン
柔らかく、力強い筆致
右の例は築地体初号仮名

特に明朝体を制作するときは、
この2書体に対する立ち位置を意識すると良いかも

和文書体デザインのテクニック
1. 角立て
2. 食い込み
3. ふところ
4. ポゲンドルフ錯視
5. フィック錯視
視覚調整

1. 角立て
元は写植のテクニック
写植は角が甘く出力されるため、
メリハリを維持するための手法
デジタルフォントでも、メリハリ
を付ける手段として採用
デジタルフォントでは角が立ちす
ぎるという問題も

2. 食い込み
これも写植で多用された
多数の線が交差するところは、黒
く潰れがち
谷の部分を強く食い込ませること
で、黒みを低減

3. ふところの調整
モダン／レトロ：どうやって違いを出す？
ふところ＝画と画が構成している内側の空間
モダンレトロ
広狭ふところ

問題
水平方向の線分と鉛直方向の線
分、どちらが長い？

問題
解答
どちらも同じ長さ

問題
解答
どちらも同じ長さ
……鉛直方向が長く見える

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

問題 1
左下の線分を伸ばすと1~4のどれに
対応する？

問題 1
左下の線分を伸ばすと1~4のどれに
対応する？
解答
2番

問題 2
左下の線分と滑らかに繋がるように
見せるためには、1~4のどれを選ぶ
べきか？

問題 2
左下の線分と滑らかに繋がるように
見せるためには、1~4のどれを選ぶ
べきか？
解答
3番
真実 ≪ 事実

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

視覚調整とは
人間の視覚は、想像以上に不正確
タイプフェイスは人間に眺められるもの
数値的には正確だが、眺めると違和感 → ✕
数値的には不正確だが、眺めても自然 → ○
とにかく、「どう見えるか」が重要
眺めたときの違和感を減らす調整＝視覚調整

Section
Typeface Design の基本
欧文書体編
6

欧文書体デザインのテクニック Part 1
1. 基準線の飛び出し
2. 合字
3. クロソイド曲線
視覚調整

1. 基準線の飛び出し
曲線や鋭利な角は基準線を少し飛び出す
Xハイト・ベースライン・キャップラインいずれも当てはまる
大文字も同様

2. 合字
f と i の頭が近すぎて窮屈
f, f, i の横線に微妙な間隙
合字なし合字あり
3文字 f, f, i を1つのグリフに
まとめてしまう

3. クロソイド曲線とは
曲率半径 R
クロソイド始点からの曲線長 L
R L =（一定）
原点から進むほど曲率半径が小
さくなっていく
https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%82%BD%E3%82%A4%E3%83%89%E6%9B%B2%E7%B7%9A#/media/File:Clothoid_curve.svg

3. クロソイド曲線を意識した例
曲がり方が不自然曲がり方が自然
真円を用いたクロソイドを意識した

3. クロソイド曲線を意識すべし
厳密なクロソイド曲線である必要は無い
曲率半径を徐々に変えていくことが重要
「とりあえず円くっつけといたろｗｗ」ダメ、ゼッタイ。
ダメ、ゼッタイ。を実践した例
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/GU_logo.svg/600px-GU_logo.svg.png

3. 真円＋直線はなぜ不自然か
曲率半径＋∞
曲率半径 R
曲率半径の値が連続でないから

4. フィック錯視への対策
和文と同様
横線は若干細くする

線がずれて見える
交差部が厚ぼったい
線が繋がった
交差部がすっきり

2つを重ねた
ポゲンドルフ錯視対策のため、少し
ずらしている
食い込み処理も同時に行なっている
調整の程度は目で見て確認

本日はお疲れ様でした
次回：未定（9月頃？）
夏休みはフォントを作るぞ―！！

KMC Font Project 1 - フォント製作・Typeface Designの基本

More Related Content

What's hot (15)

Similar to KMC Font Project 1 - フォント製作・Typeface Designの基本 (20)

KMC Font Project 1 - フォント製作・Typeface Designの基本

Editor's Notes