ウェブトラフィック研究所
新作コンテンツRSSリーダー「RSS_today」
ホーム > ウェブアクセシビリティー講座 > 実践編1 文字の大きさについて

ウェブアクセシビリティー講座・実践編

文字の大きさについて

文字の大きさについての基本的な考え方

  1. 小さすぎる文字は、誰にとっても読みにくい。
  2. 最低限、ブラウザーで調整が可能な状態にしておく。
  3. ただし全てのユーザーが調節機能の存在を知っているとは限らない。

解説

身体的(フィジカル)な特性や、利用機材の環境(モニターの物理的な大きさや画面解像度)によって、最適なフォントサイズには個人差があります。

サイトの製作者側の閲覧環境において最適と思われるフォントサイズでデザインしている場合でも、例えば、高齢者や弱視のユーザーにとっては、文字が小さ過ぎて読み辛く感じる場合があります。

逆に小さなモニターを使用している場合や、複数のウインドウを同時に開いていブラウジングしている場合(複数のウェブサイトを比較検討している場合等)、文字のサイズが大きすぎると、ページの内容を把握するのに、余計な時間を費やすことになり、かえってストレスの原因となる場合があります。

したがって文字サイズについては、ユーザー側のブラウザーの機能を利用して、常に調整可能な状態にしておくことが大切です。

ソリューション

ブラウザーで文字サイズの調整が可能かどうかテストする。

さらにフォントサイズを大きくした場合でも、文字や画像が重なって判別不能になってしまうなどの問題が発生しない事を確認する。

ブラウザーの設定による文字サイズの変更方法

実践編

次に、HTMLの<FONT>要素とスタイルシートを使った、フォントサイズの設定方法を例示します。

お使いのブラウザで文字サイズの設定を変更してみてください。


 
FONT要素で、+1の指定をしています。
FONT要素で、4の指定をしています。
font-sizeプロパティーで、18pxの指定。
font-sizeプロパティーで、13.1ptの指定。
font-sizeプロパティーで、1.1emの指定。
font-sizeプロパティーで、110%の指定。
font-sizeプロパティーで、2.2exの指定。
font-sizeプロパティーで、largeの指定。
 

ウインドウズ版インターネットエクスプローラー(以下IE)の場合は、font-sizeプロパティで、px(ピクセル)やpt(ポイント)等の絶対的な単位を指定すると、ユーザーのブラウザーで文字サイズの調整を行う事が難しくなります。

スタイルシートのfont-sizeプロパティを使って、フォントサイズの指定を行う場合は、(パーセント,em,ex)等の相対的な単位を用いるようにしてください。

私の聞いた話では、とある中高年層向けのパソコン教室では、インターネットエクスプローラーの利用法についてのレクチャーの際に、ブラウザー機能による文字サイズの変更の方法を紹介すると、ちょっとした歓声が起こるそうです。この事は、小さすぎるフォントサイズの設定が、シニアユーザーにとって、ウェブサイトを、いかに利用しにくいものにしているか、という事実を物語っているように思います。

もう一点、このブラウザーの設定による文字サイズの変更方法も、100%全てのユーザーが知っているわけでは、ありません。

したがって、ウェブページのフォントサイズの設定をする場合は、デフォルト(IEの場合は「中」)で、充分な大きさを確保するようにしてください。

←目次へ〔1〕 | ↑このページの先頭へ〔0〕 | 特定の入力装置に依存しないへ〔2〕→
ファンケルマルチビタミンのご案内へ