ブログ記事の行間・文字間・大きさを考える

こんにちは!ココリネです。

ブログを開設して「ん? このブログ、文字が小さいなあ」「行間がつまってて見にくいな」と思ったことはありませんか?

スポンサーリンク

デフォルトの文字が小さいブログが多い

若い人にとっては、小さめの文字のほうがオシャレに思えるかもしれません。

こじんまりとして可愛らしくて、ついでにキラキラさせたりして。

しかし読み進めていくと、小さい字を読もう読もうと眼球さんが頑張ってしまい、だんだんと疲れていきます。

あるとき友人が、フォントサイズが極小の画面を開いてしまい「わたしの眼球をころす気か!」とすかさず画面を閉じていました。

文字の大きさを比較してみる

サンプル1(11px)たまごをボールに割り入れて、殻を三角コーナーに捨てるところを逆にしてしまい、たまごを三角コーナーにポン。そしてたまごの殻をボールに入れたことがあります。

砂糖と塩を間違えてクッキーを作ったこともあります(途中で気づきました)

サンプル2(14px)

たまごをボールに割り入れて、殻を三角コーナーに捨てるところを逆にしてしまい、たまごを三角コーナーにポン。そしてたまごの殻をボールに入れたことがあります。

砂糖と塩を間違えてクッキーを作ったこともあります(途中で気づきました)

サンプル3(17px)

たまごをボールに割り入れて、殻を三角コーナーに捨てるところを逆にしてしまい、たまごを三角コーナーにポン。そしてたまごの殻をボールに入れたことがあります。

砂糖と塩を間違えてクッキーを作ったこともあります(途中で気づきました)

文字の行間(行高)を比較してみる

サンプル1(1.0em)

たまごをボールに割り入れて、殻を三角コーナーに捨てるところを逆にしてしまい、たまごを三角コーナーにポン。そしてたまごの殻をボールに入れたことがあります。

砂糖と塩を間違えてクッキーを作ったこともあります(途中で気づきました)

サンプル2(1.5em)

たまごをボールに割り入れて、殻を三角コーナーに捨てるところを逆にしてしまい、たまごを三角コーナーにポン。そしてたまごの殻をボールに入れたことがあります。

砂糖と塩を間違えてクッキーを作ったこともあります(途中で気づきました)

サンプル3(2.0em)

たまごをボールに割り入れて、殻を三角コーナーに捨てるところを逆にしてしまい、たまごを三角コーナーにポン。そしてたまごの殻をボールに入れたことがあります。

砂糖と塩を間違えてクッキーを作ったこともあります(途中で気づきました)

文字間隔を比較してみる

サンプル1(0.1em)

改札口をとおる際に、玄関のかぎを出してタッチしようとしてしまいました。

サンプル2(0.5em)

改札口をとおる際に、玄関のかぎを出してタッチしようとしてしまいました。

サンプル3(2.0em)

改札口をとおる際に、玄関のかぎを出してタッチしようとしてしまいました。

pxで指定すると端末によっては違って見える

サンプルで紹介したpxとemのほかに、%やptなどで指定する方法があります。

現在ではpxでやみくもに問題とされているようです。

ピクセル指定をすると環境によっては大きなズレがある(ピクセル比がちがうから)別の端末で見ると、文字の大きさが違うということに直面します。

いろいろな人に読んでもらいたいと思ったら、いろいろな環境に適したデザインにしたいです。

「なんとなく指定できちゃうから、これでいっか~」ではなくて、きちんと勉強していきたいです。

こちらを参考にさせていただきました。

ferret-plus.com

saruwakakun.com

スポンサーリンク