見出し画像

ウェブの文字づめについて

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

見出しの文字づめ

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

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

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

スクリーンショット 2020-09-11 15.41.29

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

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

(詳しくはsample.htmlをご参照ください。)

スクリーンショット 2020-09-11 15.40.31

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

本文の文字づめ

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

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

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

(詳しくはsample.htmlをご参照ください。)

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

未設定のもの

スクリーンショット 2020-09-11 15.45.45

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

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

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

スクリーンショット 2020-09-11 15.45.54

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

charaTypeSeparaterを使ったもの

スクリーンショット 2020-09-11 15.46.07

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

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

スクリーンショット 2020-09-11 16.08.12

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

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

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

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

追記

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
111
デザインしたり、文章書いたり、大学で教えたり、楽器を弾いたり、そんな感じ。著書 『デザインの教室』『デザインの授業』『フラットデザインの基本ルール』など。最新刊は『ビジネス教養としてのデザイン』

こちらでもピックアップされています

#デザイン 記事まとめ
#デザイン 記事まとめ
  • 4988本

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。

コメント (1)
元気そうですね。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。