ブログ

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!

こんにちもじゃもじゃ、

雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。

ブログを趣味の一つとして運営しているもじゃです。

大人の趣味にブログがおすすめ|ブログが楽しいと思う3つのことについて!
大人の趣味にブログがおすすめ|ブログが楽しいと思う3つのことについて!こんにちもじゃもじゃ、雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 私がブログを始めたのが2018年12月なので、...

ブログを書くにあたってフォントサイズは気になるところもじゃよね。

闇もじゃめ
闇もじゃめ
文中で一部フォントサイズを変更すると、行数が変わることもあるもじゃね…
もじゃめ
もじゃめ
見ている人によっても変わってくるしね!

デフォルトだとフォントサイズは16pxとなっておりますが、

文章中で目立たせたいポイントなどに文字の大きさを変えて使いこなしたいところもじゃね。

px(ピクセル)

pxは画面上にある点の事で、1pxは1ドットと捉えても差し支えない。
この単位は環境によって変化しない絶対単位となっている。

実際にブログを書いている際にフォントサイズを変更することがありますが、

パソコンの設定やモニタの規格によって変わってくるサイズですので、

1pxがどれくらいのサイズ感なのかは見る人によって異なるもじゃね。

今回はワードプレスにてフォントを8pxから60pxまでそれぞれ表示しますのでどれくらいのサイズ感になるのかの参考にしてくださいもじゃ。

この記事はこんなあなたにおすすめ

〇フォントサイズを変更したことがない
〇フォントサイズを見比べたい
〇フォントサイズはデフォルトでしか使ったことがない

ちなみに、ここまでのフォントサイズは全てデフォルトの16pxで記事を書いているもじゃよ。

闇もじゃめ
闇もじゃめ
デフォルトだけだと読むのに飽きる時があるもじゃね…
もじゃめ
もじゃめ
見比べてみましょうもじゃ!

フォントサイズをそれぞれみてみよう

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!それでは、フォントサイズをそれぞれ見ていくもじゃよ。

ワードプレスのフォントサイズは8px~60pxの全12種類のサイズに変更することができるもじゃね。

闇もじゃめ
闇もじゃめ
使ったことないフォントサイズもあるもじゃよ…

各段落でフォントサイズをみていくのでいくつか比較する方法を提示させていただくもじゃね。

上記のルールでフォントサイズをみていくもじゃね。

みなさんの画面にどのくらいの大きさで文字が表示され、それによってどのような影響を与えているのかの参考にしてくださいもじゃ。

ちなみにフォントサイズは

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!で選択できるもじゃよ。

闇もじゃめ
闇もじゃめ
どのくらいの差がでるのかわくわくもじゃよ…
もじゃめ
もじゃめ
もじゃ君はこういった比較するの好きだよね!

フォントサイズ|8px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|10px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|12px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|14px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|16px

あ・あ

このブログではフォントサイズを比較していきます

フォントサイズ|20px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|24px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|28px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|32px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|36px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|48px

あ・

このブログではフォントサイズを比較していきます

フォントサイズ|60px

あ・

このブログではフォントサイズを比較していきます

12文字のフォントサイズを順に並べてみる

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!先ほどは各フォントサイズを比較してきましたが、

今度は12文字の列を並べてそれぞれのフォントサイズを変更していくもじゃよ。

闇もじゃめ
闇もじゃめ
大きさの変わっていく様子は気になるところもじゃね…
もじゃめ
もじゃめ
もじゃ君が羊だと自己紹介している文を使うんだね!

今回使用する12文字については下記のとおりとするもじゃね。

12文字の文字列

〇ああああああああああああ
〇こんにちはぼくひつじです

それぞれを左から右へ大きくするのとその逆についてみていくもじゃね。

また、デフォルトの16pxを赤文字で表示しておくもじゃね。

闇もじゃめ
闇もじゃめ
わくわくもじゃ…
もじゃめ
もじゃめ
面白い文字列になるね!

フォントサイズを左から右に大きくする

フォントサイズを左から右に小さくする

フォントサイズの最大と最小の差を見比べてみる

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!文中でのフォントサイズや文字列でのフォントサイズをみてきたところですが、

フォントサイズの最大と最小の大きさの差がどれくらいあるのかみてみましょうもじゃ。

ここでは2通りのフォントサイズをみていくもじゃよ。

2通りでフォントサイズを確認

〇単純に最大と最小の差をみる
〇間にデフォルトの16pxを挟む

単純にフォントサイズの最大と最小を隣り合わせにし確認してみる方法と間にデフォルトの16pxを入れてみる方法の2とおりでフォントサイズをみていくもじゃよ。

検証その1では「ああ」とし、検証その2では「あああ」の真ん中を16px(デフォルト)として確認するもじゃね。

闇もじゃめ
闇もじゃめ
最大と最小の差がすごくありそうもじゃ…
もじゃめ
もじゃめ
隣り合わせで普段使うことはないからね!

フォントサイズを検証その1

フォントサイズを検証その2

さいごに

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!今回はブログを書くにあたって重要な意味を持たすフォントサイズを見比べてみたもじゃよ。

様々なサイズを表示させたので、

自身のブログでフォントサイズに悩んだ時にこのブログでサイズ感を確認してみてはどうもじゃかな。

フォントサイズをデフォルトからかえることで文章に強弱がつき、伝えたいことをうまく伝えることができるようになるもじゃね。

自身のブログ運営に役立つことに期待するもじゃよ。

ちなみに、小さな「ぁ」はフォントサイズを20pxにすると「」となり、

通常の「あ」とサイズ感は大差なく見えるもじゃね。

左に小さな「ぁ」のフォントサイズを20pxにしたものと右側に通常の「あ」を並べて見比べてみると下記のとおりとなるもじゃよ。

サイズ感は同じ感じがしますが、文字の太さが左の方が大きな気がするもじゃね。

小さな文字を通常サイズに変更することはないと思いますが、実験の一つと考えれば面白いもじゃね。

ブログに関する記事は他にもありますので、よかったら参考にしてくださいもじゃ。

【ブログ】記事が書けなくて辛い人へ|書き続けるために必要な5つの改善方法について!
【ブログ】記事が書けなくて辛い人へ|書き続けるために必要な5つの改善方法について!こんにちもじゃもじゃ、雑記ブロガー『もじゃめ(@mojame_blog)』だよ。 ブログを書くのが辛い人、必見もじゃよ。 h...
【初心者】ブログを書くモチベーションをあげる方法
【初心者】ブログを書くモチベーションをあげる方法こんにちもじゃもじゃ、駆け出し雑記ブロガーのもじゃめ(@mojame_blog)だよ。 駆け出しブロガーではありますが、最近下記の...
闇もじゃめ
闇もじゃめ
比較するのは楽しいもじゃね…
もじゃめ
もじゃめ
最後まで読んでいただきありがもじゃもじゃ!
にほんブログ村

COMMENT

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