Tag Archive for フォント

フォントのサイズ、px、em、pt どれが良い!?ウェブサイト PXtoEM.com が凄い!


本ブログでは、Theme に「ThemeZee.com::zeeSynergie」を採用していますが、最近この Theme で気になっているのがフォントサイズ!海外で開発された Theme は当然ですが日本語フォントに関する検討はしていないでしょうから調整が必要と私は信じてるのですが、それよりもフォントサイズの単位に、px や em や % が使われているのです。

どうしてバラバラの単位!??

これまで、私はフォントサイズには「pt(ポイント)」を使って固定していましたが、モダンブラウザが拡大や縮小ができるようになって、その調整が不可能な「pt」は利用すべきではなく・・・ということをどっかのウェブサイトで読んだので急遽「pt」に似ている「px(ピクセル)」を適用した記憶があります。しかし、「px」も十分ではなく・・・って、いったいどれを利用すれば良いのか全く理解できずにネットを調べてみるとどうやらまだまだ結論が出ていないようです。ただ、「pt」、「px」、「em」の関係は知っていて損はなさそうです。

すると・・・「PXtoEM.com」という凄いサイトを発見!(って、有名だったりして・・・)このサイト、自分のベースフォントサイズを決定すると、そのフォントサイズに合わせていろいろなフォントサイズの換算表を自動生成してくれる!しかも、「pt」、「px」、「em」の比較表を生成してくれて、更に CSS も自動生成してくれます。凄い!

ベースのフォントサイズを「12pt」とした時に生成される比較表も掲載しておきましょう。全て、上記のサイトやってくれます。

「12pt をベースフォントサイズにした時の「px」と「em」
Pixels EMs Percent Points
6px 0.375em 37.50% 5pt
7px 0.438em 44% 5pt
8px 0.5em 50.00% 6pt
9px 0.563em 56.30% 7pt
10px 0.625em 62.50% 8pt
11px 0.688em 69% 8pt
12px 0.75em 75.00% 9pt
13px 0.813em 81.30% 10pt
14px 0.875em 87.50% 11pt
15px 0.938em 94% 11pt
16px 1em 100.00% 12pt
17px 1.063em 106.30% 13pt
18px 1.125em 112.50% 14pt
19px 1.188em 119% 14pt
20px 1.25em 125.00% 15pt
21px 1.313em 131.30% 16pt
22px 1.375em 137.50% 17pt
23px 1.438em 144% 17pt
24px 1.5em 150% 18pt

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

ウェブ用のフォントは「MS Pゴシック」は時代遅れ!?「メイリオ」が常道!?


本ブログを起ち上げてからちょっと気になっていたウェブサイトのフォント。海外で開発された Theme を適用していると日本語のフォントの指定が無いので必ずといって良いほど自分で日本語用のフォントを加えています。

フォントは、当然ですが「Cascading Style Sheets (CSS)」で指定します。いわゆるスタイルシートで指定するわけですね!個人個人の好みもありますから一概には言えませんが私個人は常に「MS Pゴシック」が常道だと信じて、本ブログでも指定していたのですが、どうもいつも見慣れている他のサイトに比べるとフォントちょっと違っているような気がする・・・で調べてみると・・・「日経トレンディネット::Vista時代のWebページは新フォントの「メイリオ」に」というウェブページを発見!まじかよ!ちょっと古い記事ですが引用しておきましょう。

Windows Vista では、従来の Windows 標準フォント「MSゴシック」「MS Pゴシック」に代わるフォントとして、「メイリオ」が搭載されている。「メイリオ」は英語で「Meiryo」と表記されるように、日本語の「明瞭」に由来している。文字の見栄えが“明瞭”になるというのが新フォント開発の意図だ。

XP 時代のフォントと Vista 時代のフォントの違いは明白だ。例えばデジタル Arena の記事は、コラム本文を Windows Vista の「Internet Explorer 7」で見ると以前の XP 時代と同じように、本文は「MS Pゴシック」で表示される。ところが、日経BP総合のページからリンクでたどるニュースやコラムの本文の文字をよく見ると、「MS Pゴシック」ではなく、文字がくっきりと明瞭になった「メイリオ」が使われていることが分かる。

Windows XP だとか Vista だとか・・・以下に私がフォントに無頓着で意識していなかったかを納得する記事になっていますが、やっぱり対策を講じなければ!

そこで、「浅野晃の公的ウェブサイト::フォント設定について」を参考にさせて頂きました!CSS の「Font-Family」の設定を以下のように書き換えました。

font-family: メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MSPゴシック","MS P Gothic",Osaka,Verdana,Arial,Helvetica,sans-serif;

これまでの「MS Pゴシック」の優先順位を下げて「メイリオ」を最優先フォントへ。ブログでは気が付きにくいかもしれませんが、投稿記事を書くための HTML エディタもフォント変更したので明らかに良くなった!

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・