前：https://www.slideshare.net/kmaztani/kmc-font-project-2 フリーのフォントエディタ FontForge を用いた欧文書体製作。 ソフト導入から実際にフォントファイルを出力するまでを扱います。 京大マイコンクラブ(KMC) KMCフォントプロジェクト第3回の内容

1. KMC Font Project
2016 #3
2016.7.31 Sun. kmc-id: maztani
FontForgeで欧文書体製作

2. 事前準備
 FontForgeの導入
 演習用ファイルとスライドをダウ
ンロード
○ Slack #moji にリンクあります

3. FontForgeをDL・インストール
https://fontforge.github.io/

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

5. 近況報告
 モリサワのフォントスイッチプロジェ
クトさんから「type-in&font-in」と
「MORISAWA FONT DICTIONARY」を
頂いた。
 ありがとうございます

6. Section
FontForge
1

7. FontForgeをDL・インストール
https://fontforge.github.io/

8. FontForgeの起動
 FontForgeを起動
 《フォントを開く》画面で、
〈新規〉をクリック

9. フォントビュー
 FontForgeのメインの画面であるフォントビュー
 現時点でグリフを登録してないので、×印がついている

10. Section
フォント情報の設定
2

11. フォント情報
 エレメント ＞ フォント情報
 OpenType フォントが持つ
様々な機能は、ここで設定
できる

12. PostScript Names
 フォントの名前等は、PS Names で設定する
○ フォント名 ：PostScript名のこと。スペース禁止。
フォントのウェイト等をハイフンでつなげて入力。
例）HogeSans-LightItalic
○ ファミリー名 ：フォントファミリーの名前。
例）Hoge Sans
○ 表示用の名前 ：アプリケーション等で表示されるフォントの名前。
例）Hoge Sans-Light Italic

13. 【演習01】フォント名を設定する
フォント名／ファミリー名／表示用の名前 を
適切に入力してください
〈条件〉
○ ファミリー名は各自で自由に決める
○ ウェイトはBold

14. 【演習01】フォント名を設定する
フォント名／ファミリー名／表示用の名前 を
適切に入力してください
〈条件〉
○ ファミリー名は各自で自由に決める
○ ウェイトはBold
【正解例】HogeFont-Bold／Hoge Font／Hoge Font-Bold

15. Ctrl+S / ⌘+S
 保存しましょう
 保存形式は「.sfd」で、FontForge用の作業ファイルです
 sfdファイルを直接クリックしてもFontForgeがうまく立ち上が
らなかったりするので、先にFontForgeを起動してから作業
ファイルを選択しましょう

16. Section
グリフを描く
3

17. グリフ編集ウィンドウ（アウトラインウィンドウ）
 編集したいグリフの上で
ダブルクリック
 おなじみのベジエ曲線が
編集できる
 しかし、FontForge上で
編集するのは面倒……

18. グリフ編集ウィンドウ
SVGを取り込むのが簡単
FontForgeの初期設定ではベー
スラインは下から200px
このベースラインに合わせた、
1000px×1000pxのプレーン
SVGを用意する
800px
200px
1000px

19. SVGの取り込み
 取り込むグリフの編集ウィンドウで、
ファイル＞取り込み
 フォーマットを〈画像〉から〈SVG〉
に変更する
 SVGファイルを選択し、〈取り込み〉
をクリック

20. 演習 SVGの取り込み
 配布した ”K”, “M”, “C”, “f”, “i”
のSVGファイルを適切な場所に取
り込みましょう
 ファイル名は、「Glyph_K.svg」
などです
 「Glyph_f-i.svg」は後で取り込み
ます

21. 制御点の丸め
 OpenTypeフォントでは、制御点（ノード・ハンドル）の座標
は整数と決まっている
○ OpenTypeだけではなく、他フォーマットでも整数である
 SVGを取り込んだだけでは、座標が小数になっている場合があ
るので、整数に丸める必要がある

22. 制御点の丸め
 グリフ編集ウィンドウで Ctrl-A 全選択
 エレメント ＞ 座標を丸める ＞ 整数に

23. Section
サイドベアリング調整
4

24. サイドベアリングとは
 セット幅とセットの差のこと
 つまり、文字の左右にある余白
 適切に設定することで、可読性を
