2010年7月19日月曜日

フォント設定への気遣い

スポンサーリンク

フォントへの気遣いについて書いてみます。
といっても、深い内容を書ける訳ではありませんが。
その分、簡単に導入できる方法かなと思います。



WEB以外での文字


もともと、フォントに関してはWEBは後発です。
先発はもちろん雑誌や書籍です。

様々な書体やウェイトを駆使し、版面設計しています。
日本語であれば漢字と仮名文字の扱いは重要ですし、約物(句点・読点・重ね字・送り字等)の禁則処理が大切です。

より細かい事を言えば、字間や字送りの設定を書体や求めるイメージに合わせて細かく設定します。
例えば、版面で白地が目立つ必要があるのなら、文字の字間をアキ気味にします。
ぎゅっと文字を集めて密度を高め、全体の情報量を増やす事もあります。
もちろん使用する書体の種類も選びに選んでいます。

全体としても、一行の文字数を決め、段組みを配置し、レイアウトを決める必要があります。
段組みを基本としてレイアウトをする事でレイアウトに規則性が生まれ、多くのパターンに対応できる訳です。

歴史のぶんだけ基礎に基づいた様々な手法があり、複雑な世界だと思います。
写真はもちろん重要なのですが、文字に対する気遣いを疎かにできるものでは無いのです。

WEBでの文字


さて、WEB上での文字はどうなのでしょう?

簡潔に言えば、欧文はそれなりで、和文においてはとても貧弱です。

欧文は出来る事が多いですが、雑誌等の気の使い方を考えると不便ではないかと思います。
和文に欧文に比べてとても不便です。

その差は、土台となる仕様から現れています。
欧文に関しては専用のCSSタグ(word-break等)があります。
書体の数が和文に比べて元々多いのですが、現在ではWEBfontの公開により更に多くの書体が使えるようになっています。

対して、WEB上で使える和文の書体は非常に限られています。
極端に言えば、セリフ(ウロコあり:明朝体など)とサンセリフ(ウロコなし:ゴシック体など)程度の大きな差異が存在するのみです。
しかも、使用しているPCとOSによってセリフやサンセリフが大きく違います。

この原因は、主にPCに元から入っているフォントによるものだと思います。
後でフォントを加える事は可能ですが、一般のユーザーはまずフォントを加えたりしません。
特に日本でシェアの大きいWINとIEの組み合わせはアンチエイリアスの効いた文字が無い場合が多く、書体で雰囲気を出すのは至難のワザです。
いきおい、文字は並べるだけで他の素材で勝負ということになっていきます。

文字のような表現豊かな部分が根こそぎ奪われている現状は、嬉しい物ではありません。

対策


では、どうすれば良いかといえば、現状ではソフトとプログラムを用いる方法があります。
他に画像を使う手もあるのですが、この方法は本文ではなく見出し等の部分に主に使われますのでここでは省きます。

使うのは主にflashとjavascriptです。
他にもあるとは思いますが、私が把握しているのはこの2つです。

flashを用いれば、自由に書体や文字組が可能です。
必要とするデータを全てまとめておけるので、外部に依存する必要がありません。
(flash playerは要りますが)

javascriptを使えば、禁則処理や文字組等が自由に行えます。
縦組を実現したり出来る訳です。
何より、基本的に並びを制御しているだけなので、根本は普通のテキストである点が大きな利点です。
flashがなくとも閲覧できますし。



簡単にできる対策


flashやjavascriptを導入する以外になにも出来る事は無いのか?
複雑な処理や表現が可能な方法はありません。
それこそ、画像を有効に使うしか無いでしょう。

しかし、他にも出来る事もあります。
それは、フォントのサイズや行間の指定です。
具体的には、

  • font-size
  • line-height
  • letter-spacing

といったCSSでの調整です。

font-size(フォントサイズ)に関しては以前も書きましたが、ターゲットやサイトのイメージによって柔軟に考えた方が良いかと思います。

letter-spacing(字送り)は、文字の詰め具合がかわりますので判読性に大きな影響が出ます。
letter-spacingを調整して詰めた漢字にすれば、密度の高い文章が演出できますし行としてのまとまりが出ます。
逆に開け気味にすれば、地色が入り込み空間が広く軽い印象を与えます。
ただ、詰めた場合には漢字とかなが混じった和文では違和感が出る事が多くあります。
開け気味であれば、少しは違和感が減るかもしれません。

line-height(行送り)は、通常は1.5が良いとされていますが、文字の分量やサイズや与えたいイメージを元に微調整をした方が良いでしょう。
line-heightはletter-spacingと同様に密度や判読性に影響が出ますので、基本は読める範囲での調整になります。
1.5を基本に少し調整してみるとしっくりとくる間隔が見つかる場合がありますので、その時には1.5から変更するべきです。


以上の方法は、万能ではないにせよ少しの調整で大きな影響を与える事が出来るはずです。
特に、いままでletter-spacingを調整していない場合には一度試される事をおすすめします。
より良い結果を生む可能性があるはずです。


なお、この記事を書くに伴い、せっかくなのでgoogleのGoogle Font Directoryをごく一部に使っています。
本当にごく一部ですが。
多分気付かれる事はないでしょう...。

スポンサーリンク

0 件のコメント :

コメントを投稿