本ページはプロモーションが含まれている場合があります
はてなブックマークで話題のページでこんな記述がありました。（以下は原文ママ）
文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか？それを実装するエンジニアの工数は効果に見合ったものでしょうか？ユーザーはどんなメリットが得らるのでしょうか？何をもって美しいタイポグラフィとするのでしょうか？
Dear Web designer（Medium）
なるほど。
でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか？
クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、（レイアウトやタイポグラフィ含め）印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…（メイリオフォント）」みたいな世界観の断絶を少しは和らげられるのでは、と思って発言されているのだと思います。
それをメディアが違うから…と頭ごなしにバッサリ切ってしまうのは、少し違うと思うのですよね。（もちろん考えなしに発言する人も多いでしょうが）
当然、コストの問題もあると思いますので、（改行位置はともかく）ユーザーの環境で同じように見えて、工数が少なければ良いのか！（ポジティブ思考）と考えて、Illustratorで制作したタイポグラフィ・文字組みを同じようにWebでも反映したいという要望に敢えてチャレンジしてみました。
印刷・Web用で共に同じフォントが使えるAdobe Typekit
タイポグラフィという部分で、見た目を合わせるために、印刷用で使用したフォントと同じフォントが使用できるWebフォントサービスを使用します。今回は「Adobe Typekit」を使ってみました。
- Typekit（Adobe）
2016年3月19日現在、Creative Cloudユーザーなら、日本語フォントが34書体（太さのバリエーションは含まず）使用できます。印刷用としてもWeb用としても使えるので、今回は「りょう Text PlusN」のフォントを使ってみます。
Illustratorで文字を入力＆設定
Illustratorで文字を入力します。今回のテキストはWikipediaの文章を使用しました。
- Adobe Illustrator（Wikipedia）
文字・段落の設定は以下の通りです。
- フォント：「りょう Text PlusN」16pt（＝16px）
- カーニング：0
- 文字組み：行末約物半角
この組み方の普通の人にも分かりやすい部分は「英数字の前後にひらがなや漢字があると、文字の間隔が空く」というものです（厳密なツッコミはしないで（汗））。文字間が空いているのは半角スペースを入れているわけではありません。
この文字組みをWebで再現してみます。
SVGに書き出す
Illustratorで書き出す部分を選択して、メニューから「ファイル」→「選択範囲を書き出し」を選択します。（右クリック→「書き出し」でもOK）
ファイルの種類は「SVG」を選択し、「選択範囲を書き出し」をクリックします。
SVGオプションは以下の通りです。
- スタイル：内部CSS
- フォント：SVG
- 「縮小」「レスポンシブ」にチェック
書き出したSVGファイルをテキストエディタで開くと以下のようになっています。
これを見たら「あ、コレ何とかなりそう」と思えますよね。単にclassを作ってletter-spacingで詰めているだけなので。
つまりIllustratorがカーニングなどの詰め情報を計算して、pxに変換したものをSVGとして用意してくれるのです。
SVGの不要な部分を置き換え・削除する
テキストエディタなどで正規表現を使って置換を行い、不要な部分を削除します。
置換する内容は以下の通りです。
- 「.+?<defs>(.+?)</defs><title>.+?</title>(.+?)</svg>」→「$1$2」（不要なタグを削除）
- 「 transform=".+?"」→「」（不要な属性を削除）
- 「 x=".+?" y=".+?"」→「」（不要な属性を削除）
- 「<(/)?tspan( )?」→「<$1span$2」（tspanタグをspanタグに）
- 「<(/)?text( )?」→「<$1p$2」（textタグをpタグに）
- 「(font-family:)(.+?);」→「$1"$2";」（font-familyのフォント名を括っておく）
パターンはいつも一緒なので、マクロで変換すれば瞬時に変換できますね。
先程のSVGの内容は置換して以下のテキストになりました。
Illustratorの画面とWebの画面を比較してみる
あとはWebフォント用のスクリプトを入れ、Webフォントの「りょう Text PlusN」が適用されるHTMLの中に、先程加工したテキストを入れれば完成です。
なお「りょう Text PlusN」はCSSでは以下のように記述します。
font-family: "ryo-text-plusn";
作成したHTMLをFirefoxで表示してみました。
（幅はIllustratorに合わせました／行間は設定なしのブラウザーデフォルトです）
元のIllustratorの編集画面は以下の画像の通りなので、結構うまく再現できているように見えますね。
他の文字組みも試してみた
他の文字組みでもうまくいくのか試してみましょう。
英数字の前後にひらがなや漢字があった場合のアキをなくした場合。
文字・段落の設定は以下の通りです。
- フォント：「りょう Text PlusN」16pt（＝16px）
- カーニング：0
- 文字組み：なし
先程と同じ手順で作成したHTMLをFirefoxで表示すると次のようになりました。
元のIllustratorの編集画面は以下の画像の通りなので、こちらもうまく再現できているように見えますね。
次に「適当に詰めてみた」場合。
文字・段落の設定は以下の通りです。
- フォント：「りょう Text PlusN」16pt（＝16px）
- カーニング：オプティカル
- 文字組み：約物半角
先程と同じ手順で作成したHTMLをFirefoxで表示すると次のようになりました。
元のIllustratorの編集画面は以下の画像の通りなので、こちらもうまく再現できているように見えますね。
ただ、よく見てみると「8（」の部分でFirefoxの表示が乱れているのが確認されました。
Chrome・Edge・Internet Explorer 11は大丈夫でした。
最後に手動で設定した例。「残薬バッグ」という文字列をIllustratorで入力すると以下のような表示になりました。
でもこの表示、間隔がバラバラに見えますよね？
文字の「カーニング」を調整して空けたり詰めたりします。
今回はこんな感じにしてみました。（ッの前も詰めました）
先程と同じ手順で作成したHTMLをFirefoxで表示すると次のようになりました。上がカーニングなしで、下がカーニング調整済みです。（行間は画像編集で調整しています）
元のIllustratorの編集画面は以下の画像の通りなので、こちらもうまく再現できているように見えますね。
手動でカーニングを設定しても反映されることがわかりました。
まとめ
Illustratorの文字組みを再現する方法は以下の通りとなります。
- Webフォント環境を用意する
- IllustratorからSVG書き出し
- SVGファイルを置換
- HTMLファイルへ組み込み
たったこれだけです。
作業はそんなに面倒ではないですよね。
文字詰めでこだわった部分があったら試してみましょう！
それでは。
余談
スクリプトができる人は、SVG書き出しすらしなくて、いきなりクリップボードに整形済みのHTMLを入れたりできるのではなかろうか…とか思ったり。
追記（2016/03/19）
初出時、置換の部分でタグが消えた状態になっていました。現在は修正済みです。