Web サイトに使われているフォントが気になることありませんか？僕はあります。そんな時に何のフォントが使われているか調べる方法です。

Fonts Ninja

今回は Chrome 拡張機能である Fonts Ninja を使用します。

これは今回ように Web サイトに使われている Web フォントを知りたい時に活用できます。

機能はフォント・タイポグラフィ情報の取得と試し打ちの2つあります。

情報の取得

拡張機能をインストールし、追加されたアイコンをクリックすると、そのページで使われているフォントが一覧で表示されます。

さらに、マウスを特定の文字列にもっていくと、その箇所で使われているフォントやサイズ、色、行間などタイポグラフィ情報が表示されます。

試し打ち

取得した Web フォントを試し打ち（試し書き）することもできます。

表示された、フォント一覧の部分をクリックすると、そのまま文字をタイプすることができます。

欠点

この Fonts Ninja を使っても、全てのフォントが正確に表示されるわけではないようです。

CSS 以外からも情報を取ってきているようですが、限界があります。あくまで参考程度に使うと良いのかもしれません。

おわりに

海外の企業のサイトとかだと、オリジナルの書体とか作っていて見るのも楽しいですね。日本でもこれぐらい自由になれば楽しいのに。

新しく、フォントを作りました。かわいいやつです。

フォントについて

ネズミに噛まれたチーズをイメージしたフォントです。子年なので。

元となった M+ 1p Black と重ねて使うと、より読みやすくチーズ感をますことができます。お試しください。

素の文字見本はこちらです。

ライセンス

ダウンロードページにも書いてありますが、以下のようになっています。

• M+ FONTSを使用しています
• 個人/商用ともに利用可能です
• 利用報告の必要はありません
• 再配布（Webフォントを含む）は認めておりません
• 改変は認めておりません
• ダウンロード/使用について、いかなる保証も行いません
• 発生したいかなる損害についても、提供側は責任を負いません

使用する場合は必ず守ってください。

ダウンロードページ

こちらから。

おまけ話

前回の カクカクゴシック の時も書いたので、ちょっとだけ、与太話を書きます。

このチーズゴシックも「M+ FONTS」を元として作成しています。つまり、自分で字形をいちいちデザインしていません。強いて言えば穴の位置を決めたぐらいです。

今回もプログラムで一括でグリフに変形（穴のくり抜き）をかけて作成しています。

年明けて、子年だな〜って思ってからノリと勢いで2 — 3時間ほどで作ったフォントです。仕様が微妙なところがあっても多めにみてください。

おわりに

作り終わってから M+ 1p Black と合わせるとそれっぽいと気付いたんですが、最初からカラーフォントとかで作れたら面白かったかもしれませんね。

文字の情報を調べるための Slack アプリを作ったので、どこから情報を持ってきたか書いておこうと思います。

ちなみに、作ったのはこんな感じのアプリです（一般公開はしてません）。

Adobe-Japan1

Adobe-Japan1 は GitHub のリポジトリ があり、そこにいろいろな情報があります。

わかりやすいもので言えば Adobe-Japan1-7_ordering.txt には CID、カテゴリ、サブカテゴリ、グリフ名がタブ区切りで記載されています。

他にも aj17-kanji.txt には漢字に関する情報がたくさん書いてあります。

CMap リソース

CID と Unicode を結びつける CMap リソースも GitHub のリポジトリ で公開されています。

例えば Adobe-Japan1-7 と互換性のある UniJIS2004-UTF32-H など Adobe-Japan1 に限らず様々な CMap リソースが公開されています。

書式が CSV や TSV のような単純な形式ではないためぱっと見ややこしそうに見えます。ファイル仕様 も公開されているので読み解いてみるのも面白いかもしれません。

Glyphs 関連

Glyphs3 も発表され、人気も上がってるように見える Glyphs にも Adobe-Japan1 の情報が含まれています。

/Applications/Glyphs.app/Contents/PlugIns/OTF.glyphsFileFormat/Contents/Resources/MapFileAdobe-Japan1.txt に CID と Glyphs 上のグリフ名（nicename）等との対応が書かれています。

