人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: Tomo
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:EM PX お勧め オススメ サイズ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● pahoo
●27ポイント

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

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

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


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

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

◎質問者からの返答

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

ということは、

理想的には、

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

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

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


2 ● rokue
●27ポイント

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

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

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

YUI Fonts CSS

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

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

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


3 ● Fu-ki
●26ポイント

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

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


ちなみに、トヨタのホームページでは、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でした。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