4kaku design

マーケティングを勉強しているWebデザイナーのノート

このブログでも使っているシンボルフォントやWebフォント、自分でも作れないかと思い挑戦してみました。
セマンティックなWebフォントの作り方についてもまとめています。


今回の参考エントリー


リガチャ(合字)対応のWebフォントを作るにあたり、以下の記事で勉強させていただきました。

リガチャ(合字)とは何?という方は「合字(リガチャ)が美しいフォント8選」をご覧いただくのがオススメです。紹介されているフォントも素敵。

Webフォント制作においては、1文字ずつのベクター画像を作るとバランスが悪くなる文字列に対して、特定の文字列(↑のイメージ画像で言えば「fi」ですね)に対応したベクター画像を作ってバランスを整える方法だと考えていただければわかりやすいかと思います。

デモページ

セマンティックな表示方法の必要性については、比較したソースをご覧ください。当ブログでは現在下記のコードでシンボルフォントを表示しています。しかし、空のdiv(iタグを使う方がメジャーかもしれません)があるのは好ましくないなーと思い、今回別の方法を調べてみました。

/* タグのアイコンを表示するコード */
<div id="icon" class="icon-tag"></div>

/* 今回調べた方法だと↓のような記述が可能に */
<span class="logo-ablog">ablog</span>

「リガチャ(合字)対応Webフォントの作り方」目次



IllustratorでSVG画像を作る


まず最初に、Illustratorでフォントにするためのベクター画像を作ります。今回はこちらでご紹介のテンプレート「symbols.ai」をお借りしました。


今回はかずみちさん(@kazumich)からのリクエストで、a-blog cmsのロゴの一部をWebフォント化します。
1文字ずつのバージョン、ロゴ全体のバージョン、「a」だけ別のスタイルを適用した3バージョンを作るためにアートボードを分割しました。製品サイトをご覧いただくと分かりやすいかと思いますが、「a」の部分だけ赤色がついているんです。


次に、SVG形式で書き出します。
「アートボードごとに作成」にチェックを入れると、1つのAiファイル内にあるアートボードごとにSVGを作ってくれます。範囲指定をしておかないとすべてのアートボードを書き出してしまうので要注意。

SVGファイルの名前は「Aiファイル名+アートボード名.svg」になるので、きちんと指定しておくとあとあとの作業が楽になります。


IcoMoonAppでフォントに変換


このブログでも使わせてもらっているシンボルフォント生成ができるサービス「IcoMoon」を使えば、有料アプリやコマンドラインを使わなくてもSVG画像をWebフォントに変換することができます。


IcoMoon Appの初期画面。
「Import Icons」ボタンから自作をSVG画像取り込むことができます。もともと配布されているアイコンと自作アイコンを1つのフォントにまとめることも可能です。


画像の取り込みが完了し、選択された状態です。
フォントに組み込みたい画像(アイコン)をすべて選択してから、ページ下部の「Font」ボタンでフォントの設定画面へ移ります。


この画面からフォントに対応するクラス名やコード、リガチャの設定を行います。
リガチャについては前述の通りですが、コードはシンボルフォントに対応した文字を設定することができます。アイコンの右下に半角英数を入力すると、自動で16進数に変換してくれるので便利。


コードの設定

リガチャの設定


フォントの名前と接頭語、接尾語は「Preferences」から設定できます。今回はフォント名以外デフォルトの設定のまま作りました。

設定やクラス名(cssは後から編集が可能)を確認したら、ページ下部の「Download」ボタンを押してください。フォントとCSS、JSが入ったzipファイルがダウンロードできます。


フォントを生成するとzip内に「demo.html」があるので、さっそく開いてみましょう。ページ下部の「Font Test Drive」で自由な文字列を入力したり、フォントサイズを変えたりとお手軽にテストができます。このデモページのソースは参考になるので、コーディングをする際は横に開いておくと安心です。


CSSでスタイルを適用する


フォントが生成できたら、さっそくサーバーにアップしてHTML上で表示してみましょう。
デモページ


1文字ずつベタ打ちで表示


今回はリガチャ対応のWebフォントを作りましたが、比較用に1文字ずつ使えるようにしました。(見た目の分かりやすさを優先して、余白をちょっと極端にとっています)


<span class="logo-ablog">a</span>
<span class="logo-ablog">b</span>
<span class="logo-ablog">l</span>
<span class="logo-ablog">o</span>
<span class="logo-ablog">g</span>

「ablog」をひとつのフォントに


IcoMoonのリガチャ設定で文字列「ablog」を設定したものを表示しています。元のAiファイルから書き出したSVG画像をベースにしているので、文字間のバランスは完璧ですが、1つのセットになっているので1文字だけ色やサイズを変えることはできません。


<span class="logo-ablog">ablog</span>

「a」にスタイルを適用


「a」と「blog」を別の文字列として指定し、「a」にだけCSSで赤色(#e5004f)を適用したサンプルです。これが一番理想に近いかたちでしょうか。


<span class="red logo-ablog">a</span>
<span class="logo-ablog">blog</span>

リガチャ対応Webフォントの使い所

ベクターなので高解像度の端末でもくっきりきれいに見えるのは嬉しいですね。

シンボルフォント自体がWindows95に入っていたくらいなので、eot、svg、ttf、woffの4形式で書き出しておけばかなりの端末をカバーできるのではないでしょうか。ちなみに手元にあったAndroid端末(OS4.1)でも問題なく表示されました。