アクセシビリティ
デベロッパーリソース
鷹野雅弘

鷹野雅弘（Masahiro Takano）

株式会社スイッチ

目次

  1. フォント指定
  2. MACに「ＭＳ Ｐゴシック」？
  3. ここまでのまとめ
  4. フォントサイズ
作成日:
2008年2月7日
ユーザレベル:
初心者, 中級
製品:
Dreamweaver CS3

CSSでのフォント指定について

この記事では、Adobe® Dreamweaver® CS3を使ってフォントやフォントサイズの指定を行う方法と、OS/ブラウザでの対応についての実験をご紹介します。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

フォント指定

Dreamweaverで、CSSを使ってフォント指定を行う際、迷わず「ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3」を指定している方が多いのではないかと思います。

図1

これは「ＭＳ Ｐゴシック」がなかったら「Osaka」、「Osaka」がなかったら「ヒラギノ角ゴ Pro W3」のように指定する手法ですが、今回はこれが本当に正しいのか、について考えてみます。

「ＭＳ Ｐゴシック」というフォント

「ＭＳ Ｐゴシック」と「MS ゴシック」というフォントがありますが、この違いである「P」はプロポーショナルを意味します。日本語フォントはバウンディングボックスという正方形内にデザインされていますが、このバウンディングボックスを無視して文字の形状に応じて文字幅を調整するのが「ＭＳ Ｐゴシック」です。
なんだかよさげに聞こえますが、ブラウザなど画面上で文字を読んでいくには字間がつまり過ぎていると感じる方もいるでしょう。

図2

［ブロック］カテゴリの［文字間隔］に「1ピクセル」のように入力することで、字間を調整することができます。 CSSのコードは「letter-spacing: 1px;」のように記述されます。

図3 図4

ちょっとこぶりな英数字

「ＭＳ Ｐゴシック」では英数字が少し「こぶり」です。 ［タイプ］カテゴリの［フォント］に「Verdana」を加え、「Verdana, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"」のように記述すれば、英数字のみ「Verdana」で表示されるようになります。

図5

字間調整を行っている場合、若干、英単語の字間が開きすぎるような感はありますが、小さめの文字を読むときには、視認性が高まるでしょう。
とりあえず、Windows環境ではフォント指定（＋字間調整）は、これで読みやすくなりました。

図6

ただし、欧文フォントと組み合わせるとベースラインが合わないため、リンク箇所などのアンダーラインが揃えるために「vertical-align:baseline;」を設定しておくとよいでしょう。

図7
ページ 1 / 4
次のページ

著者について

鷹野雅弘（Masahiro Takano）

Webサイトの構築やコンサルティングを行う傍ら、WebやDTPに関するトレーニングや執筆活動を行う。
著書に『できるクリエーターDreamweaver独習ナビ』（インプレス）、『Adobe Dreamweaver CS3 Essential Book』（毎日コミュニケーションズ）など、編著書に『Dreamweaverプロフェッショナル・スタイル［CS3対応］』など。
CSS Niteを主宰。