WordPressのフォントサイズはどのくらいが適当か?

ここ2週間ほど多忙でなかなかこのブログをいじれなかったのですが、今日は少し手が空いたので気になっていた部分を改造してみました。このブログはwordpressというシステムを使用しているのですが、以前もかいたように少しアウトローな使い方をしていることもあって、「何かあったらすぐぶっ壊れるかも…」とソワソワしながら作業しています(笑)

 

さて、ブログやホームページの改装というのは今までもやってきたことなのですが、もうかなり昔、ホームページの記述言語である「HTML」のバージョンが5に上がりました。と同時に、デザインを指定する「CSS」も3にバージョンアップ。この時点で既にホームページやブログのカスタマイズから遠のいていたので、もうなにがなんだかちんぷんかんぷんでした;;

とりあえず、パッと見て「見やすい」「読みやすい」という形にしたいなと思い、一番気になっていた「フォントサイズ」の調整を行いました。フォントサイズの変更は、基本は指定の数字を変えるだけでいいはずですが、これがなかなかどうして全然かわらず…;

CSSの中にも「このサイトは全体的にこうするよ!」という一括指定しているところと、「でもこの部分はこうするからね!」という個別指定しているところがあって、けっこうじっくり見ていかないと分からないのがツライです;

ブラウザによって違う表示

今このブログの記事タイトル(Wordpressのフォントサイズはどのくらいが適当か?の部分)は、19px、2.0remの指定になっています。

最初はもっとサイズが大きく、デフォルトの日本語が明朝表示でした。IEで見ると「さすがにこれは大きすぎ!」という感じだったのですが、chromeで見てみると丁度良いという歯がゆさ…もしIEに合わせてフォントを小さくしたら他ブラウザで見づらくなるのでは?という気がしてしまいました。ちなみに明朝体は恐ろしく綺麗な表示だったので、これはこれで良いなぁと思いましたが、やはり見やすさを考えてゴシックに変更。

とりあえず微調整していって、今現在の表示はこんなかんじです。

 

【IEでの100%表示】

調整したけどまだまだ結構大きいかな?というかんじ。でも最近このくらいのサイズのサイトも多いですし見やすくていいかなと思います。

 

【chromeでの100%表示】

丁度いいかな?というかんじですね。

 

【スマホ(android)での100%表示】

スマホになるともうタイトルと地の文が大差ないのでは…というかんじになってきますね。でも割とこんなかんじかもしれません。

 

CSSのフォントサイズ指定の「px」と「em」

ところでフォントサイズの指定にはむかしから「pt」や「px」などがありますが、wordpressを見ていると「em」もよくでてきますね。最初は「これはなんぞ??」と思って分からなかったのですが、「1文字の高さを基準にした単位」だということがわかりました。

こちらのサイトさんに分かりやすくかかれていました♪
http://memo.studiogaki.com/px-and-em/

 

だから最初に「基本のフォントサイズ」の指定をしておいて、その「基本サイズに対してこのくらいの大きさですよ!」と指定するわけですね。

ちなみに基本フォントサイズの指定が特にない場合や、font-size:100%という記述があった場合は、16pxが基準値となるそうで、なるほどな~と思いました。

 

前述のサイトさんでも書かれていたことですが、むかし一時期すごく小さい文字がはやったときがありましたよね。それを読んだとき「わ、わかる~!!」と思わず雄たけびを上げてしまいました(笑)今でもJUGEMとかのブログデザインは基本フォントサイズがすごく小さくて横幅も小さ目なのが多いですね。

ただ最近はスマホ主流になってきたせいか、管理者の趣味を反映したデザイン性の高いものより利便性の高いものの方が流行っているなという気がします。文字も大きくなったし、最近はほぼワイドですよね。

小さい文字がはやっていた時代は、小説を小さい文字で書く管理人さんも少なくありませんでしたよね。それがpx指定されていることも多々ありました。pxは絶対値指定で、読み手側で文字サイズの調整ができないので、うちの姉なんかは「小さすぎて読めない!!」とよく叫んでいました(笑)今となってはなつかしい話です。

 

見やすいフォントにしたい!

個人的には「10.5pt」の「UI Gothic」が大好きなのでこのコンビで指定したいところなのですが、そもそもptはあまりよくないようです。こちらはpxと違って相対値だけど、基本的にみかけませんね…。また「UI Gothic」も今はとんと見かけません。

私がこのブログで使用しているテンプレートは、デフォルトのフォント指定が「”Noto Sans”, sansserif;」となっていました。この場合、日本語フォント的にはデフォルトが明朝体となるようです。serifというフォントもありますが、こちらも同様に明朝体になりました。

ゴシック表示にしたかったので、「”Noto Sans”,serifmonospace;」の指定に変えたところ今の仕様に落ち着いたわけですが、このフォントデザインというのはなかなか曲者だなといつも思います。文字サイズ・書体・行間、この三つはもう三種の神器とよんでも過言ではないほど、文章の見やすさの如何を左右すると思います!

 

まだまだ改装したいところがたくさん…というより直したいところしかないぐらいの勢いですが、普通の記事もかきたいし物語も漫画もかきたいし…とにかくやりたいこと盛りだくさんすぎて日々困りますね…(笑)

とりあえずコツコツ見やすくしていきたいなあと思います。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です