remove
powerd by nog twitter

フォントサイズを考えて夜も眠れない

デフォルトのフォントサイズ

デフォルトとは要するに
客;「ガソリン、満タンにして」
従業員;「レギュラーを現金でよろしいですか?」
客;(黙ってうなずく)
というやり取りである。 あえて注文を付けなかった項目(ガソリンの油種、カードか現金払いか)に関しては、 お決まりのパターンを当てはめてくる。 これが、デフォルト値というものであり、スタイルシートを用いる際に重要になってくる考え方でもある。

文字のサイズを指定しなかった場合、やはりデフォルトが用いられるのですが、 これに限っては一定ではないのです。 つまり、ブラウザの種類( IE とか NN )、ユーザー設定( 文字サイズ・大・中・小、など )によって デフォルトの文字サイズというのは変わってくるのです。 しかも、微妙に大きさが違うなんてコトもなく、 <大>と<中>ではドラマチックに大きさが違います。

読み手の意識

私は、ブラウザ(IE6)のメニューから{表示(V)}を選び{文字のサイズ(X)}と選ぶと ウェブサイトの文字サイズを変えられるなんて、長いコト知りませんでした。 Google などの検索エンジンで ”文字 サイズ” などと入力すると、 様々な解説ページが見つかります。 しかし、文字のサイズを変えられるという発想が脳内に湧き出してこない限り、 ”文字 サイズ” で検索をかける輩はいないでしょう。

つまり、”文字が小さくて読みにくいサイトだ” 。 ”文字のサイズを変更して大きくしよか” っという発想にはナカナカなりません。 何かしらの不満や嫌悪を感じればそのページから脱出するのが人間の本能でしょう (あるいは我慢して小さい文字を読むか)。 私は文字のサイズを変えられるコトを知った後も、ほとんどこの機能を使いません。 理由は面倒だというのと、今さらサイズを変えたら違和感を感じてしまうからです。

作り手の意識

HTML ではフォントサイズをデフォルト値を基準にして、大きくとか小さくとか、 そういう風にしか指定できませんでした。これを相対指定と呼びます。 しかし CSS (スタイルシート)を HTML の中に用いると、 16px (16ピクセル)とか、 12pt (12ポイント)といったデフォルト値無視の具体的な値が 設定できます。これを絶対指定と呼びます。

絶対指定はすべきではない、とも言われていますが、いい悪いは別にして 絶対指定を行なうメリット、これはハッキリしています。 ウェブサイトを作る人間としては本文をコレくらい、 見出しをコレくらい、リンク先一覧をコレくらい、という具合に文字のサイズをTPOに応じて変えていきます。 そして、作り手が想定したとおりの文字サイズで画面に表示させるのが最も美しく機能的に表示させる手段なワケです。 これは、印刷物と一緒の考え方ですね。 雑誌の表紙なんかにしても、様々な大きさの文字が並び、 タイトルや見出し、写真や説明文などが緻密に配置されています。 これは、それぞれの文字の大きさが具体的に規定されているから秩序を持って美しく配置されるワケです。

フォントサイズ絶対指定の利点はウェブ製作者が、 製作の過程においてレイアウトを行ないやすいという点にあると思います。 特に複雑なデザイン構成のウェブページであればある程、この利点は大きいでしょう。

しかし、この考え方には落とし穴があります。 雑誌のような紙媒体であれば、用紙の大きさ、用紙の紙質、印刷するプリンターの解像度などが同一なのですが、 ウェブの場合はユーザーによってウェブ閲覧環境が異なります。 これは、居間にパソコンが置いてあって家族と共有とか、ダイヤルアップ回線かブロードバンド回線か、 という問題ではなく使用している OS 、ブラウザ、ディスプレイのサイズ・解像度・画質といった問題です。 万民が作り手と同じパソコン、同じディスプレイでウェブを見るのなら、 作り手の指定した文字サイズで閲覧するのがベストとなりましょう。 しかし、現実としては雑多な環境のもとに各人がインターネットを利用しています。

誰が来るか分からないのが現実

極端な話、ウェブサイトをアップロードすると、アメリカやドイツ、チェコなんかからも 訪問者は来ます。日本語のページの中に使われている僅かな半角英数字を検索エンジンでたどって......。 しかし、彼らは和文フォントをインストールしていないでしょうから、 全角文字で書かれている部分に関しては全て文字化け、意味不明の記号の羅列を見るコトになります (最も、海外在住の日本人が来ただけという場合もありますが)。

このように、全くお役に立てないようなメリケンさんに対しても、 ウェブページの門は広く開かれているわけです。 ましてや、環境の違いからレイアウトが崩れるくらいのアクシデントは日常茶飯事ですし、 不具合を生じる相手に対して門を閉ざすというコトはできないわけです。 できない以上は、せめて9割がたのビジターに対しては、 解読可能にしてレイアウトバランスも好調な、美しく読みやすいページを提供したいものです。

最も不安定な要素、ディスプレイ

画面なんて 1024 * 768 が圧倒的主流派なんじゃなーい? と思っていたら、時代は動いていました('04年7月現在)。 いったい世の中には(実寸と解像度の両方において)途方も無く大きなディスプレイもあれば、 わけのわからぬ縦横比を持つ画面もあるものです。 もはや、1024 * 768 派は7割前後なのでは、と思います(とにかく微妙)。 それぐらい、ディスプレイの高解像度化は進んでいます。そして、今後、マスマス。

小さくなるんならともかく、大きくて画質も美しくなるんならエエやないの? とも考えられます。 時代遅れのヘボ・ディスプレイにて文字が普通に読めるのなら、 時代の最先端を行く最新型ではさらに読みやすいハズです。 若干、文字の設定を小さくしすぎたような気もしたけれど、 今後、ディスプレイが進化していくコトを考えたらまあエエか、という理屈もあるでしょう。

しかし、ちょっと待ってくれ。 解像度とは dpi ( dots per inch ) 、つまり1インチ(2.54mm)の幅に何ドット詰め込まれているか、 というオハナシであって、解像度が上がれば文字も小さく表示される寸法なんです。 pt (ポイント)などの絶対単位は画面の解像度によらず、常に一定の大きさで表示されるハズなんですが 実際は微妙なところみたいです。

例えば photoshop のような画像調節ソフトで画像を操作するとき、 実寸(cm とか inch)と解像度によって大きさが規定されます。 縦横 4inch (約10cm)で 300ppi なら、一辺が 1200ピクセルという具合に。 しかし、ウェブで使われる画像、 jpg と gif に解像度の概念はなく、ピクセル幅のみで大きさを規定しています。 というコトは、ウェブの画面構成において解像度の概念は関係なさそうです。 ウェブ自体に解像度の概念が無い為に、 1ピクセルの大きさは結局、ディスプレイの dpi しだいになる理屈。なワケです。

ややこしいハナシが過ぎましたが、 CSS の規定で pt や cm の単位を使うと 絶対的な寸法で表示されるというコトになっていますが、 ディスプレイの解像度の影響は受けるんです。 つまり、スタイルシートのいかなる方法で文字の大きさを規定したとしても、 ディスプレイの解像度が上がれば文字の表示サイズも縮小していく算段です。 絶対指定は、 ppi (OS依存)と dpi(ディスプレイ依存) が一致した場合に実寸で表示されるようにピクセル数を調節する、というダケのことです。

いくら高画質かつ高解像度でなめらかな文字だといっても、 あまりにも小さく表示されたんじゃ、さすがに読みにくいでしょう。 それでは逆に、時代遅れのヘボ・ディスプレイの解像度だと文字が大きすぎて 画面内に文字数がそれほど収まらない、というサイトならどうなるでしょうか。 ディスプレイの高解像度化によって、文字は小さくなり画面内の文字数は増えます。 これで、文字が程よい大きさになってくれれば最高です。 そう、うまいコトいかないとは思いますが。

印刷プレビューは?

ブラウザによっては印刷プレビュー機能が付いてますよね。 この印刷プレビューはディスプレイの dpi とは無関係に、 印刷用紙1ページに収まる文字量を決定しているハズです(ブラウザの機能なので)。 と、いうコトはプリンターで印刷される文字や線幅に関しては絶対指定の 実寸理論が生きてくるのではないでしょうか?

紙に印刷してしまえばある意味、 DTP 業界の単位指定と一緒ですもんね。 12pt と文字を指定すればプリントアウトの結果、 印字される文字の大きさは環境を問わず6分の1インチでそろうのでは なかろうか、と思います。

スタイルシートとは HTML に DTP(デスクトップ出版)の概念を 融合させようとする手段である、というのが自論なんですがどーでしょうか?  紙に印刷するところまで考えないと、 本質的には理解できないと言ってみたいワケです。

Mac は 72ppi 、Win は 96ppi

さて、文字サイズ指定を pt(ポイント)で行なうか px (ピクセル)で行なうか、による相違点というものは確かにあります。 古くから存在した Mac では 72px で 1in(1インチ)になるという計算をしていますが、 Win では 96px で 1in になるという計算です。 例えば6分の1インチに相当する 12pt に文字サイズを固定した場合、 Mac では 12px ですが Win では 16px になります。

しかし、1ピクセルの大きさが Win は Mac の4分の3になる為、 見かけ上の大きさは Mac の 12px と Win の 16px でほぼ同じになります。 このハナシは同じ dpi のディスプレイで表示させるコトが前提となりますが......。 逆に言えば、 14px のようにピクセルを用いてサイズを規定すると、 Win と Mac では見かけ上の大きさが変わってしまうというワケです。

つまり、pt でサイズ指定するメリットは Win と Mac において同じような大きさで表示されるという点にあります。

啓蒙活動を行なうサイト

弱視者や老人にも配慮したアクセシビリティをウェブサイトに取り入れるべきだ、 という主張をするサイトがあります。 そりゃあ、官公庁とか行政、ナントカ団体とかの公共性の高いサイトでは取り入れるべきですよ。 間接的にでも税金使ってウェブサイトを作っているのなら、利用者の裾野を広げるような努力をすべきです。 バリアフリーかつユニバーサル・デザインですよ。

それなら、個人サイトはどうなりますか? どうしようが、個人の勝手だと思うんですけどねー。 サイトに訪れたはいいものの読みにくいとビジターが感じれば、かなりの確率でそのサイトから逃げていきます。 それを考えると、読みにくいと感じなかった人だけがサイトに留まるワケですから 何の問題があろうか、という話ですよ。

それにアクセシビリティを連呼するサイトから感じるズルさというものは、 それらのページが凡庸なデザインに終始しているという点です。 ありきたりでシンプルなデザインにすれば、文字のサイズを変えたところで レイアウトが崩れるようなコトもありません。 このページのように何の面白味もないような構造であれば、 文字サイズを固定する必要もないワケです。

結局、万能の法則はナシ

ビジターが逃げるのは読みにくいと感じた場合だけでしょうか? 以下、文字が小さいという場合以外で、ウェブに訪れた電脳客人が逃げたがる要素を考えてみます。

さて、いい加減かつ自己主張を強くすれば上の方の要因で、 生真面目かつ神経質に作れば下の方の要因でビジターは逃げるでしょう。 結局、ウェブサイトをどう作ろうが誰かからは嫌われるワケです。絶対に。 普遍的にして万能なウェブ構築理論などあるわけないですよ。

・参考; フォントサイズの取り方の違い...
IE 以外のブラウザでは絶対指定文字の大きさも変えられる...

ORE.CSS 2nd Edition | CSS設計事務所