また、それぞれのグリフの詳細は /Applications/Glyphs.app/Contents/Frameworks/GlyphsCore.framework/Versions/A/Resources/GlyphData.xml から辿れます。

ちなみに、この GlyphData.xml は自分でカスタマイズして、自由な設定に変更 することができます。

Unicode Character Name

Unicode が割り当てられている文字はには名前がついています。これは Unicode® Character Name Index を使用すると調べられます。

おわりに

文字のことを知りたくなったら参考にしてみてください。

12 月 1 日に書いてますがアドベントカレンダーでもなんでもないただの記事です。

Glyphs 形式のフォントと UFO のフォントの仕様が違くて何かと扱いづらいという話です。

Glyphs 形式

Glyphs を使ったことがある人はわかると思いますが、新しいグリフを作る時には、フォントにグリフを追加します。

これだけ見ると、至極当然のように思えます。では、新しく同じ文字のボールドを作りたいときはどうすればいいでしょう？

フォント直下に同じ文字のレギュラーとボールドが存在していてはウエイト間の関係性が薄れてしまいます。

そのため Glyphs では最初に新しいグリフを追加した際にグリフという概念の元にレギュラーのレイヤーが自動で追加されます。そしてグリフ名や Unicode などの文字情報はグリフに納められ、字形はレイヤーに納められるのです。

ボールドを追加したい時には、このグリフの元にボールドという新しいレイヤーを追加すれば良いのです。

つまり、階層構造は以下のようになります。

Font
┣ Glyph01
┃ ┣ Layer01
┃ ┗ Layer02
┗ Glyph02
  ┣ Layer01
  ┣ Layer02
  ┗ Layer03

ここではあえて Glyph01 と Glyph02 で持っているレイヤーが異なる例を出しましたが、このようなことができてしまう仕様が Glyphs 形式です。

これは次に紹介する UFO との決定的な違いになるので覚えておいてください。

UFO

UFO は特定のアプリの形式などではなく XML を用いた仕様です。

UFO でフォントを 1 つのフォルダとして表現されます。そして、フォント直下に来るのはレイヤーです。このレイヤーもまたフォルダとして表現されます。ではグリフはというと、レイヤーのフォルダの中に 1 文字 1 文字がファイルとして保存されています。

なのでレイヤーを追加したいときはフォルダを、グリフを追加したい時には、追加したいレイヤーにファイルを追加します。

つまり、階層構造は以下のようになります。

Font
┣ Layer01
┃ ┣ Glyph01
┃ ┗ Glyph02
┗ Layer02
  ┣ Glyph01
  ┣ Glyph02
  ┗ Glyph03

レイヤーごとに持っているグリフ数が異なってしまいますね。UFO ではこのようなことがありえてしまいます。

比較

階層構造

それぞれの階層構造を見てみましょう。

Glyphs          UFO

Font            Font
┣ Glyph01       ┣ Layer01
┃ ┣ Layer01     ┃ ┣ Glyph01
┃ ┗ Layer02     ┃ ┗ Glyph02
┗ Glyph02       ┗ Layer02
  ┣ Layer01       ┣ Glyph01
  ┣ Layer02       ┣ Glyph02
  ┗ Layer03       ┗ Glyph03

形は似てますが、レイヤーとグリフの関係性が真逆です。これが原因で相互の絶妙な扱いづらさが生じてしまいます。

もちろん Glyphs の機能でも UFO は扱えますし Python のライブラリでも相互変化をできるものがあります。ただ、この構造の違いにより扱いやすい状態での互換は取れません。

どっちがいいのか

これは難しい話です。どちらにも良いところと悪いところがあります。例えば OTF などのフォントファイルは各ウエイトごとにファイルがあってそれぞれグリフがあるので UFO の階層構造は直感的な気がします。しかし UFO では共通する文字情報があっても、レイヤーごとに重複して持たなければなりません。

そう考えると Glyphs の形式は効率が良さそうです。ただ文字ごとに持っているレイヤーが異なったりフォントファイルと構造が違うため直感に反する気がします。

どっちもどっちですね。

おわりに

個人的には UFO の形式の方が好きなのですが Glyphs の構造の思想もすごくよくわかるので難しいところです。使ったことはないですけどバーチャルマスターとかは Glyphs の構造ならではな気がします。

