ホームページ(HP)のテキスト文字の使い方

ホームページを閲覧しているとテキスト文字がとても小さくて虫眼鏡でないと読めないものや、文字の大きさが変更できないものがあって困ることがあります。文字の大きさは問題なくても、文章の途中で改行してあり、とても読みにくいページもあります。また、一行おきに改行を入れたり、文章の途中に何行も改行が入っているものがあります。

他にも読みにくいホームページとしては、全てのテキスト文字が センタリング楽天 (中央寄せ)で書かれている場合は非常に見にくいものです。

ホームページで最も重要なのは文字の情報です。文字の情報をいかに読みやすくわかりやすく伝えるかが重要だと思います。

このページは私が推奨するものであって、強制するものではありません。文字を自分の好きなように使ってかまわないことはいうまでもありません。

テキスト文字の大きさ

文字の大きさは中ぐらいにしましょう

ホームページの文字が小さくて読みにくい場合は、いちいち文字を大きく表示して見なければなりません。全ての人が小さい文字を読めるとは限りません。文字の大きさは全ての人が読みやすいように中ぐらい(Medium)にしましょう。

また文字の大きさを大きくすると更にデザインが崩れて読めないページがあります。文字の大きさを最大にしても読めるようなページを作りましょう。

文字の大きさは相対指定しましょう

テキスト文字の大きさをポイント(pt)、ミリメートル(mm)、センチメートル(cm)、インチ(in)等で絶対指定すると、表示文字の大きさを変更しても大きさは変わりません。見る人にとってはとても不便です。メニュー等で画像の代わりにテキストを使うのなら絶対指定でも良いと思います。

ピクセル(px)は相対指定ということになっていますが、pxで指定するとユーザーが文字の大きさを変えることができません。

ホームページで使用する文字の大きさはem、ex、%やxx-large、x-large、large、medium、small、x-small、xx-smallを使って相対指定するようにしましょう。そうすれば見る人が自由に変えられて便利です。

改行の使い方

文脈の途中で改行しない

自分のパソコンではちょうど良い具合に表示されているのでしょうか、時々文脈の途中で改行されているページがよくあります。環境が違う他のパソコンではとても見にくいので、文脈の途中で改行するのはやめましょう。

メールソフトでは文脈の途中でも適度に改行してやらないと、メールソフトが勝手に改行を入れますので、読みにくくなることがあります。ホームページ上では普通、このようなことはありませんので、改行は段落の前のみにして、段落の後の文頭では字下げしましょう。又は、スタイルシートで字下げを設定しましょう。

一行おきに空白行を入れない

同様に一行おきに改行だけして空白行を挿入しているページがあります。文字を大きくして見ると間延びしたページとなり、縦スクロールを2倍しなくてはならず非常に見にくいページとなります。文字の小さいページに多いようです。

文字を大きくするか行間を広げるように指定しましょう。スタイルシートで　line-height: 130%　のように指定します。

何行も続けて空白行を入れない

文章の途中に何行も空白行を入れて、縦スクロールを延々とさせるページがありますが、これも使いにくいのでやめましょう。

文字の位置揃え

長い文章は左揃えで書く

長い文章をセンタリングして書くと、とても読みにくい文章になります。文頭があっちに行ったりこっちに来たりして、とても読めたものではありません。文頭を字下げして、左揃えにしましょう。要するに一般に市販されている本と同じように書くことが読みやすい文章になります。

文字の位置揃えにスペースを使わない

文字の先頭を右へ寄せたい時、スペースで寄せているページが時々あります。そして、文章の途中に改行を入れて文字揃えをしているページがよくあります。

これも自分のパソコンではうまく表示されていても、他のパソコンでは非常に見難くなっていることがあります。スペースで位置揃えをするのはやめましょう。このような時はスタイルシートでインデントを設定しましょう。