【完全版】Ligature Symbols フォントセットの自作方法

今月の初めにLigature Icon フォントセットの自作方法とWebFontというエントリーを書きました。これはsymbolsetというサイトにinspireされて、Ligature機能を使ったSymbol Web Fontを自作しようという試みを書いたものです。しかし、この時はsymbolsetで実現されているようなものには及ばない不完全なものになってしまいました。

その後、いろいろと調べたり試したりする中でsymbolset相当のWebFontを自作することが出来ました。今回はそのプロセスと技術的解説について紹介したいと思います。

Ligature Symbols について

まずは今回自作したWeb Fontのデモページをご覧ください。
【DEMO】 Ligature Symbols

今回作成したLigature Symbols FontはOFLライセンスで公開しており、ダウンロードや使用方法も紹介していますので、興味のある方はぜひダウンロードして使ってみてください。
ページのトップにはすぐにフォントを試すことができる入力フォームを用意していますのでお試しください。今のところ確認ができている対応ブラウザはChrome, Safari, Sleipnir for Mac, Firefox, iOS - Mobile Safari, Android Browserです。

基本的な技術と仕組みについて

Ligature SymbolsはLiagture（合字）という機能を使用して作成しています。合字に関する説明はタイプディレクターとしても有名な小林章さんのブログにわかりやすいエントリーがありますのでご覧ください。
つまり合字とは、デザイン上の理由などによって複数の文字を結合して一つの文字記号としてデザインされたもののことを言います。もっとも一般的に見られるのは「ff, fi, fl」といったアルファベットを結合した合字です。

今回の自作フォントではこれを応用して作っており、「twitter」などのような特定な文字列をタイプしたときに特殊な文字記号（Symbol）を表示するようにしています。
合字にはいくつかの種類があり「ff, fi, fl」などの一般的なものは標準の合字です。他にも歴史的な合字や装飾的な合字、今回のような場合に使用する任意の合字といったものがあります。前回はその仕様にそって「任意の合字」でSymbolのLigatureを作成したのですが、それではブラウザがその仕様に追いついていないため表示できませんでした（現状FirefoxだけはそのあたりのOpentypeの機能が実装されていて、前回のSymbol Ligatureも表示されました）。
そのため今回はあえて標準的な合字として書き出すことでChromeやSafariといったブラウザでも表示することができるようにしています。

Ligature Symbolsの作成プロセス

Ligature Symbolsの作成プロセスについて前回との違いを踏まえながら紹介してみたいと思います。
前回はGlyphs Miniというフォント制作アプリを使用しました。Glyphs Miniは有料フォント制作アプリとしては非常に安価でアプリケーションとしても優れていたものでした。しかしプロ向けではないぶんできることは限られており、今回のような特殊なケースで使用するにはあまり適さなかったのかもしれません。（けれども今回のフォント作成にあたっては結局使用することになったのですが…）

ということで、今回はオープンソースで公開されているFontForge（日本語版）というアプリケーションを使用して作成しました。FontForgeは無料で公開されている上に、postscript / truetype / opentype / svg font / web open font formatなどへの書き出しやUnicodeの設定、細かなフォント情報の設定ができる非常に優れたアプリケーションです。

FontForgeのインストール（for Mac）

FontForgeはMacの場合X11上で起動します。まずはMacを買ったときに付属しているインストールDVDからあらかじめX11をインストールしておいてください。

FontForgeのインストールにはHomebrewを使いました。いろんな人がhomebrewを使ったFontforgeのインストールについて書いていますので（Lionでhomebrewを使ってfontforgeをインストールなど）検索して参考にしながら行います。
私の場合は、何度もエラーがでていろいろとつまづいていたのですが、幸い近くにいたエンジニアの id:mechairoi さんに手伝ってもらいながらインストールできました。

FontForgeの使い方

起動してすぐにファイル選択ウィンドウが立ち上がります。最初は新規作成ですので下部中央にある[New]ボタンを押します。そうするとメインのウィンドウが表示されるので、アルファベットなどは作成したい文字のマスをダブルクリックするとGlyphの作成ウィンドウが表示されます。

通常はここでアルファベットや記号などを描いていくのですが、私は前回Glyphs Miniで作成したフォントファイルがあるのでそれを用いて作成することにしました。既存のフォントファイルから作成する場合はメニューの「エレメント > フォントの統合」でフォントファイルを選択してマージすることができます。

フォント情報・Ligatureの設定をする

次にフォント情報の設定を行います。メニューの「エレメント > フォント情報」を選択してください。フォント名やウェイト、バージョン、著作権表示の設定ができます。

Ligatureの設定は左のメニュー項目でLookupsを選択してください。私は前回作成したフォントに合字が含まれているため、GSUBに一つ項目が表示されています。(1) 新規作成の場合は右の[Add Lookup]を、(2) 私のようにすでに合字に関する項目がある場合は選択してから[Edit Metadata]ボタンを押してください。

(1) [Add Lookup]を押すとLookup追加ウィンドウが表示されるので、一番上の「種類」の項目から「Ligature Substitution」を選択します。次にすぐ下のセルの＜New＞の横の長方形をクリックして「標準の合字」を選択します。これで[OK]を押して完了です。できたLookupに[Add Subtable]をしておくと後々楽かもしれません。

(2) [Edit Metadata]を押すとセルにすでにdligというのが入っています。これは「任意の合字」で、前回Glyphs Miniで作成した際に自動的に設定されたものだと思われます。なのでdligの横の長方形をクリックして「標準の合字」を選択し、「Lookup Name」を適当な名前に変更しておきます。LookupにはSubtableというのも付随しているのでついでにそのラベル名も変更しておくと後で間違えなくて良いと思います。

Glyphの情報・Unicode・Ligatureの設定をする