フォント会社にはフォントエンジニアまたはタイプエンジニアという職種が存在します。ただ、この職種について調べても驚くぐらい情報が出てこないので、何者なのかまとめたいと思います。

フォントエンジニアなのかタイプエンジニアなのか

僕的にはどっちでも良いと思っています。ただなんとなく文字周りの人には「タイプエンジニア」と伝えて、そうでない人には「フォントエンジニア」といってる気がします。

タイプは書体周りの様々なことを指しています。なので比較的広い範囲を表現できる代わりに「タイプ」という一般の人には伝わりにくい表現となっています。

それに比べると、フォントエンジニアという言葉の方がなんとなく、何をやってるかはわからなくても意味はわかりそうです。

普通にデベロッパーというところもあります。色々ですね。

ちなみに、デザイナーもいろいろ呼ばれ方があります。

どれかしらに定着して欲しいですね。この記事ではこれ以降フォントエンジニアで書いていきます。

結局、何者なのか

とりあえずググってみましょう。普通、職種名でググると様々な情報が出てくるはずですがどうでしょうか。

"タイプエンジニア" OR "フォントエンジニア"

想定した内容は何も出てきません…

これが悲しい現状です。

試しに他の職種でも検索してみましょう。

"サーバーサイドエンジニア" OR "バックエンドエンジニア"

「○○とは？」「○○になるために必要な勉強」「○○の基礎知識」といろんな情報が出てきて羨ましい限りです。

つくづくフォントエンジニアのマイナーさを感じさせられます。

実際フォントエンジニアは何をやるか

みなさん、意識しないと思いますが、フォントも立派な「ソフトウェア」です。

しかし、デザイナーさんがデザインした「書体」はそのままでは「フォント」として使えません。

そこでエンジニアの登場です。この「書体」からデバイスで使える「フォント」にすることがフォントエンジニアの仕事です。

それだけ？と思うかもしれませんが、フォントというソフトウェアは実は奥が深いのです。僕もまだまだよくわかってません。勉強しないとですね。

必要な知識

僕がやっていて重要だと思う項目を4つあげます（偏見の塊です）。

• OpenType
• UFO
• ベジェ曲線
• Python

この辺がなんとなくわかると良い気がします。これらについては他の記事でちょくちょく書いていたりするので、気になったら見てみてください。

フォントエンジニアになるには

ググっても求人なんて全くといっていいほど出てこないので、困り物です。その割に各社エンジニアを欲しがっているイメージがあります。謎です。

もし、知り合いにフォント関係の会社で働いてる人がいたら聞くのが一番早いですね。いなければ、文字周りのイベントとか行けば知り合えるかもしれません。僕にいきなりDMとかでもいいと思います笑。

とにかく、募集もないのでなり方もわからない現状は辛いですね…

おわりに

情報の少ないフォントエンジニアですが、これから増えてくれれば僕的にも業界的にもいいんじゃないでしょうか。

フォントをPythonから扱うときに便利なライブラリ集です。フォントの見かけばかり気にせず、たまにはフォントファイル自体をいじってみませんか？

一覧

変換系

ufo2ft

UFOからOTFを作ることのできるライブラリです。

ufo2fdk

UFOからAFDKOへの変換ライブラリです。

UFO Extractor

OTF、TTFとかのバイナリからUFOへの変換ライブラリです。

fontmake

Glyphs、UFOをOTF、TTFにするライブラリです。

AFDKO

有名なやつ。

編集系

fontParts

比較的新しいUFO編集ライブラリ。

defcon

UFOのフォントオブジェクトを諸々定義してくれているライブラリです。

fonttools

TrueType、OpenTypeをいじるためのライブラリです。以前紹介したTTXも含まれています。

glyphsLib

Glyphsファイルを扱うためのライブラリです。内部的にはUFOを使用します。

ufoLib2

UFOを扱えるライブラリです。まだ実験段階。

その他

ttfautohint-py

TTFの自動ヒンティングライブラリです。

fontbakery

品質チェック用のライブラリです。

kernDump

カーニングの諸々。

おわりに

こうして並べてみると結構あるんですね。皆さんもフォントをいじってみてください。

