2009.02.20

ウェブにおけるタイポグラフィー

イメージ：ウェブにおけるタイポグラフィー

「やるな！」と思われるデザイナーに ♯34
Quattro（mBlog）

こんにちわ。この前電車に乗ってiPhoneでHeroes見てたら、隣のおばあちゃんに「それってiPhoneですか？　わたしiPod touch使ってるんですよ」と話しかけられたmBlogのQuattroです。そのおばあちゃん、自分でガリガリ動画突っ込んだり、ポッドキャスト聴いたりして相当活用している様子。まさにコンピューターおばあちゃんといった感じでした。世代感出ちゃいますよねこういう引用って。

さて今回は、ウェブにおけるタイポグラフィーについて考えてみたいと思います。とは言ってもあまり小難しい話ではなく、単純に「ユーザーにとって見やすいテキストって何だろう？」という内容です。ウェブだろうと印刷だろうと、当然情報伝達手段の主軸はテキストなので、できるだけ快適に活字を読んでもらいたいですよね。文章が長い場合は特に重要となってくる技術です。今回はオンラインツールを使って、サイトを見る側にとって快適なウェブタイポグラフィーを考えてみます。

テキストにこだわる理由の一つは、情報の汎用性

「テキストか画像か」。これって2009年になった今でも、デザイナー同士でたまに意見の対立する分野です。自分の場合は「極力テキストで」という立場で制作する事が多いのですが、見た目にこだわる人は見出しの画像化や、最近ではsIFR化（※参考記事）という手法を選ぶ人もいます。

自分がテキストにこだわる理由としては、まずユーザーにとっての情報の汎用性。次に制作者にとって制作時の生産性の高さが挙げられます。情報の汎用性には掲載された情報をコピペできるという点以外に、XML化してサマリー情報を配信する、CSSオフ時のプレーンHTMLへの対応、視覚に障害のある人への対応なども含まれます。

フォントセットを出力してくれるウェブサービス

まず最初にご紹介するのはこちら。ベースとなるフォントサイズ、フォントの種類、ラインハイト等の各種指定をプルダウンメニューから選ぶだけでCSSを書き出してくれます。指定した内容は即座にサンプルテキストに反映されるので、結果を確認しながら簡単にフォントの指定を行うことができます。

フォントの種類も、Win環境でセーフなもの、Mac環境でセーフなもの、どっちでも大丈夫なものと分けられているので迷うことがありません。フォントの指定が一通りできたら、サイト右上の“Get CSS”のリンク（ちょっと小さいです）からCSS記述を表示できます。

フォントサイズをpx単位からem単位に変換

次に紹介するのもわりと実用的なもので、px単位のフォント指定をem単位に変換してくれる便利なウェブサービスです。ウェブデザインって基本的にドットによるデザインの世界なので、px単位って馴染みやすいんですよね。けどユーザービリティなどを考えると、最近ではpxによる絶対指定ではなくemによる相対指定の方が推奨される場面が多いと思います。

このサイトでは、まず左のカラム内で表示したいフォントのサイズを選びます。すると真ん中のカラムの内容が変わります。ようするに12pxで表示したい場合はbodyを0.75emで指定して、ページ内の別の場所で18pxで表示させたい場合は1.5emと指定すればイイ、みたいな感じで早わかり表みたく使えます。計算が苦手な文系のデザイナーさんにオススメです。というか自分がそうなのですがｗ