WordPress.comブログ―読みやすさの追求

読みやすいフォント、フォントサイズ、フォントの濃さ、行間の試行錯誤を続けてきました。

色んなサイトにお世話になり、変更を何回も繰り返してきましたが、現在は、次のような形に落ち着こうとしています。

ベースは”メイリオ”で、
サイズ15px、色(濃さ)#111111、行間(ラインの高さ)1.8です。
HTML編集では次のようになります。
<p style=”line-height: 1.8;”>
<span style=”color: #111111; font-family: メイリオ; font-size: 15px;”>
…(表示されている”<>”は、全角記号ですので、HTML編集では、””の半角記号を使って下さい。以下も同じです)

このテーマの標準のフォントの色は#333333ですが、これでは、このようにチョット薄すぎます。

フォントサイズは、15インチ画面でも大き過ぎず、11インチ画面でも小さすぎないという感覚的な選択です。
行間(ラインの高さ)は、メイリオは、”1.8”が読み易いと思った次第です。

気分次第で、“游明朝”と“游ゴシック”も使います。
それぞれの表示に英語名の“Yu Mincho”と“Yu Gothic”があります。

“游明朝”はこんな感じになります。
「気分次第で、“游明朝”と“游ゴシック”も使います。それぞれの表示に英語名の“Yu Mincho”と“Yu Gothic”があります」

“游ゴシック”はこんな感じですね。
「気分次第で、“游明朝”と“游ゴシック”も使います。それぞれの表示に英語名の“Yu Mincho”と“Yu Gothic”があります」

HTML編集では、次のようになります。

“Yu Mincho”
<p style=”line-height: 1.7;”>
<span style=”color: #000000; font-family: Yu Mincho; font-size: medium;”>

“Yu Gothic”
<p style=”line-height: 1.7;”>
<span style=”color: #000000; font-family: Yu Gothic; font-size: medium;”>

どちらも、“メイリオ”の設定とは異なり、行間(ラインの高さ)1.7、色は黒#000000、サイズはmediumとなってます。
行間(ラインの高さ)は、1.8では乱雑に見えるような気がします。
    (むしろ、1.6の方が良いかもしれませんね)
色は、#000000(真っ黒)にしても、ちょっと薄く見えます。
    (フォントの密度が低いかもしれません…小さな文字では問題なさそうです)

サイズは、15pxにしますと、ちょっと小さすぎるようです。

なお、日本語名でも英語名でも同じだと考える方に妥当性があるのかもしれませんが、どうも違うように感じます。
英語名の方が、日本語名よりも若干色が濃く発色するように思われます。
まあ、気のせいかもしれませんが…(^-^;

但し、Windows 7では、“游明朝”、“游ゴシック”は(英語名の“Yu Mincho”、“Yu Gothic”も)サポートされておりませんので、それぞれ「MS 明朝」「MS ゴシック」で表示されると思われます。
これでは文字が大き過ぎてしまうかもしれませんね(-_-;)

PS.
う~ん、弱りましたね…厄介ですね…
私は、普段はFirefoxを、必要に応じてMicrosoft Edgeを使用しているのですが、Google Chromeも持っています。

表示されるフォントの色の濃さに違いが出るのです。

私の設定は、FirefoxとEdgeでは想定通りですが、Chromeでは、その表示が淡くなってしまうのです。
特に、“游明朝”と“游ゴシック”は淡すぎますね(-_-;)

つまり、私のパソコン環境下での見え方が、他の方々の環境によっては違って見えることになります。

ならばどうするか…簡単な解決方法は、“游明朝”と“游ゴシック”の使用は諦めることです。

“font-weight: 500”を設定に追加する方法もあります。
確かに、色は濃くなりますが、ちょっと、汚く見えるので、できれば使いたくないのです…

そして、“メイリオ”の色を#000000に設定するのがイイかもしれませんね。

PS.
シツコク追記です。
“font-weight: 500”を“游明朝”の設定に加える場合は、フォントサイズを15pxにして、行間(ラインの高さ)を1.8にするとそれなりに読み易くなりそうです。
文字は小さくなりますが、多分、文庫本の小説程度の大さかなと思います。
<p style=”line-height: 1.8;”><span style=”color: #000000; font-family:
Yu Mincho; font-size: 15px; font-weight: 500;”>

但し、“游ゴシック”ですと、相変わらず、汚く見えますね。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。