文字の間隔が詰まって見にくいな（醜いな）って前から思ってました。
ただ読みやすい色や間隔は？ 何を基準にすればいいの？ バカなの？ と思ってましたがさすがウェブです。
調べたら何でも出てくるもんですな。
しかもたった２行コードを追加しただけでできるのでめっちゃカンタンですよ！
読みやすいフォントサイズは15px前後で文字色は#434343
文字色をカスタマイズするにあたりエローラさん（@uszero80）の記事を参考にしました。
ブログでよく使われている設定を独自で調べてまとめてくださっていました。
ブロガーさんは一度見ておいたほうがいいですよ！
ちなみにフォントサイズは15px前後を採用していることが多いそうです。
まずフォントサイズですが、どのブログも 15px 前後としているようです。 何も指定してない場合、または font-size:100% で指定した場合、ブラウザは基本的に 16px で表示してくれます。 ユーザーが任意で文字の大きさを調整していることもありますが、14 ～ 16px が一応の目安といえるでしょう。
また私が気になっていた文字色についても、
文字の色は黒（#000000）ではなく、濃いグレーが使われていることが多いですね。 白い背景に黒い文字では、コントラスト比が高すぎてあまり目に優しくありません。薄くしすぎても視認性が悪いので、ちょっとだけ薄くするのがポイントです。
そしてもともと「#000000」だった文字色を「#434343」に変更しました。
こんにちはアットホームギークです。
今日は読みやすいデザインについて書いています。
こんにちはアットホームギークです。
今日は読みやすいデザインについて書いています。
ちなみにサイトの設定を調べるのにはGoogle Chromeの拡張機能が便利ですよ。
どうでしょうか？ちょっとわかりにくいですかね。
今までは”黒”だったのでちょっと主張が強すぎるというか目立っていた感があったのですが少し薄くなるだけで目に優しく見やすい色に変わりました。
これでだいぶ見やすくなったと思います。
参考：これが読みやすいブログデザイン！行間＆フォントサイズ編
文字の間隔は「letter-spacing」で調整すればいいよ
文字の間隔を指定するには「letter-spacing」を使います。
こちらはもともとの間隔が0pxだったのを1pxに変更しました。
こんにちはアットホームギークです。
今日は読みやすいデザインについて書いています。
こんにちはアットホームギークです。
今日は読みやすいデザインについて書いています。
こちらはモロに分かりやすく見やすくなったと思います。
参考：最適な「font-size」、「line-height」「letter-spacing」 – WEB制作 勉強ログ | WEB LOG
最終的にbody全体にこんな感じで設定しました。
body {
color: #434343;
letter-spacing: 1px;
}さいごにひとこと
これでだいぶ読みやすくなったと思います。
みなさんもこの機会にデザインを見直してみてはいかがでしょうか。