確保したり、書体の雰囲気を作る
ことができる
サイドベアリングを設定しよう ▶

25. メトリックウィンドウを開く
 表示＞メトリックウィンドウ
 メトリックウィンドウの機能
○ 文章を打ったときの外観が確認できる
○ 下部入力フィールドでサイドベアリングとペアカーニング（後述）を
設定できる

26. メトリックウィンドウ

27. サイドベアリングの確認
 上部入力窓に”K”と入力
 下部のセルに左右のサイドベアリングが表示される

28. サイドベアリングの編集方法
 サイドベアリングの幅は、数値で入力する
○ 詰めるとき：負 広げるとき：正
 設定したい文字をメトリックウィンドウに入力
 メトリックウィンドウ下部に表示された左右サイドベアリン
グセルに数値を入力

29. サイドベアリングの修正
 初期のサイドベアリングは大きいので、セルの数字を変更
 左90, 右10 くらいに設定する

30. サイドベアリング設定のコツ
大 中 小

31. サイドベアリングの修正
 “KMCfi” と入力すると、K以外の字幅がおかしい
 適切な値に修正してください

32. サイドベアリングの修正
【解答例】M(90, 90), C(60, 60), f(50, 40), i(60, 60)

33. Section
OpenTypeの仕組み
5

34. OpenTypeの仕組み
 実際にフォントを作りながら進行してきましたが、ここで少
し座学に戻ります
 フォントを作るにあたって、OpenTypeの仕組みを多少理解し
ておくと、自分が何の作業をしているのかよく分かる
 というわけで、簡単にOpenTypeとは何か説明します

35. OpenType フォントファイルのはなし
 OpenTypeFontでは様々な情報が複数のテーブルに格納される
○ グリフ・文字コードとの対応・名前・メトリクス・位置情報 …
 テーブルには4文字のタグが割り振られている
○ ‘BASE’, ‘CFF’, ‘DSIG’, ‘GSUB’, ‘GPOS’, ‘OS/2’, ‘cmap’, ‘name’, …
 (OpenType)フォントファイルとは、非常に大雑把に言うと、
情報が格納された種々のテーブルの集まりである

36. OpenTypeテーブルの例
Tag Name 説明
BASE Baseline data ベースラインなどの位置
CFF Compact Font Format 1.0 グリフデータ
DSIG Digital signature デジタル署名
GDEF Glyph definition data グリフの種別を定義
GSUB Glyph substitution data グリフ置換
GPOS Glyph positioning data グリフ位置
OS/2 OS/2 and Windows specific metrics Windows用メトリクスデータ
cmap Character to glyph mapping 文字コードの割り当て

37. OpenType Layout Table とは
 OpenTypeをOpenTypeたらしめているのがOTLテーブル
＝TrueTypeには無かったテーブル
 グリフを置換しポジショニングするための情報を提供する
○ だからレイアウトテーブルと呼ばれる
 GSUB, GPOS, GDEF, BASE, JSTF の5つのテーブルを指す
 今回注目するのは GSUB と GPOS のみ

38. OTLテーブルの構成
 OTLテーブルのデータは、
スクリプト (Script)
言語システム (Language System)
フィーチャー (Feature)
ルックアップ (Lookup)
によって構成される

39. OTLテーブルの構成要素 ①
 Script
○ １つ以上の言語を表現するために使われる関連のあるグリフの集合
○ OTLテーブルにおいてトップレベルに定義される
○ e.g. ラテン文字 ： 英語、ドイツ語、フランス語などに使用
漢字 ： 中国語、日本語などに使用
コレ→ ひらがな ： 日本語でのみ使用
 Language System
○ その名の通り、言語のこと

40. OTLテーブルの構成要素 ②
 Feature
○ 言語を表すためのグリフの使用方法のルール
▶ 英語 ：ff は合字に置換するルール＝’liga’ フィーチャー
▶ 日本語：縦書き時は専用グリフに置換するルール＝’vert’ フィーチャー
○ FeatureはLookupを使って定義される
 Lookup
○ グリフの置換・ポジショニングを適用するグリフ・グリフに適用する
操作の種類・適用された結果 などを定義する
○ 具体的な情報をここに記述するということ

