ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ フォントサイズをデザインする ]

フォントサイズをデザインする

creation date : 15 May,2006

フォントサイズのCSS設定が今重要視される。

  • ピクセルは使わない
  • 太字をうまく使う
  • メインサイズの決定
  • 英数フォントを知る

 日本語にターゲットを絞って異なるフォントサイズの表示について考察しなければと以前から責務を感じていた。かなりの作業時間が必要なので躊躇していたのだが、ここで思い切って決行だ。ここはじっくり一からやってみようと思う。

 まず、この頃気になることは、メインのフォントサイズを設定する場合、どの設定が一番対応力があるかということだ。

 この観点にはオリジナリティーがいる。日本語特有の問題をはらむので海外のウェブサイトは参考にはならないし、残念なことにブックマークしてある日本のウェブサイトにもこの点に関しては参考にしたいものがない。フォントサイズに関してはデザイン性に疑問符がつくが、文章を読ませることに主眼を置いたニュースサイトが先行しているのが現況だ。

 ひと回り大きくすることの効能は、太字を使用する違和感がなくなるのと、英数フォントのデザイン性を引き出せ、全体的にはメリハリのついたサイズで表示できる。

 次に、フォントファミリーの設定によって、最小-小-中-大-最大 へとブラウザの文字サイズをチェンジした場合、どういう具合に表示されるかという問題が視点だ。特に日本語と英数を混在させた場合の方法論を今一度検証する必要がある。

 以上の2点が解明すれば、よりバランスの良い文字列がデザインされることになる。そしてブラウザの文字サイズを最小にしても最大にしても遜色のないフォントサイズの設定がいくらか改善されるだろう。

日本語フォントサイズの%指定

 さて、英数はピクセル単位で指定するとその指定に応じたフォントサイズを表示するが、日本語の漢字、ひらがな、カタカナはそうはいかない。英数は1バイト、漢字・ひらがな・カタカナは2バイトだからだろうが、大体2ピクセル毎にそのサイズを変える。

 表1は、フォントサイズのピクセル値の9pxから19pxに対してパーセントで対応させた一覧である。尚、ブラウザはIE6で中(標準サイズ)で表示させた場合の結果であり、かなりアナログ的な方法でパーセントの設定を決定した。

 パーセントでフォントサイズを指定することが、今のデザインを進化させるために最も適合した方法だとウェブZYCO'Sでは考えている。メインサイズのパーセントを決定すると、イメージで使われる装飾的なもの、バナーなどに使われるイメージで制作する文字の大きさなど、バランスが問われてくることになる。だから、早めにフォントサイズを決定しておくことをオススメする。

 ピクセルの値毎に全て違うサイズで表示されているように見えるが、実際は同一サイズも混在している。

 表2では、最少(-2)、小(-1)、中(0)、大(+1)、最大(+2)の5種類の表示(IE6)でほぼ同一サイズになってしまったものを色分けしたものだ。例えば、小(-1)表示において、57%、63%、69%は全て同一サイズで表示される。

 さて、ここからは諸君の趣向だ。どのパーセント指定をメインにするかで許容できるサイズの種類の幅が広くも狭くもなることになる。

pixel percent pixel (screen display) percent (screen display)
9px 57% フォントの%指定 フォントの%指定
10px 63% フォントの%指定 フォントの%指定
11px 69% フォントの%指定 フォントの%指定
12px 75% フォントの%指定 フォントの%指定
13px 82% フォントの%指定 フォントの%指定
14px 88% フォントの%指定 フォントの%指定
15px 94% フォントの%指定 フォントの%指定
16px 100% フォントの%指定 フォントの%指定
17px 107% フォントの%指定 フォントの%指定
18px 113% フォントの%指定 フォントの%指定
19px 119% フォントの%指定 フォントの%指定
percent percent (screen display) -2 -1 0 +1 +2
57% フォントの%指定 a a a a a
63% フォントの%指定 a a b a a
69% フォントの%指定 a a b b b
75% フォントの%指定 b b c c c
82% フォントの%指定 b b c c c
88% フォントの%指定 c b d d d
94% フォントの%指定 c c d d d
100% フォントの%指定 d c e e e
107% フォントの%指定 d d e e e
113% フォントの%指定 e d f f f
119% フォントの%指定 e e f f f

このページで設定したフォントサイズについての記述

  • 表題は100%の太字で別のカラーを指定
  • メインサイズは88%
  • 一部88%の太字で別のカラーを指定
  • サイドバーのメニューは75%
  • 作成日は69%
  • 表の項目名は63%

フォントファミリーを設定し確かめる

FONTの特質を確認して適材適所に運用する。

 ここは主に英数フォントに対して日本語を混在させた表示の違いを確かめてみた。

 no はフォント指定をしていない。指定をしないと、MS PGothicで表示されるようだ。文字サイズを大きくすると太字になるが、日本語も英数も呼応してくれるので使い易い。

 Arialsans-sherif は似たような表示だが、sans-sherif の方がより小さなサイズから英数のみ太字で表示されるようだ。

 Trebuchet MS は注意が必要だ。ご覧の通り(XPは大丈夫なようですが、98がマズイ)日本語のサイズが一部間違って表示されるので、英数のみでの使用を考えるべきだろう。

 MS UI Gothic はプロポーショナルフォント。ひらがなとカタカナの文字幅が狭いのでメニュー部分に使われることが多い。

 最後のMS PGothic + Trebuchet MS は日本語(MS PGothic)と英数(Trebuchet MS)を使い分けたタイプでサイズだけ統一してある。

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。