文字周りの国際会議ATypIの2019年大会が日本で開かれました。そこで発表してきたので忘れないうちに感想でも書いておこうと思います。

発表

動画

YouTubeで晒されています。

資料

こちら にアップロードしています。

内容

動画か資料を見ていただければ、わかると思いますが書体（またはフォント）を作る上でどのような場面で機械学習を活かせるかを検討しています。ここでは、大きく分けて「自動デザイン」と「品質保証」に活かせるのでは？としています。

自動デザインでは、ディープラーニング（特にGAN、pix2pix）の技術を用いて、「あ」の1文字をデザインすれば他の文字を作ってくれるというものを発表しました。これは僕の学部時代の研究をもとにしたものであり、卒論もこのテーマで書きました。

品質保証では、デザインのチェックを機械学習を使って行うということを発表しました。文字ごとにデザインのクオリティーがばらついていてはいけません。そこで、全ての文字を一定のクオリティーに保てるように機械でチェックを行えないか？という検討をしています。

会場にいた多くの人は（タイプ）デザイナだったため、技術的な詳細は薄めにし、嘘のない範囲でわかりやすく書体開発における機械学習の現状をお話ししたつもりです。

エンジニアの人には少し物足りない感じになってしまったかもしれません。そういう人はこちらの学会での発表資料はもっと詳しく書いているのでご覧ください。

ATypIについて

参加の経緯

国際会議で毎年世界のどこかで大会を開いているのですが、今年偶然にも日本、しかも東京ととても近いところで開催だったので、ラッキーでした。しかも今回の大会に限り、日本語と英語の2ヶ国語開催だったので発表も日本語でできます！

思い出すと、発表の応募をしたのは2月でインターン先の人に応募してみませんかと言われたのがきっかけです。そこから音沙汰もなく、通らなかったのかと思っていたら、なんと6月下旬に参加決定となりました（もともと4月とか言われてた気がするのでだいぶ遅れてた？）。

そこから、今回の大会では同時通訳がつく発表だったので事前に原稿を送る必要がありました。そのため、急いで資料と原稿を作り、翻訳をお願いしました。翻訳を担当してくれた方に感謝します。

気になった発表

いくつか気になった発表の感想を1行ずつ書いておこうと思います。エンジニアリングよりです。

• 源ノ角ゴシック バリアブルコンセプトフォント
  やっぱり日本語バリアブルフォントは辛いな。という話。

• 建築のようにハングルを作る：バリアブルフォントの活用
  ハングルってこんな感じに作っていくのか。というのがわかった。

• Type. My Life.
  モリサワはそうめんの会社だった。（嘘）

• ツールで語るヒラギノ開発の歴史
  自社開発ツールをこんだけ作るの大変そう。

• 漸進的フォント補完技術の進捗状況
  日本語のWebフォントもっと便利になってくれーーー。

当日の様子

日本人の方が外国人に比べ少なく3:7か4:6ぐらいの印象です。合わせて1日あたり300~400人ぐらいはいたと思います。

デザイナーの人が圧倒的に多くて8~9割ぐらいがデザイナーだったんじゃないかなと。

期間中、いろんな人とお話しできたり、発表後は様々な感想をいただけたので、発表してよかったなと思いました。

大会後には別会場でAdobe主催のパーティーがあり、写真がVJの素材にされたのも良い思い出です。あと音楽が流れてると外国の方は踊るんですね。

ボランティアスタッフが多いこともあってか、少し不手際な部分もあったように感じますが、総じて参加してよかったと思えました。

おわりに

来年はパリで開催だそうです。主催はワインを飲みながら楽しそうに参加を呼びかけていました。僕は行きませんが、お近くに用事のある人は行ってみると良いのではないでしょうか笑。

フォントを作ったので、試しにこのブログで配布してみようと思います。

フォントについて

4方向にそれぞれすぼまったスタイルがあるフォントです。スタイル名はそれぞれ細くなっている方向を指して「上」「下」「左」「右」の4つとなっています。

シュッとした感じで変な形の割には意外と使いやすいんじゃないかなって勝手に思ってます。

ライセンス

ダウンロードページにも書いてありますが、以下のようになっています。