41. OTLテーブル構造の図解
Script
Language system
Feature
lookup
lookup
Language system
Feature
Lookup
Feature
Lookup
lookup
OpenType Layout Table

42. GSUBテーブルとGPOSテーブル
 今回扱うOTLテーブルは ’GSUB’ と ’GPOS’
 GSUB
○ Glyph SUBstitution = グリフ置換 のためのテーブル
○ e.g. ff や fi を合字に置換する機能
 GPOS
○ Glyph POSitioning = グリフ位置 のためのテーブル
○ e.g. ペアカーニング

43. ペアカーニング情報の格納場所
 では、ペアカーニング情報はOTLテーブル内ツリー構造のどこ
に格納されるか
〈ヒント〉
○ ポジショニングの情報である
○ ラテン文字・英語の機能である
○ カーニングというルールを実装するものである

44. ペアカーニング情報の格納場所
latn
ラテン文字
dflt
デフォルト言語
kern
Kerning
Lookup
-
GPOS
 右図の Lookup に
○ カーニングする2つのグリフ
○ 詰め具合
を記述する
▶ ペアカーニング機能が実現

45. Section
ペアカーニング設定
6

46. ペアカーニングとは
 特定の2文字間で働くカーニング
○ e.g. “Ty”, “AV”
 OpenTypeフォントの機能の一つ
 文字を入力するだけで、自動的にカーニングが効く

47. 前準備
 FontForgeでは、標準でペア
カーニング設定できる状態に
なっていない
 ペアカーニング情報を記述する
Lookupを新規作成する
latn
ラテン文字
dflt
デフォルト言語
kern
Kerning
Lookup
-
GPOS

48. ペアカーニング用 Lookup を作成
 エレメント ＞ フォント情報
 Lookups（左ペイン）>
GPOS（タブ）
 Add Lookup をクリック

49. ペアカーニング用 Lookup を作成
 Lookupウィンドウが表示される
1. 種類：Pair Position (kerning) に変更
2. 「機能」の<New>をクリックして、
空白に”kern”と入力
3. 「用字系と言語」は自動で入力される
4. OK をクリック

50. ペアカーニング用 Lookup を作成
 これでScript, Language System,
Feature が設定できたことになる
 機能 ＝Feature : kern
 用字系 ＝Script : latn
 言語 ＝Language System : dflt

51. ペアカーニング用 Lookup を作成
 Lookup Nameは自動で入力され、
その名前がGPOS欄に追加される
 Featureまでは設定できたが、肝心
のLookupが未設定
 追加された名前を選択して、Add
Subtable をクリック

52. ペアカーニング用 Lookup を作成
 Subtable の名前を何にするか聞か
れる
 名前は何でも良いが、分かりやすい
ように ”Kerning-1” に変更する
 OK をクリック

53. ペアカーニング用 Lookup を作成
 Kerning format ウィンドウが表示
 Kern pair を選択：First part に ”K”,
Second part に “C” を選択
○ 別になんでも良い
 OKをクリック

54. ペアカーニング用 Lookup を作成
 Lookup Subtable が表示
 ようやく Lookup を作成できた
 KC間でペアカーニングが設定された
ことが確認できる
 OKをクリック

55. ペアカーニング設定の仕方
 メトリックウィンドウで設定できる
 今までの前準備で、メトリックウィンドウ右上のドロップダ
ウンリストが、 [Kerning-1] になっていることを確認
 ペアカーニングを設定したい2文字を入力
 メトリックウィンドウ下部のカーニングセルにツメ具合を数
値で入力
○ サイドベアリングの場合と同様

56. ペアカーニングを編集
 メトリックウィンドウで ”KCM”
 KC間のペアカーニングが強すぎる
 下部カーニングセルの値を変更し
て、適切に修正してください

57. ペアカーニングを編集
 メトリックウィンドウで ”KCM”
 KC間のペアカーニングが強すぎる
 下部カーニングセルの値を変更し
て、適切に修正してください
【解答例】-80

58. Section
リガチャー設定
7

59. リガチャーとは（復習）
 複数の文字を合成して一文字にしたもの
 現代の欧文組版においては、特定文字の組み合わせの際に、
