見やすい読みやすいブログの設定とは?

hatenaロゴ

見やすい読みやすいブログは、フォントサイズ(文字の大きさ)、行の高さ(行間)、段落の余白の大きさなど、いったいどんな風に設定しているのでしょうか?

いろいろなブログを見た限り、個人的には、フォントサイズは16px~17px、行の高さは1.7~1.8、段落の余白の大きさは1em程度のブログが見やすかったような気がします。

このブログでもやっと記事のフォントサイズを15px(95%)から16pxに変更しました。
※ このブログのデザインテーマはMinimalismです。

CSS
/* 記事のフォントサイズなどの設定 */
.entry-content {
    font-size: 16px; /* 文字の大きさ */
    line-height: 1.8; /* 行の高さ */
}
.entry-content p {
    margin: 0 0 0.8em; /* 段落の余白の大きさ */
}

フォントサイズを変更したのはいいものの、フォントサイズを大きくすると一行あたりの文字数が減るので、一行ぴったりに収まっていた文章が改行されて、次の行に一文字だけ表示されたりします。それがちょっとイヤだったので、過去の記事をすべて修正しました...。

ただ、一行あたりの文字数が減るなら、記事の表示領域を増やせばいいということで、記事部分の幅を640pxから660pxに、サイドバーも290pxから300pxに少し大きくしています。

CSS
/* 記事部分の幅 */
#main {
    width: 660px !important;
}

/* サイドバーの幅 */
#box2 {
    width: 300px !important;
}

文才がないので、せめて少しでも見やすくと思っているのですが、なかなか難しい...。

参考になるブログ・Webサイト

ブログの行間とフォントサイズをCSSで調整して読みやすい …
本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間、段落ごとの余白ですね。 また、この設定に深く関わってくる文字のサイズや色をどのようにすれば読みやすくなるのか、サンプルとあわせてご覧ください。
文字と行間の大きさは何が良い?読みやすさとKPI両立への挑戦
みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか? 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが…