視覚的デザインにおいて、フォントサイズの問題は単にfont-sizeだけを考えればいいわけではない。実用性を含めて考えるのならば、余白や段組など画面全体の構成要素を考慮する必要が出てくる。フォントサイズが拡大できればそれで良いわけではなく、フォントサイズを拡大しても通常通り観覧できることが理想だと言える。
まずはフォントサイズを大きくした際の参考例としてArielworks.netのある記事のスクリーンショット（「Gecko/20040206」による）を挙げる。基本的にArielworks.net内は同じCSSが適用されるのでどのページでもこのような見た目になる。
CSSを書く際にかなり気を使ったので余白が若干広い事以外は特に乱れが無く表示されている。とりあえず、理想型に近い。
position: absoluteの危険性段組関係のミスとしてposition: absoluteの危険性を考えたい。
スクリーンショットは『妖精現実 フェアリアル』のトップページだ。星占いソフト AstroLogia 5.30。 2004年4月29日にバージョンアップしました。
のブロックが| 最近の記事もくじ (9) | 過去の記事 (8) |
を覆い隠してしまっている。該当部分のスタイルは以下の様に定義されている。
position: absolute; top: 192px; left: 12px;
位置が「px」で指定されているため、フォントサイズが変化してもこのスタイルが適用さているブロックは全く動かない。そのためフォントサイズの拡大で押し出されてきた他の部分が下に潜ってしまうことになる。また、仮にもうすこし柔軟な「%」や「em」などで位置が指定されていたとしても、ブラウザ表示領域の横幅は変化しないため縦と横の比率がおかしくなり、どうしても位置関係がズレてしまう。（折り返しが発生すると特に）。position: absoluteはどうしても必要なとき以外は使わないようにしたほうが、フォントサイズの面から見れば好ましい。
段組関係でもう1つ実用レベルでは使えない例を挙げる。
「カラムの横幅を『px』で指定するのは良くない」という話は既に出尽くした意見だ。だからといって「フォントサイズを基準にして『em』で設定しよう」という単純な考えは、残念だが、浅はかとしか言いようがない。『煤 - Note』のスクリーンショットを例として挙げる。
「em」は単位自体がユーザーの操作に合わせてコロコロと変化するものだ。対して画面の横幅は固定である。当然、「em」で横幅を指定した場合、フォントサイズを拡大すればカラムの横幅は無限に広がっていき、ついには横スクロールバーが登場する。一般的に横スクロールバーは嫌われている（ホイール操作で移動できないのは面倒だ）ことから、「em」での横幅指定は「px」指定による弊害と同じような状況を作り出す可能性が高い。
表示領域の横幅が固定されている環境では、カラムの横幅は%による指定がもっとも適していると言える。%は柔軟であり、かつ領域の限界を知っている唯一の単位だ。
段組をしていないからと思って油断してはならない。余白を指定する場合にも単位が重要となる。
『あの日あの時あの場所で』を例に挙げさせて貰ったが、余白を「em」単位で指定してしまっているため、フォントサイズを大きくすれば大きくするほど文章表示領域が縮小してしまい折り返しが激しくなる。結果として可読性が下がってしまっている。
縦方向の余白や幅に関しては少なくともPC上で表示する分にはそれほど重要ではない。むしろ人間は「行数」を基準として縦方向の流れを見るため、各段落の間の幅などは「em」で指定した方が綺麗に決まる事が多い。
対して、paddingやmargin、widthなどで横方向の幅を指定する際には、常に次の2段階の考察が必要になる。
多くの場合、両サイドの余白はフォントサイズに合わせて変化する必要がない。また、各カラムの表示領域全体に対する横幅の割合も大抵は固定で済むはずだ。こういった場合、「ウィンドウサイズに対して柔軟」であり、かつ「フォントサイズに対しては固定」である「%」が最も適している。繰り返すが、領域の限界を知っているのは「%」のみである。
状況に適した単位を選ぶことがフォントサイズに対して柔軟なスタイルを作る上では最も重要な要素であると言える。