2009年04月01日
文字サイズの指定はできる限り相対サイズで
レイアウトを行う際、スタイルシートを使用し小さめの文字サイズで固定しているサイトが多々ある。この場合、ユーザー自身で文字の大きさをコントロールすることが不可能になってしまう。
文字の指定をする場合は、絶対単位よりも相対単位で文字サイズを指定するほうがよい。閲覧者がフォントサイズを、自身の環境や状況に合わせて最適なサイズに変更できるよう、配慮する必要がある。
また、文字サイズを相対で指定したとしても、多くのユーザーはブラウザで文字サイズを変更するのを面倒に感じるため、コラムやニュースなどの文章を読ませるコンテンツは、あらかじめ文字サイズを大きめに設計しておいたほうがいい。
※相対的な単位とは、em や % などのこと。
文字の指定をする場合は、絶対単位よりも相対単位で文字サイズを指定するほうがよい。閲覧者がフォントサイズを、自身の環境や状況に合わせて最適なサイズに変更できるよう、配慮する必要がある。
また、文字サイズを相対で指定したとしても、多くのユーザーはブラウザで文字サイズを変更するのを面倒に感じるため、コラムやニュースなどの文章を読ませるコンテンツは、あらかじめ文字サイズを大きめに設計しておいたほうがいい。
※相対的な単位とは、em や % などのこと。
2009年04月01日
“読みやすさ”に配慮してフォントを選ぶ
代表的な二つのフォント、ゴシック体と明朝体。明朝体には見た目が美しく読みやすいという特徴があり、対してゴシック体には、認識しやすく印象に残りやすいという特徴があります。
とはいえ、それは紙面上でのことで、Web上(モニタ)では一概にそうとも言い切れない。画像として書き出す大きめの文字には明朝体もいいが、ユーザーに読ませるためのテキストはやはりシンプルなつくりのゴシック体の方が読みやすい。
明朝体はゴシックに比べるとつくりが細かく、そのような細い線は解像度の低いモニタで閲覧すると、潰れて見えてしまう可能性もあります。
WEBと印刷物は似ているようで全くちがいますね〜。
“和”を表わすために、読ませるための部分まで明朝体にしているサイトがたまに見かけるが、“和”のイメージは画像や色彩のビジュアル面で表現し、テキスト部分はゴシック体で表示した方が読みやすい。
また、各種ブラウザの表示の違いも要注意!。FirefoxやNetscapeはInternet Explorerと違い、表示フォントがデフォルトでは明朝体に設定されている。CSSの「font-family」を用いて、フォントの指定を行うことを忘れてはいけません。
ちなみに、viviのブログはvistaで標準搭載されているメイリオというフォント。
これがインストールされてないフォントはゴシックになってます。個人的にメイリオは
みやすくて好きです。
とはいえ、それは紙面上でのことで、Web上(モニタ)では一概にそうとも言い切れない。画像として書き出す大きめの文字には明朝体もいいが、ユーザーに読ませるためのテキストはやはりシンプルなつくりのゴシック体の方が読みやすい。
明朝体はゴシックに比べるとつくりが細かく、そのような細い線は解像度の低いモニタで閲覧すると、潰れて見えてしまう可能性もあります。
WEBと印刷物は似ているようで全くちがいますね〜。
“和”を表わすために、読ませるための部分まで明朝体にしているサイトがたまに見かけるが、“和”のイメージは画像や色彩のビジュアル面で表現し、テキスト部分はゴシック体で表示した方が読みやすい。
また、各種ブラウザの表示の違いも要注意!。FirefoxやNetscapeはInternet Explorerと違い、表示フォントがデフォルトでは明朝体に設定されている。CSSの「font-family」を用いて、フォントの指定を行うことを忘れてはいけません。
ちなみに、viviのブログはvistaで標準搭載されているメイリオというフォント。
これがインストールされてないフォントはゴシックになってます。個人的にメイリオは
みやすくて好きです。