作成開始日 2013.11.14
最終更新日 2013.11.20
ラスターフォント:小サイズでも奇麗で高速だが、文字装飾や書体変更は不可能(20ドット以上はゴシック可)
ベクターフォント:小サイズでは汚いが、文字装飾や書体変更は自由
ここで問題になるのは、ブラウザでの表示の問題。読み易さを優先すると、ラスターフォントで表示するのが良いが、それでは<em>や<strong>などの強調表現は一切無効になるし、フォントのサイズも限定されているので<large>すら効かない。ラスターフォントの大きさの系列(4ドット単位)とHTMLの文字サイズの系列(1.2倍単位)が一致しないため、こういう理不尽な現象が起きる。
そこで、何とかラスターフォントとベクターフォントの両方の長所を融合させることができないか、ということになる。が、結論から言えば無理だった。いかに装飾自由度に優れていようと、HTMLにベクターフォントを混入させるべきではない。見栄えが猛烈に落ちて、読む気が起きなくなるからである。ラスターフォントの中で表現を工夫するしかない−−例えば、強調の代わりに色を付けるとか、1サイズ大きなフォントにするとか−−というのが結論である。しかし、それにしたって、システムをいじらないと実現不可能だ。
ちなみに、スタイルシートを使えばフォントの変更も可能だ。したがって、文字装飾が必要な部分のみ、ベクターフォントを指定して文字装飾を有効にすることも可能だ。確かにそうなのだが、それがスンナリ行くようなら、何もこんなに悩んだりしない。一言で言えば、それでも小サイズのベクターフォントは汚すぎて使う気になれない、ということなのだ。
ちなみに、この関連付け機能には、一定の範囲内で近いサイズに丸めるオプションと、完全に一致するサイズのみを置換するオプションの2種類がある。文字の美しさで言えば前者の方が優れているが(基本的にベクターフォントを駆逐できるので)、このオプションを選ぶと<large>指定すらまともに効かなくなってしまう。なかなかに悩ましい。が、ここでは前者のオプションを指定することにする。それは、かなり回りくどい判断によるのだが…
まず、ブラウザではラスターフォントを基本にする。具体的には「MINCHO」または「MINCHO Proportional」だ。MINCHOは一般的な等幅フォントで、MINCHO Proportionalはその名の通りプロポーショナルフォントだ。英数字の交じるドキュメントでは、プロポーショナルフォントの方が読み易い。ところが、MINCHO Proportionalにはサイズが2種類(16px/20px)しかない。MINCHOが標準でも4サイズあるのに比べて非常に貧弱だ。大きな文字はともかくも、小さな文字が表示できないため、デザインが崩れるページが大量に出てきてしまう。しょうがないのでMINCHOにしてみたら、デザイン崩れは減ったが、やはり見栄えが今一つ。
そこで、関連付け機能を有効にした上で「HeiseiMincho-P」をベースフォントにした。HeiseiMincho-Pはプロポーショナルピッチのベクターフォントだが、関連付け機能のおかげで、大半の文字は12,14,16,20,24pxのラスターフォントが使用されるようになる。つまり、プロポーショナルで読み易い上に、奇麗なラスターフォントで表示され、小さな文字もきちんと小さく表示され、デザイン崩れもなくなるのである。しかも、汚いベクターフォントも交じらない。もし、関連付け機能で完全一致のみを置換するオプションを選んでいたら、どうしてもベクターフォントが交じってしまう。これが、上記のような設定をした理由である。つまり、プロポーショナルでサイズの豊富なラスターフォントを実現する「手段」として「ベクターフォント+関連付け機能」を指定したのである。もちろん、これでも文字装飾の問題はまったく解決できていないのだが、それについては後述する。
なお、この関連付け機能は全てのベクターフォントに有効なわけではない。基本的に、平成フォントとMSフォントに対してのみ有効で、RFフォントやUnicodeフォント(Times New Roman WT Jなど)には効かないようだ。
12px 帰って来たウルトラマン
16px 帰って来たウルトラマン
20px 帰って来たウルトラマン
24px 帰って来たウルトラマン
12px 帰って来たウルトラマン
14px 帰って来たウルトラマン
16px 帰って来たウルトラマン
20px 帰って来たウルトラマン
24px 帰って来たウルトラマン
(注)ビットマップへの関連付けが有効になっていないと、上記のサンプルはベクターフォントで表示される。
HeseiMincho-P | 帰って来たウルトラマン |
MINCHO(Normal) | 帰って来たウルトラマン |
GOTHIC(Normal) | 帰って来たウルトラマン |
Gothic(Normal) | 帰って来たウルトラマン |
平成角ゴシック | 帰って来たウルトラマン |
HeiseiGothic-P | 帰って来たウルトラマン |
RFゴシック-B | 帰って来たウルトラマン |
HeiseiGothic-P (48px:参考) | 帰って来たウルトラマン |
なお、何故かTrueTypeの平成フォントは他のフォントと比べてベースラインが上がるようだ。上記の例でも、上行にくっついて配置されているように見える。
▼ゴシック(ノーマル)
08pt 帰って来たウルトラマン |
▼ゴシック(システム)
08pt 帰って来たウルトラマン | |
▼平成ゴシックP(ATM)
08pt 帰って来たウルトラマン |
▼平成角ゴシック(TrueType)
08pt 帰って来たウルトラマン |
x:/Seamonkey/Mozilla/Profiles/Default/xxxxxxxx.slt/chrome/UserContent.css。ここに自分用のスタイル設定を定義しておけばよい。ただし、定義が有効になるのはブラウザ再起動後。試行錯誤段階ではlinkで明示的にcssを読み込む方が良い。ここにOS/2のフォントシステムの欠点を補うように、タグを再定義すればよい。ただし、ここでの再定義は表示するすべてのページに対して有効なので、極力汎用性を考慮しておかないといけない。
BODY{color:black; line-height:1.5em} H1{font-family:Gothic; font-size:28px; font-weight:normal;} H2{font-family:Gothic; font-size:24px; font-weight:normal;} H3{font-family:Gothic; font-size:20px; font-weight:normal;} H4{font-family:Gothic; font-size:16px; font-weight:normal;} STRONG{color:indigo} LARGE{font-family:MINCHO; font-size:125%; font-weight:normal; font-style:normal; vertical-align:-5%;}最初の行は行間を0.5行程度空けて読み易くする指定。これは問題ないだろう。
次のブロックは見出しの指定。ラスター決め打ちにしている。<h4>はいろいろ考えたが、汎用性を考えると下手にいじらない方が賢明と言う判断。本来、<h4>は本文と同じサイズの見出し。この設定ではサイズだけでなく、本文と完全に同じフォントになってしまうが実害はないだろう。メリハリが効かなくて見栄えが悪いだけ。<h3>以上は文字サイズが大きくなる上に、明らかなゴシック書体に変わるので、かなり見出しらしくなる。
むしろ問題は次の強調指定。ここでは例として<strong>だけを再定義している。<em>や<b>も同様に指定すれば良いのだが、あまり良い方法ではないので、ここでは<strong>だけにしておいた。今まで何度も述べたように、16pxラスターフォンを使っている限り強調装飾は無効である。そこで思い付くのは、強調の代わりに別のフォントに変更すること。と言っても、16pxラスターフォントは明朝もゴシックも同一グリフなので、単なるゴシック指定は意味がない。ベクターフォントでもラスター置換が効いていると同じく無意味。ラスター置換の対象外の、RFフォントを指定するという方法があるが、これには重大な問題がある。それは、字形がとても汚い上に、デフォルトのスタイルシートでは、日本語フォント名が通らないようなのだ。外部スタイルシートとしてリンクすれば問題なく指定できるようなのだが、なぜかデフォルトスタイルシートではダメ。かと言って、RF以外のラスター置換対象外のベクターフォントはUnicode系のTimes New Roman WT JやMonotype Sans Duospace WT Jくらいしかない。これらは字形はさらいに汚い。「そもそもできないし、できても汚い」のではお話にならない。
次に思い付くのは、強調の代わりに文字サイズを上げること。つまり;
STRONG{font-family:GOTHIC; font-size:125%; vertical-align:-5%;}てな感じだ。この方法のメリットは、いかにも「強調!」という感じがすることだが、流石に度が過ぎる。また、サイズが大きくなるのに応じて横幅も広くなるから、ページデザインが崩れる可能性もある。ちなみに、font-sizeを125%にしたのは、16pxの一つ上のサイズが20pxなので、125%より小さい倍率だとサイズが変わらないためだ。一度、<em>や<b>も全てこの設定にしたことがあるが、思いっきりガチャガチャな印象になってしまった。ダメとは言わないが、好ましい設定ではない。もっとも、私のページは<em>をこの設定にした上に、更に色まで変えている。ご覧の通り確かに強調効果は大きいが、下品な印象は免れない。
そこで、基本に立ち返って、なぜ強調表現が必要なのか考える。純粋に装飾目的だけであるなら、実はなくても害はない。しかし、強調表現がアイデンティファイに使われるとそうはいかない。たとえば、表の中に強調された数字がいくつかあり、「表の中の太字は○○である」というような説明がついていた場合、強調箇所が判らないのでは、文書の読解が不能になってしまう。逆に言うと、このような場合は強調されること自体に大きな意味があるのではなく、他から区別できれば良いのである。つまり、識別さえできれば強調である必要はない。となれば、色を変えたり下線を付けたりするだけでも事足りる。そこで、強調をindigo色表示に変更した。
ここで、アンダーラインではなく色変更を選んだのは、強調表現がどのような目的に使用されるか完璧に予想するのは不可能だからだ。もし、見出しまわりに使われたら、アンダーラインでは煩いだろう。極めて地味なindigoを選んだのも同じ理由だ。黒字と区別することは可能ではあるが読んでいて邪魔にならない色、という基準で選んだ。もちろん、白地(乃至は明色)に黒文字という標準的な配色のページであることが大前提だが。indigoでは判別が困難な場合もあるだろうから、そのあたりは良く見るページの配色や個人の好みで変更すればよい。
最後に、<large>を再定義しておいた。HTMLの文字サイズは、一つレベルが上がるごとに1.2倍になるそうだ。と言うことは、標準的な16ドット・フォントの一つ上のレベルは19.2ドットということになる。が、OS/2には16ドットと20ドットの中間サイズはない。なので、16ドットに丸められてしまう。すなわち、<large>指定はまったく効果がない。しようがないので、largeを1.25倍拡大に変更して、16ドットの一つ上を20ドットにしている。
RFに比べればATMの平成ゴシックPは比較的奇麗(それでもかなり汚いが)。 そこで、装飾(強調等)が必要な個所はHeseiGothic-Pを指定し、 フォントサイズを少し大きめに設定する(例:16px→18px or 110%)。 上記の設定では、フォントサイズを変更しないとラスター置換されてしまう。 また、ベクターフォントはラスターフォントよりも字面が小さいので、 少し大きめにした方がバランスが取れる。 なお、ベースラインのずれにはvertical-align:+10%などとして対処。
ただし、この設定では半端なサイズのフォントがすべてベクターフォントで表示されるため、ページ全体から受ける印象は非常に汚いものになる。