次に個々のGlyphに対する設定をします。設定したいGlyphを選択してメニューの「エレメント > Glyph info...」を選択してください。Glyphの設定ウィンドウが表示されるので、まずはGlyphの名前とUnicodeの設定をします。私の場合は前回作成したGlyphでGlyphs Miniの仕様のためアンダーバーで連結された名前が入っているので、修正します。

ユニコードは今回のような私的な目的の場合の文字に対して使う「私用面」（BMPのU+E000〜U+F8FFの領域の拡張）を割り当てるのが適切だと思います。詳しくはWikipediaの説明などを参考にしてください。また、「私用面」に関してもAdobeなどが予約している領域があるといった情報もありますが、今回は考慮していません。もう少しちゃんと調べる必要がありそうです。

次に左のメニュー項目から「合字」を選択して設定します。新規作成の場合は＜新しい合字＞を押して先ほど設定したsubtableを選択します（ない場合は作成してください）。右側のSource Glyph Namesのところには合字にしたい文字の組み合わせを半角スペース区切りで入力します。
ハートマークのように「heart / love」と複数呼び名がある場合は複数設定しておくと良いかもしれません。

フォントファイルの書き出し

メニューの「ファイル > フォントを出力」からフォントファイルの書き出しができます。書き出すファイル名を設定する欄の下に「アウトラインフォント無し」と書かれたセレクタがあるのでそこから出力するフォーマットを選択します。私の場合はWebFontにするために「TrueType / SVGフォント / Web Open Font」を出力しました。

以上でFontForgeに関する説明は終わりです。正直FontForgeの使用方法に関してはまだまだ勉強不足な部分が多いです。なので実際の使用にあたっては説明不足な部分が多々あるかと思いますが、ご勘弁ください。もしFontForgeに関して詳しい方がおられましたら、ぜひエントリーなどを書いて知らせてもらえると嬉しいです :-)

WebFontとして使用する方法とCSSテクニック

前回のエントリーでも紹介しましたが少し違う部分もあるので、もう一度紹介しようと思います。今回InternetExplorerでの表示の確認はしていませんが、念のためIE用のEOTファイルも用意しておこうと思います。ttf2eotというサイトでTruetypeからEOTへの変換ができるので、私はこれを使って用意しました。

WebFontの記述とLigature用のCSS Style

WebFontの使用にはまず以下のようにCSSを記述して、font-faceを登録しておきます。

@font-face {
    font-family: 'LigatureSymbolFont';
    src: url('LigatureSymbolFont.eot');
    src: url('LigatureSymbolFont.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbolFont.woff') format('woff'),
         url('LigatureSymbolFont.ttf') format('truetype'),
         url('LigatureSymbolFont.svg#LigatureSymbolFont') format('svg');
    src: url('LigatureSymbolFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

そして、Ligature Symbolを使用したい箇所につけるクラスを記述します。

.lsf {
  font-family: 'LigatureSymbolFont';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

CSSのtext-renderingプロパティは文字列の描画処理の最適化のためのプロパティです（W3C SVG 1.1 - 11.7.4 The ‘text-rendering’ property）。text-renderingプロパティにはauto, optimizeSpeed, optimizeLegibility, geometricPrecision, inheritといった値を設定できます。「optimizeLegibility」の場合は、読みやすさを速度や幾何学的な正確さよりも優先するとなっています。Webkit系ではこの時にLigatureが有効となるようです。

前回のエントリーで記述していたOpentypeの機能を有効にするプロパティに関しては、任意の合字を使用していないので今回は省いています。

テキスト共に装飾的に使う場合のCSS class

「Download」という文字の前に装飾的にアイコンを表示したい場合などに使用できるCSS classを紹介します。

<a href="#" class="lsf-icon" title="download">Download</a>

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbolFont';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

このコードは「lsf-icon」というクラスをつけた要素の前にアイコンを表示するというものです。:before擬似要素とcontentプロパティを使って文字を追加しています。またcontentプロパティはtitle属性を読むようにすることですっきりしたCSSにできます。
アイコンを文字より少し大きく表示したり、文字との間にマージンを設けるなどのStyleも書いています。

Ligature Symbolsの特徴と有効性について

高解像度化している近年のPC/Mobile環境ですが、それによって解像度のばらつきがWebDesignerの悩みのタネの一つであることは間違いないと思います。多くのディスプレイ環境で画像表現をいかに綺麗に表示するかとともに、セマンティックなWebという流れの波も同時に押し寄せていて、WebDesignerは常にこの問題に悩まされているでしょう。
SVGやHTML5のCanvasといったものがこの問題を解決するかとも思われましたが、これらの技術もなかなか実用段階にまで行かないところがあります（Canvasはこの話とちょっと違うかもしれませんね）。
Ligature Symbolsではこれらの問題をすべて解決してくれる可能性があります。スケーラブルなSymbolフォントを使用することで解像度の問題を、Ligature機能を使うことでよりセマンティックなWebという問題を解決します。
こういった新技術で懸念されるのはいつもIEというブラウザーの存在ですが、私が前々から言っているように、スマートフォンブラウザという枠に限ればこの問題からも開放されます。これは決して未来の技術ではなくて、今すぐにでも使える現実的な技術だと私は考えます。

ご興味のある方はぜひぜひLigature Symbolsを使ってみて、ご感想や意見などをください。

一部環境で表示がうまくいかない件について

本日（2012.7.20）公開したLigatureSymbolsにおいて、一部の環境でChromeやSafariでもLigatureが表示できない現象が確認できています。発生条件が不確定なためすぐに対応することはできませんが、原因追求に努めたいと思います。
発生した事例や条件などが分かった方などがいましたら、どんな情報でもご連絡いただけると嬉しいです。どうぞよろしくお願いいたします。