メイリオ(4)――メイリオ系フォントのアセンダ・ディセンダ(2)(PC版ページへ)

2006年11月30日01:36  パソコン>フォント・スキン

最終更新日 2013年4月15日〕

メイリオ系フォントのアセンダ・ディセンダ(1)」(2006年11月27日)で、メイリオの内部レディング(フォントのアセンダ部分・ディセンダ部分それぞれに含まれる空隙)が他のフォントに比べてかなり大きいということについて書きました。そして、MeiryoKe_Gothic 系の内部レディングも MS ゴシック などの通常のフォントよりもやや大きいことについて触れました。

それで、一段落程度の長さの文章を実際に表示してみて各フォントの間にどの程度の違いがあるか調べてみました。ひとまとまりの文章の形にして各種フォントを比較したことはこれまでなかったのですが、よく見ると内部レディングの違いが明瞭に現れていることが分かります。上の2つは Internet Explorer での表示、下の2つは Firefox での表示です。Firefox に比べて Internet Explorer では空隙がかなり大きく表示されることが分かります。ブラウザによって内部レディングの解釈に違いがあるらしいというのは興味深いことです。

内部レディングの割合はメイリオが 50%、Meiryo UI が 27%。メイリオ改および MeiryoKe系が 18%(MeiryoKe_Console を除く)で MS ゴシック系と MeiryoKe_Console は 0% となっています――内部レディングについては「メイリオ系フォントのアセンダ・ディセンダ(1)」を参照して下さい

○(Internet Explorer)各フォントの表示比較1

各種フォントの表示比較1

○(Internet Explorer)各フォントの表示比較2

各種フォントの表示比較2

●(Firefox)各フォントの表示比較1

各種フォントの表示比較1

●(Firefox)各フォントの表示比較2

各種フォントの表示比較2

バックグラウンド・カラー(以下「背景色」と表記)指定した文字列の部分に注目すると、メイリオは上下の行の背景色が融合してしまっています。しかも、上の行の下部に下の行の背景色上部がかぶさっています。もし上の行に "y","g" などの文字があれば下の行の背景色が上の行の文字の下部にかぶさって消えてしまうということも起こるでしょう(line-height を 110%以下にしてみるとよく分かります。行間が不十分だと上の行の下部が下の行の背景色に上書きされてしまうために上の行の文字の一部が欠けてしまいます――「メイリオだと上部が切れる」と表現する方がいらっしゃいます。上の行が背景色指定されていて下の行が背景色なしの場合、行間隔が不十分だとたしかに下の行の文字の上部に上の行の背景色がかぶさってしまいますね――「メイリオ(6)――メイリオのディセンダを変える」の追記に載せたスクリーンショットを見るとその状況がもっとはっきり分かります)。

Internet Explorer ではメイリオ改や MeiryoKe_Gothic, MeiryoKe_PGothic は line-height が 130%以下では背景色部分の分離が不完全になります(135%以上にすれば完全に分離します)。しかしメイリオは line-height を 180%以上にしないと完全に分離させることができません。
―― Firefox の場合は メイリオ改や MeiryoKe は120%以上、メイリオは 165%以上で完全に分離します。

〔注記〕 メイリオのディセンダ・アセンダを MeiryoKe_Gothic と同じにしたメイリオ改を作る方法についての記事「メイリオ(6)――メイリオのディセンダを変える」を書きました。(2007/02/28)

〔注記2〕 「メイリオ(6)――メイリオのディセンダを変える」よりも簡潔な手順でメイリオ改を作る方法について「メイリオ(7)――メイリオのディセンダを変える(改)」を書きました。(2007/12/26)

つぎに横方向の文字間隔を見てみましょう。上の表示例のうち MeiryoKe_Gothic, MiryoKe_Console, MS ゴシック が等幅(とうはば)フォント系で、英数字(1バイト文字)の横幅が漢字・仮名(2バイト文字)のちょうど半分になっています。そのため、メイリオや MeiryoKe_PGothic, MS Pゴシック などのプロポーショナル・フォント系の英数字よりも幅が狭くてやせ細った感じがします。反対にプロポーショナル系の英数字の方が丸みがあってゆったりとしています。

いずれにせよ各フォントの字詰めはそれぞれ個性がありますが、MeiryoKe_Gothic, MiryoKe_Console は MS ゴシック の字詰め間隔に一致するように作られており、MeiryoKe_PGothic は MS Pゴシック と、MeiryoKe_UIGothic は MS UI Gothic とそれぞれ字詰め間隔を一致させて作られていることが分かります。また、MeiryoKe_UIGothic や MS UI Gothic, Meiryo UI などの UI(User Interface)系のプロポーショナルフォントは横方向に字を詰めるために日本語の仮名文字の横幅がかなり縮められたものになっています。

かつて MS-DOS には、等幅フォントしかなかったので、日本語ワープロやエディタでは 2バイトの文字コードで表わされる漢字・仮名等の文字を全角文字、1バイトの文字コードで表わされる英数字や記号を半角文字と呼んでいました(NEC の PC-9801 や PC-9821 には 2バイトの半角仮名なんていうのもありましたね――実は PC-9821Ra のワープロ「松」で私は今でもこの 2バイトの半角仮名を使っています)。現在私が愛用している MIFES というエディタや WinFD というファイラーではいまだに等幅のフォントしか使えません。しかし、日本の書籍は漢字・仮名に対して英数字はその幅が半分というのが基本ですので、行末や行頭の禁則処理さえきちんとできれば等幅フォントで表示するのが一番読みやすい、と私は思っています。現実はブラウザの行末・行頭処理が無茶苦茶ですので等幅でも行末が揃わないことが多くて、みっともない表示になってしまいます。

なお、このブログ『ことば・その周辺』の記事本文は〔font-size:100%; line-height:160%〕になっています。ブラウザのフォントサイズ設定がデフォルトのままなら、12pt のサイズで表示されていると思います。一般的なブログよりも大きめになっています。私自身、老眼のゆえに疲れてくると小さな文字では読みとるのがつらいのでこのように大きくしています。といいながら、Firefox のオプションで 15px を指定しているので、普段は 11pt のサイズで読んでいるわけです(でも、MS ゴシックだと 11pt では辛いかもしれません)。もし、文字が大きすぎるようでしたら、ブラウザで適切な大きさにしてご覧下さい。(IE や Firefox は Ctrl+ホイール で簡単に文字の大きさが変えられますね。他のブラウザのことは分かりませんが…)。

(関連記事)

(トラックバックを送った記事)

トラックバックURL

http://okrchicagob.blog4.fc2.com/tb.php/103-18671ceb

前の記事 次の記事



アクセスランキング ブログパーツ