●タイポグラフィスタイル
Webにおけるタイポグラフィには、さまざまな制約がある。ユーザーの環境（OSやブラウザ）の違い、グラウザの設定の違い、インストールされているフォントの違いなどが大きく影響する。
●フォントサイズの指定方法
フォントサイズの指定にはfont-sizeプロパティを使う。指定方法は単位やキーワードなどたくさんの種類がある。どの指定方法を使うかは、ブラウザの機能向上やアクセシビリティとの兼ね合いもあり、い
までも議論されている。
パソコンのモニタはドット（ピクセル）の集合体なので、ピクセル（px）での指定が一番わかりやすい。
画像やボックスのサイズなどもピクセルで指定するケースが多く、それらとの関係も壊れない。
ただし、ピクセルでの指定には問題があり、Internet Explorerでは、文字サイズが固定されてしまい、ユーザーが大きくしたり小さくしたりすることができなくなってしまう。オフィス文書などでなじみのあるポイント（pt）も同様。それに対して、キーワード（mediumなど）やパーセント（％）、相対単位であるエム（em)で指定されているフォントは文字サイズの変更可能。
ここで考慮すべきは「可読性」。デザイナーやコーダーの意図通りのフォントサイズにするためにピクセルで固定することで、ブラウザによって文字サイズが変更できず、ユーザーが困るかもしれない。デザイナーやコーダーの仕事は、すべての環境でフォントサイズを統一させることではなく、可読性を保つことを必須条件にできるだけ最低限のコントロールにとどめるのが大切。
そのため、パーセント、エム、キーワードなどの方法で指定するのが現実的な選択肢となるが、ピクセルと違い、ブラウザの種類やバージョンごとに表示サイズに差が出てしまう。差が出てオーケーな場合は良いのですが、デザイナーは通常、画像サイズのほかレイアウト要素との比率、1行の文字数などをきちんと考え、読みやすく伝わりやすいデザインしているはずなので、閲覧環境ごとに大きな差が出ることを歓迎しない。
「YUI Fonts CSS」 （Ver.2.5.2）でのフォントサイズ指定
body {
font: 13px/1. 231 arial, helvetica, clean, sans-serif; /*通常のブラウザは13px*/
font-size: small; /* IE全般はsmall */
font: x-small; /* IE 6/7後方互換モードはx-small */
}
/* IE 6以前でtableへフォントサイズの継承がうまくいかない問題を回避 */
table {font-size: inherit; font: 100%;}
/* IE全般でpreやcodeの等幅フォントサイズが小さくなるのを回避 */
pre,code,kbd,samp,tt {
font-family: monospace;
font-size: 108%;
line-height: 100%;
}
●これからのフォントサイズ指定を考える
ピクセル指定はIE6以前では文字サイズ変更ができないが、IE7、8では文字サイズ変更意外に「ページズーム」（拡大）機能がついたため、フォントサイズの相対指定や絶対指定に関わらず、文字や画像を含めたページ全体を拡大縮小できる。FireFoxもバージョン3からページ全体の拡大縮小が可能になったので、デザイナーの意図したレイアウトそのままで可読性が確保されることになる。
●フォントの種類の選択
フォントの種類（書体）の指定にはfont-familyのプロパティを使う。カンマで区切って複数指定でき、記述した順序でユーザーのパソコンにそのフォントがインストールされているか調べ、もしあればそれが適用されます。フォント名は環境の違いに配慮し、日本語名と英語名を書いておく。
body {
font-family:
" ヒラギノ角ゴ Pro W3", "Hiragino kaku Gothic Pro",
"メイリオ", Meiryo,
Osaka,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}
フォントはOSに標準で入っているほかに、アプリケーションに同梱され、インストール時に自動的に追加されるもの、多数のフォントを収録したソフトウェアパッケージを購入して自分で追加するもの、Web上で配布・販売されているダウンロード可能なフォントなどがあり、どのようなフォントがユーザーのパソコンにはいっているかはさまざま。
WindowsXP以前では「ＭＳＰゴシック、ＭＳＰ明朝」、Windows Vistaでは「メイリオ、ＭＳＰゴシック、ＭＳＰ明朝」、Mac OS9では「Osaka、平成明朝」といったフォントが標準なので、そのサイトで利用するフォントがゴシック系なのか明朝系なのかによって、これらのフォント名をfont-familyプロパティで指定しておくのが基本。
font-familyプロパティでは、総称ファミリー（generic-family）で指定しておくことが推奨されている。指定したフォントがすべてユーザーのパソコンに存在しないこともあるので、総称ファミリーを指定しておくことで、”保険”になる。通常はゴシック体に相当する「sans-serif」か明朝体に相当する「serif」を、font-familyプロパティの最後に指定しておく。
font-familyプロパティで使用できる総称ファミリー（generic-family）
| 総称ファミリー | 表示 |
|---|---|
| serif | 明朝体フォント（ヒラノギ明朝、MS P明朝、平成明朝など） |
| sans-serif | ゴシック系フォント（メイリオ、ヒラノギ角ゴ、MS Pゴシック、Osakaなど） |
| cursive | 筆記体・草書体 |
| fantasy | 装飾フォント |
●フォントの種類と可読性
フォントの種類を指定する際、フォントによって可読性が大きく変わるので、パソコンにインストールされているものならなんでもよい、というわけではない。
ゴシック体(sans-serif）か明朝体（serif）で考えると、たとえばパソコンのモニターでは小さい明朝体の可読性は非常に低いし、標準サイズ以上で使用したとしてもWindowsXP以前のブラウザの種類によっては、文字にアンチエイリアス（ジャギーと呼ばれる輪郭のギザギザを軽減して滑らかに表示すること。スムージング処理とも表現されることがある）がかからない。ゴシック体ならば、線の太さが一定なので、小さい文字やアンチエイリアスがかからない環境でも可読性は確保できる。
ゴシック体のなかでもWindows VistaやMac OS X、ブラウザの種類によってはアンチエイリアスのかかった読みやすいフォントで表示されるので、本文部分にはアンチエイリアス対応の「ヒラギノ」や「メイリオ」を適応しておくとよい。
「メイリオ」はWindows XPユーザーでもマイクロソフトのWebサイトから無償でダウンロードできるが、アンチエイリアスをかけるためにはフォントのインストールだけではなく特別な設定を行わなければならない。この設定を行わない場合アンチエイエイアスのかかっていない「ヒラギノ」や「メイリオ」が表示されてしまい、かえって読みにくい環境が生じる場合がある。
かといってfont-familyプロパティで先に「MS Pゴシック」を指定すればよいかというと、Mac OS X環境で問題が起きてしまう。
このようなフォントの複雑さをシンプルなＣＳＳだけで解決するのはきわめて困難。また、IE6、IE7でfont-familyプロパティで最初に指定されているフォントがユーザーのパソコンに存在しない場合、ソースコードの書き方によっては、ブラウザのデフォルトのフォントを適用してしまう場合がある。したがって、フォントの種類についてかなりの精度で対応しようとすると、ＣＳＳハックを利用した詳細な設定と、さまざまな環境での念入りな検証が必要になる。
* {
font-family:
"ヒラギノ角ゴ Pro W3", "Hiragino kaku Gothic Pro",
"メイリオ", Meiryo,
Osaka,
"MS Pゴシック ", "MS P Gothic",
sans-serif;
}
/* IE 7に対するフォントの種類 */
*first-child-html * {
font-family:
"メイリオ", Meiryo,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}
/* IE 6に対するフォントの種類*/
*html * {
font-family:
"メイリオ", Meiryo,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}
あるいは、このような複雑さを嫌って、まったくの無指定にするか、「sans-serif」や「serif」などの総称ファミリー名のみの指定にとどめておく方法も利用される。（ただし古いブラウザでは総称ファミリー名の指定だけでは文字化けが起こることがあるので、ターゲットブラウザに含める場合は注意が必要。）
●太字や斜体、線の装飾
フォントを太字や斜体（イタリック体）にしたり、線の装飾などを加えることができるが、適切に使わないと、読みやすさが下がってしまう点に注意。
たとえば、address要素（制作者・保護者情報）やem要素（強調）など一部の要素はブラウザではじめから斜体で表示される。しかし日本語のフォントは欧文フォントと異なり、複雑な感じなどが含まれるので、斜体にすると文字がつぶれて読みにくい場合があるので、font-styleプロパティ「normal」と指定しておき、斜体を戻しておいたほうがいい。
address, em {
font-style: normal; /*斜体を通常体に戻す */
}
線の修飾については、text-decorationプロパティで「underline」「overline」「line-through」などが指定できるが斜体と同じく複雑な漢字などに線が引かれると読みにくくなる。さらに、下線を引いたテキストはリンクと見間違えてしまう（ユーザーのクリックを誘引してしまう）ので、極力使用は控えるべき。
太字については問題ないので、h1～h6要素（見出し）やstrong要素（より強い強調）を太字で表示し、「重要なテキストであること」を示してくれる。
単に制作側のニーズだけではなく、ユーザーの読みやすさや理解しやすさを考えてフォントに装飾を加えるのが大切。
今日はここまで。
0 件のコメント:
コメントを投稿