地域系のサイトを運営しています。


スタイルシートを使った、オススメのフォントサイズの指定方法について教えてください。
サイトの中で、主に使う本文のフォントについてです。

フォントのスタイルには、%,em,px 等色々なして方法がありますが、
サイトを訪れる人の、読みやすさ見やすさを重視した場合、どういった指定方法がお勧めでしょうか?

教えていただけると助かります。よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2009/01/15 19:45:19
  • 終了:2009/01/22 19:50:03

回答(3件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/01/15 22:08:30

ポイント27pt

我が国のWebコンテンツのアクセシビリティ標準として「JIS X 8341-3:2004」という規格があります。

これによると、「5.6.a 文字サイズの変更」として、下記のように示しています。

文字のサイズ及びフォントは,必要に応じ利用者が変更できるようにしなくてはならない。


すなわち、フォントサイズは "em" や "%" といった相対値指定が望ましいとしています。

また、CSS のキーワードである xx-small,x-small,small,medium,large,x-large,xx-large を用いても良いとしています。

id:nobu55

回答ありがとうございます。

ということは、

理想的には、

サイト作成の最初の段階で

本文で使うフォント(最もよく使うフォント)を、1em や100% に設定して

この値を目安に、各要素のサイズを、予め決めるという理解でよろしいでしょうか?

2009/01/15 22:29:50
id:rokue No.2

rokue回答回数9ベストアンサー獲得回数02009/01/16 01:07:49

ポイント27pt

上の方がいわれている通り、アクセシビリティ対応の基本としてはpt、px(絶対サイズ指定)ではなく%、em(相対サイズ指定)で指定するのが王道のようです。

あとは想定するユーザー層にあわせて基準のサイズを設定し(相対指定)、hx(各レベルの見出し)や通常フォントのサイズを決めるという流れになると思います。

デザイン面も含む話になりますが、相対指定の場合はブラウザごとにデフォルトのフォントサイズが異なるため、先に各ブラウザごとの差異を吸収するCSSをあてておくと見た目が統一できます。最近は下記のものがよく使われますので、これを参考にカスタマイズしてみてはいかがでしょうか。

YUI Fonts CSS

http://developer.yahoo.com/yui/fonts/

このCSSをあてた場合、各ブラウザでのデフォルト(100%)のフォントサイズは13px相当に統一されます。

蛇足ですが、「読みやすさ」を追求したいのであれば、line-heightや1行に含まれる文字数、背景色(画像)とテキストのコントラストを調整することも大切かと思います。

id:Fu-ki No.3

Fu-ki回答回数2ベストアンサー獲得回数02009/01/16 18:33:33

ポイント26pt

企業のページを参考にしてはどうでしょうか?

企業のページは見やすさについてもよく考えられていると思うので、参考になるのではないかと思います。


ちなみに、トヨタのホームページでは、CSSで大きさ別に次のように設定されています。

.small { color:#444444; font-size:10px; line-height:14px; }

.normal { color:#444444; font-size:12px; line-height:16px; }

.large { color:#444444; font-size:14px; line-height:18px; }

.larger { color:#444444; font-size:16px; line-height:20px; }

.ultra { color:#444444; font-size:18px; line-height:22px; }


行間の取り方なども参考になるのではないでしょうか?

CSSファイルは下のリンクから入手できます。

http://www.toyota.co.jp/jp/include/css/global.css

トヨタHPのアドレスです

http://www.toyota.co.jp/



補足ですが、はてなも見やすいなと思ったので調べてみたらfont-size:90%~100%で line-height:1.35でした。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません