デザイン

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

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

mojitsume_before 文字詰め前 mojitsume_after 文字詰め後

 

文字表現の自由は多媒体で広がり続ける

ソフトバンク・テクノロジー株式会社が提供しているウェブフォントサービス「FONTPLUS(フォントプラス)」でも、2014年のはじめから文字詰め機能が追加されて、よりウェブフォント活用の自由度が上がったように思います。

https://webfont.fontplus.jp/faq/view/SavSFbUGZEM%3D

昨年10月に公開された、電通によるウェブ広報紙「電通報」では、JQueryを使った独自のカーニングエンジンが採用されているようです。
電通報のウェブサイトから、採用されている「DLTRKerning.js」のソースを覗くと、ひらがな、カタカナ、記号や半角英数まで一文字ごとにカーニングの値が設定されていることが分かります。

dentsu-ho-preview

見出しのタイトル1文字ごとにカーニング値が設定されている。

img1

「DLTRKerning.js」のソースコード。

http://dentsu-ho.com/

 

その他の媒体で思い出されるのは、スマホユーザのニュースアプリではもはや定番の「SmartNews」でも文字組みにかなりのこだわりを持って開発されたという話が有名です。
ニュースのタイトルから改行の位置が自然になるように判別して、文字間を詰めたり長体をかけているのだとか。

SmartNewsのUI。見出しの文字サイズやブロック状の配置も読みやすさのポイント。

以下よりSmartNews開発者のインタビューが読めます
http://www.find-job.net/startup/smartnews-great-ui-ux

 

ウェブやアプリでもどんどんあたらしい文字表現が可能になっていくのと同時に、 美しい文字の重要性はこれからも問われ続けるのではないでしょうか。

  • このエントリーをはてなブックマークに追加

ライター紹介

INOUE.T

デザイナー

--

お気軽にお問い合わせください。
ご質問やご相談を承ります。どうぞ、お気軽にお問い合わせください。

お問い合わせ

メールマガジン登録
バックナンバーへ

最新の制作事例や季節のトピックス、デザイナーのつぶやきなど、das.ならではの情報をお届けします。
なお、メールアドレス入力前に「個人情報の取り扱いについて」をご覧ください。
ここでご入力いただきましたeメールアドレスは、メールマガジン配信のためだけに使用いたします。

follow us
google+