• M+ FONTSを使用しています
• 個人/商用ともに利用可能です
• 利用報告の必要はありません
• 再配布（Webフォントを含む）は認めておりません
• 改変は認めておりません
• ダウンロード/使用について、いかなる保証も行いません
• 発生したいかなる損害についても、提供側は責任を負いません

使用する場合は必ず守ってください。

ダウンロードページ

こちらから。

おまけ話

せっかくこのブログなので、どうやって作ったかなど技術的な話をしようと思います。

自分でパスを引かないフォント作り

今回のフォント作りは一度も自分でパスを引きませんでした。フォントの確認にGlyphsは使いましたが、そこでもパスは引いていません。

全てプログラムで作成しました。つまり線が描けなくてもコードが書ければフォントが作れるんです！

では、どうやったか順に見ていきましょう。

仕様

元にしている「M+ FONTS」はTTFですが、このフォントでは（PostScript 形式の）OTFに変換してからベースとして使用しています。そのため、このフォントはOpenTypeのフォントです。

登録されているグリフは「M+ FONTS」から足しても引いてもいないので、「M+ FONTS」と同じものです。

グリフの加工

グリフの加工はPythonのスクリプトを作成し、変形を行なっています。

フォントをPythonで扱うにはOpenTypeのままでは少し都合が悪いのでUFO形式に変換してから使用します。UFO形式にしたフォントのグリフに一括で変換をかけるのですが、今回は台形のような変換なのでちょっとややこしい変換を行っています。

普通、移動や回転、拡大縮小などの変形であれば、アフィン変換という計算を用います。こちらであれば、Pythonのスクリプト上でもグリフに対して簡単に計算をしてくれます。しかし、台形にしたいという変換では、アフィン変換は使えません。

そのため、各アンカーポイントについてアフィン変換ではなく、自分で作った行列の計算を行います。今回は台形という比較的簡単な形状に合わせた変換なので、あまり複雑にはなりませんでしたが、波打った変形などでは式がどんどん複雑になると思います。

UFOからOTFに

こちらもPythonから行っています。Glyphsでもできることですが、正直に言うとGlyphsよくわかってなく、どれぐらいちゃんと生成されるかわからなかったのでプログラムで出力しました。そっちの方が僕的には楽だったんです。

OTFを綺麗に

出力したOTFのままでもよかったのですが、フォント名の設定などが不十分な点がありました。そこでOTFから一旦TTXに変換して、TTXを手書きします。笑

今回はnameテーブルに日本語の表記を足しました。なので、フォント名やスタイル名などソフトが対応していれば、ちゃんと日本語で「カクカクゴシック 上」みたいな感じで表示されると思います。

おわりに

せっかくエンジニアなので、それっぽい話を最後に書きましたが、とりあえずフォント使ってみてください！

フォントが好きであれば、フォントの中身も気になりますよね。今回はフォントの中身を見る方法を紹介します。主にエンジニアに向けて。

OpenTypeとTrueType

よく見るフォント形式ですね。でもこれらはバイナリなので人には読めません。そのため人が読める形式に変換する必要があります。

ここではTTXとUFOの2形式を紹介します。

TTX

概要

TTXはフォントを扱うライブラリであるfontToolsに含まれる、OpenTypeとTrueTypeに互換のあるファイル形式兼ツールです。

TTXはXML形式で書かれているので、人でも読むことができます。

インストール

TTXはfontToolsの一部なので、fontToolsをインストールしなければなりません。

fontToolsはPythonのライブラリのためpip経由でインストールが行えます（Python、pipをインストールしてない人は先にインストールを行ってください）。コマンドは以下の通り。

pip install fonttools

使い方

フォントファイル（OpenTypeとTrueType）からTTXへ変換を行うには以下のコマンドを実行します（○○○.otfというファイルの例）。

ttx ○○○.otf

実行が完了（少し時間がかかります）すると、○○○.ttxというファイルが生成されます。これをテキストエディタ等で開くと膨大な量のXMLが出てきます。

ここにはフォントテーブルがそれぞれ人が読める形式で書かれており、編集も行うことができます。ただあまりにも長いので、もう少し見やすいテーブルごとの書き出しを行いたいと思います。

ttx -s ○○○.otf

