MoonNote

はてなブログテーマ / CSS / jQuery

フォントサイズの変更とデザイン性の維持

f:id:waitingmoon:20150606225621j:plain

はてなブログテーマ製作用のテストブログに青空文庫から引用した「吾輩は猫である」を投稿して、実際に投稿したときテキストがどのように表示されるかをテストしてみた。何度見ても余白の取り方やボーダーの引き方が Themehaus の New Standard に似すぎているので何とかしたい。

今日、制作していて気づいたことは、本文の幅は本文フォントサイズの倍数で指定した方が良いということ。

Windows 環境のWeb標準フォントであるメイリオの日本語部分は等幅であるため、一行に半角英数字を含まないという条件のもとに本文フォントサイズを 15px に指定した場合、本文の幅は 15px の倍数で指定しないと右端の数pxがデッドスペースになってしまう。

例えば、本文の幅を 656px、本文フォントサイズを 15px に指定すると、一行の幅は最大で 15px * 43(最大文字数)= 645 になり、残りの 11px がデッドスペースになる。

幅100%の画像の下に上記の条件を満たす行が続くと、幅の違いが顕著になって気持ちが悪い。カスタマイズ性とデザイン性を両立させるには、どんな本文フォントサイズを指定しても綺麗に収まる数値を本文の幅に指定する必要がある。しかし、そんな数値は存在しない。さてどうしたものか。

[追記:06月07日00時50分]
投稿してから1時間くらいしか経ってないけど、考えるだけ時間の無駄のような気がしたので無視しようと思う…