９月９日にオンラインで開かれた『FONTPLUS DAY Vol.27 〜佐藤好彦さんとフォントおじさんのウェブタイポグラフィ対談〜』に出演させていただきました。そこで紹介しました文字づめについて、まとめておきます。

見出しの文字づめ

これは2017年のType&の時にお話したものですが、前回のFONTPLUS DAYで、Illustratorでレイアウトしたデータをそのまま表示したいというご意見があったので、改めてお話しました。

必要なデータは、gitHubの以下のページからダウンロードできます。

こちらのgetKerning.jsは、Illustrator用のスクリプトで、文字づめをした文字列を選択して、［ファイル→スクリプト→その他のスクリプト］でこのスクリプトを選ぶと、文字づめ情報をemに換算した配列データにして取り出すことができます。

HTMLに、JQueryとkerningText.jsを読み込み、文字づめをしたいテキストにクラス名を指定します。

scriptタグのなかで、
kerningText("セレクタ名",getKerning.jsで読み取ったKerningの配列データ);
を書き込みます。

（詳しくはsample.htmlをご参照ください。）

これは、JavaScriptで動的にspanタグを書き込んでいるので、HTMLソースは、通常の文字列のままです。通常のきれいなデータとして保存したまま、文字づめができるのがメリットで、WordPressなどのCMSでも利用できます。

本文の文字づめ

この考え方を本文組に応用したものです。漢字・ひらがな・カタカナ・数字・アルファベットなどの文字種ごとに、JavaScriptで動的に生成したspanタグでくくることで、さまざまな調整ができます。

必要なデータは、gitHubの以下のページからダウンロードできます。

chataTypeSeparater.jsと、文字づめの情報であるjidume.cssを読み込んで、適用したい部分にidを指定し、scriptタグのなかでCharacterTypeSeparator(id名);
と指定します。id名に#は不要です。

（詳しくはsample.htmlをご参照ください。）

現状、適用部分にリンクのaタグなどのタグがあるとまずいかもしれません。

未設定のもの

」「という部分などが、開きすぎてしまいますね。

文例：青空文庫『ステファヌ・マラルメ』ポール・ヴァレリイ著の訳者坂口安吾の紹介文。以下同様。

font-feature-settings: paltを設定したもの

妙なアキは見られませんが、少しつまりすぎて読みにくい感じもします。

charaTypeSeparaterを使ったもの

spanタグで分けたあとのCSSの設定しだいですが、かなり読みやすくすることは可能なように思います。

文字を選択すると、調整している様子が見えます。

spanを分ける文字種の単位、それに対するCSSの設定など、まだあまり詳細に検討しているわけではなく、調整の余地があると思いますが、クラスが別れているので、文字づめだけでなく、サイズやベースラインなど、あらゆる設定が可能になるはずです。

以下で、Webページで確認できます。

実際のところ文例のように役物が続くというのも、それほど多いわけではなく、やっぱりベタが読みやすいよねということに落ち着いたりします。それはそれでよいと思いますし、現実の仕事ではそれが主流になるべきでしょう。

ですが、一つの選択肢として、こんなものを研究してみるのも、楽しいのではないかと。そうむずかしいことではないので、たぶん、他にも試した方はいらっしゃると思いますが、こんな試みも何かのお役にたてばと思います。ご意見・アドバイスなどあればぜひ。

追記

FONTPLUS DAYのアーカイブ、公開期間が22日までになりました。
デザインのセミナーぽくないことをやっています。
生BGM担当とかw
https://www.facebook.com/hiroyuki.sekiguchi.8/videos/3215972928509664/