これでテーブルごとにTTXファイルが書き出され、それぞれがより見やすくなりました。その他のオプションについてはttx -hで確認することができるので、確認してみてください。

またTTXからOpenTypeとTrueTypeへ戻すこともでき、こちらは単純に同じコマンドで

ttx ○○○.ttx

とすることで戻せます。

UFO

概要

Unified Font Objectです。未確認飛行物体ではありません。まだ足りない機能なども多いですが、個人的にはこの形式の方が人が読むのに向いてる気がします。

UFOはフォルダで構成されているので、各グリフが個別のファイルに保存されたりしています。そのため、1文字1文字をじっくりみたい時には読みやすいと思います。

インストール

こちらはTTXのように便利にまとまったツール群があるわけではないので主にRoboToolsのライブラリやGoogleのufo2ft使用していくことになります。

必要に応じてライブラリをインストールしましょう。それぞれpipでインストールすることができます。

ちなみにGlyphsの書き出し形式としてもUFOを選択することができます。

おわりに

フォントの見た目ではなく、中身が気になった方は是非、じっくりと中までご覧ください。

タイトルの通り、重い日本語フォントはWebフォントとして使いにくいので、必要な文字だけでサブセット化したフォントを作れるWebアプリを作ったのでご報告を。

リンク

https://otfss.hgrs.me/

できること

現在はAdobeの複数言語OTFの源ノ角ゴシックを元に、必要な文字だけを残して、軽量化したフォントを作ることができます。

作成されるフォントは「otf」「woff」「woff2」の3種類です。ダウンロードボタンを押すと数秒から数十秒でダウンロードが開始され、3つのフォントとライセンスが同梱されたzipファイルが落とせます。解凍すれば、自由にフォントが使えます。

作成手順は以下の流れです。

フォントに収録したい文字のリストを打ち込む

文章でも、単語リストでも、1文字でも1万文字でも、被ってる文字があっても大丈夫です。とにかく使われる文字を全部入れ込みましょう。

維持するOpenTypeフィーチャーを選択

「OpenTypeフィーチャー」のタブを開くと、レイアウトに関するOpenTypeフィーチャー一覧が表示されます。このリストから消したく無いOpenTypeフィーチャーを選択します。よくわからなければ、軽くしたいなら全てOFF、贅沢に使いたいなら全てONにすればいいと思います。

元のフォントに無い機能もありますが、それらは無視されます。

ウエイトを選択

ダウンロードボタンの隣にあるドロップダウンリストから、作りたいウエイトを選択します。細いものから順に並んでいるので、お好きなものを選択してください。

ダウンロード

ダウンロードボタンを1回押すとダウンロードリクエストが飛び、フォント作成がはじまります。特に画面遷移などは無いので、しばしお待ちを。何も起こらないからって何回も押さないでね。

フォントの使用

フォントはSIL Open Font Licenseのライセンスで配布されるので、複製、再配布Webフォントとしての使用、組み込みなどあらゆることへの使用が可能です。詳しくはライセンス本文を読んでみてください。

技術的な話

このWebアプリはWebアプリケーションのフレームワークからフォント作成まで全てPythonを用いて作られています。

Pythonにはフォント周りの様々なライブラリがあるので、フォントとエンジニアリングに興味がある人は色々と調べてみると楽しいかもしれません。僕は楽しいです。

ただ、このWebアプリはまだまだ開発途中でこれからどんどん機能追加や修正をしていきたいので、不具合や機能要望があればこの記事のコメントやお問い合わせからご連絡ください。

これから

もともと自分が使いたくて作ったWebアプリなので気分次第でフォント/機能追加したりしなかったりするかと思いますが、とりあえず、源ノ明朝は足したいなと思ってます。

ただ、フォントに関してはライセンス的にSIL Open Font Licenseのフォントかもっとライセンスフリーなフォントじゃないと厳しそうですが…

おわりに

わざわざサブセット作る上にOpenTypeフィーチャーを指定するとかいう超マニアックな誰得Webアプリですが、ぜひ使ってみてください。

最後に、もう一回リンク OTFSS

ちなみに、この「OTFSS」という名前は「OpenType Font SubSetter」から来てます。