デザイン

ウェブで美しい文字組みを表現する。
-ウェブフォントの文字詰め・文字組み-

August 5, 2014

ツイート

美しく、読みやすい文字とはー

何十年も前の古い書物を手にした時でも、その文字の美しさや存在感に圧倒されることがあります。

経年劣化による印刷のかすれや紙のヤケですら、そこに印刷されている文字の美しさを引き立たせるような本に出会うと、内容がどうであれ、それだけで充分な価値があるように思えてきます。

それを考えると、「文字」を取り巻く技術は進歩しても根本的な美しさの基準や価値はまったく変化していないという事に気づきます。

ことウェブにおいても同様で、縦書き表現なども含めウェブサイトでの文字についてはもう何年も前から議論されてきました。

ひと昔前までは、ウェブサイトでのデザイン要素としての文字は画像で補う、というような常識がありましたが、CSS3の登場以降、そんな常識も崩れてウェブフォントによる自由なフォント表現が可能になりました。

そもそもウェブフォントとは？

CSS3から追加された機能で、ウェブサイト内でサーバーに置いたフォントを表示できるものです。

これまでもCSSでフォントを指定することはできましたが、閲覧者の環境に依存するので、閲覧するPCに指定したフォントがインストールされていることが絶対条件でした。
ウェブフォントは指定のフォントファイルをサーバーからダウンロードさせる事になるので、どの環境で見ても同じフォントで表示されるということです。

こうして、ウェブフォントはGoogleが提供するサービス、「Google Fonts」を皮切りに、どんどん波及していきます。

商用・非商用を問わず無料で利用可能。手順毎に進んでいけば簡単に実装できる。

https://www.google.com/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」のソースを覗くと、ひらがな、カタカナ、記号や半角英数まで一文字ごとにカーニングの値が設定されていることが分かります。

dentsu-ho-preview