美しく、読みやすい文字とはー
何十年も前の古い書物を手にした時でも、その文字の美しさや存在感に圧倒されることがあります。
経年劣化による印刷のかすれや紙のヤケですら、そこに印刷されている文字の美しさを引き立たせるような本に出会うと、内容がどうであれ、それだけで充分な価値があるように思えてきます。
それを考えると、「文字」を取り巻く技術は進歩しても根本的な美しさの基準や価値はまったく変化していないという事に気づきます。
ことウェブにおいても同様で、縦書き表現なども含めウェブサイトでの文字についてはもう何年も前から議論されてきました。
ひと昔前までは、ウェブサイトでのデザイン要素としての文字は画像で補う、というような常識がありましたが、CSS3の登場以降、そんな常識も崩れてウェブフォントによる自由なフォント表現が可能になりました。
そもそもウェブフォントとは?
CSS3から追加された機能で、ウェブサイト内でサーバーに置いたフォントを表示できるものです。
これまでもCSSでフォントを指定することはできましたが、閲覧者の環境に依存するので、閲覧するPCに指定したフォントがインストールされていることが絶対条件でした。
ウェブフォントは指定のフォントファイルをサーバーからダウンロードさせる事になるので、どの環境で見ても同じフォントで表示されるということです。
こうして、ウェブフォントはGoogleが提供するサービス、「Google Fonts」を 皮切りに、どんどん波及していきます。
商用・非商用を問わず無料で利用可能。手順毎に進んでいけば簡単に実装できる。
ウェブフォントを活用して、さらに美しい文字へ。
ウェブ上での文字表現が自由になり、さらにJQueryなどを活用して独自で文字組みのスクリプトを開発するような人も出てきました。
普段からDTPをやっている方は、InDesignならスタイルの設定などで手軽にできる文字詰めも、ウェブサイトでの実装となると少し特殊です。
何年か前に話題になっていたFLAutoKerning.jsというスクリプトでは、jqueryと一緒に読み込むだけで句読点や鍵括弧類をきれいにカーニングできます。
http://liginc.co.jp/designer/archives/8981
jQuery(function($){
var pncPrn = ["」","』",")","]","}","〉","》","】","〕","「","『","(","
[","{","〈","《","【","〔","、",",","。",".","・"];
for (var x=pncPrn.length; x--;){
for (var y=pncPrn.length; y--;){
p[pncPrn[x] + pncPrn[y]] = -0.6;
}
}
});
こんな感じで、配列で設定されています。
下記リンクより、「FLAutoKerning.js」による文字詰めのデモを確認すると、
違いは明確です。
http://www.eszett-design.com/demo/demo_webTypo_kern.html
![]() |
![]() |
文字表現の自由は多媒体で広がり続ける
ソフトバンク・テクノロジー株式会社が提供しているウェブフォントサービス「FONTPLUS(フォントプラス)」でも、2014年のはじめから文字詰め機能が追加されて、よりウェブフォント活用の自由度が上がったように思います。
https://webfont.fontplus.jp/faq/view/SavSFbUGZEM%3D
昨年10月に公開された、電通によるウェブ広報紙「電通報」では、JQueryを使った独自のカーニングエンジンが採用されているようです。
電通報のウェブサイトから、採用されている「DLTRKerning.js」のソースを覗くと、ひらがな、カタカナ、記号や半角英数まで一文字ごとにカーニングの値が設定されていることが分かります。
見出しのタイトル1文字ごとにカーニング値が設定されている。
「DLTRKerning.js」のソースコード。
その他の媒体で思い出されるのは、スマホユーザのニュースアプリではもはや定番の「SmartNews」でも文字組みにかなりのこだわりを持って開発されたという話が有名です。
ニュースのタイトルから改行の位置が自然になるように判別して、文字間を詰めたり長体をかけているのだとか。
SmartNewsのUI。見出しの文字サイズやブロック状の配置も読みやすさのポイント。
以下よりSmartNews開発者のインタビューが読めます
http://www.find-job.net/startup/smartnews-great-ui-ux
ウェブやアプリでもどんどんあたらしい文字表現が可能になっていくのと同時に、 美しい文字の重要性はこれからも問われ続けるのではないでしょうか。
INOUE.T
デザイナー
--