可読性向上を狙って結合させた文字を指す
http://www.typography.com/images/fontFeatureImages/hoeflertext/htxt_ligatures.png

60. リガチャー用グリフの取り込み
 リガチャー用に残していた「Glyph_f-i.svg」を取り込む
 フォントビューで ”fi” グリフを探すために、
エンコーディング ＞ エンコーディング変換 ＞ Adobe標準
に変更する
 “fi” のグリフ編集ウィンドウを開く
 SVGファイルを取り込む

61. リガチャー用グリフの取り込み
 取り込めたら、座標を整数に丸める
 メトリックウィンドウを開いて、サイドベアリングも適切に
設定する
 フォントビューで ”fi” を選択した状態で、メトリックウィン
ドウを開けば良い
 メトリックウィンドウ下部のセルに適当な数値を入力

62. リガチャー用Lookupを作成
 ペアカーニングの場合と同様に作成できる
〈ヒント〉
 リガチャーは「グリフの置換」
 リガチャーのフィーチャータグは”liga”
 Subtable Name は ”Ligature-1” とかでOK

63. リガチャー用Lookupを作成
【解答】
 フォント情報ウィンドウ ＞ Lookups ＞ GSUB
 Add Lookup をクリック
 Lookupウィンドウが表示される
 種類：「合字への置換」に変更
 「機能」の<New>をクリックして、空白に”liga”と入力
 「用字系と言語」は自動で入力される
 OK をクリック

64. リガチャー用Lookupを作成
 GSUB欄に自動で追加された名前を選択する
 Add subtable をクリック
 Subtable名を ”‘liga’ 標準の合字 in ラテン文字 lookup 0-1” か
ら”Ligature-1”に変更
 OKをクリック

65. Lookupが作成できた
 フォント情報ウィンドウの GSUB
タブに ”Ligature-1” という
Subtable が追加されている
 これを選択して、Edit Data をク
リック

66. リガチャー用Lookupの編集
 Subtable 編集ウィンドウが開く
 <New>をクリックし、以下を入力
Ligature Glyph Name: fi
→ 自動的に ”fi (fi)” に修正される
Source Glyph Names: f i
（※間に半角スペース）
 OKをクリック

67. リガチャーが動作するか確認
 これでリガチャーの設定は完了
 メトリックウィンドウを開き、 ”fiif” と入力する
 設定が正しければ、”fi” のみが合字へと変換されるはず

68. Section
フォントの出力
8

69. フォント出力前の下処理
 フォントを出力する前に、複数のクローズドパスで構成され
たグリフを、1つのパスに結合する
 フォントビューですべてのグリフを選択(Ctrl+a)した上で、
エレメント ＞ 重複処理 ＞ 重なり合う図形を結合

70. フォント出力前の下処理

71. フォントを出力しよう
 グリフとOpenTypeの機能を設定できたら、残すはフォントの
出力のみ
 FontForge は TrueType と OpenType の両方出力できるので、
間違えないように

72. フォント出力ダイアログ
 ファイル ＞ フォントの出力
 フォントの種類を
「OpenType(CFF)」に変更する
 「生成(G)」で出力！

73. 問題点
 問題点が表示される場合がある
 設定していない情報があるから
 通常使用する分には大丈夫なので無視します

74. 完成
めでたい

75. 使えるか確認
 インストールしてWordで入力してみる
○ Nexus Font などのフォント管理ツールを使うのが便利
 「任意の合字」を表示する設定に変えておきましょう
Nexus Font
http://www.xiles.net/

76. フォント作ってみてどうでしたか？
 これであなたもフォントが作れる
○ すべてのグリフに対して同様の作業を繰り返すだけ
○ かかる時間と労力には覚悟しましょう
 和文の縦書き処理は複雑なので、今回は扱わなかった
 他にも様々なOpenTypeの機能がある
○ 気になったら調べてみてください

77. 参考文献
 OpenType Specification (Microsoft)
○ https://www.microsoft.com/typography/otspec/otff.htm
○ 2016/10/19アクセス
 vanillaの日記『OpenTypeレイアウトへの道』
○ http://vanillasky-room.cocolog-nifty.com/blog/2008/07/opentype-
4b7d.html
○ 2016/10/19アクセス

78. お疲れ様でした