見分けにくかった見出し装体の視認性が大きく向上した(修正前・修正後)。
見出し装体の固定化
まず,これまで中景輪符が <h1>
で始まるか <h2>
で始まる(前後景輪一覧)かで描写内の見出し装体も1階層ずつずれていたが,これはいったん固定することにした。
ずれるのも HTML の文書構造からみれば間違った表現ではなく,中景輪符の表現も少し変えるべきかと考えていたが,これもなかなか難しい。中景輪符の知名部は,現状 <h1>
でも <h2>
でも font-size: 1.4em
,font-weight: bold
,letter-spacing: 0.05em
という装体になっている。輪郭という情報単位の粒度を考えた時,これ以下は小さ過ぎ,これ以上は大き過ぎという所だ。
他の要素も,要素同士の対比を考えて細かく装体を調整しているため,それらまで見出し装体の変化に合わせると保守性に悪影響を及ぼす。将来的にどうかはともかく,現時点でそこまでする利点は無いだろう。
CSS では h1 ~ .dln h2, h2 ~ .dln h3
のように兄弟結合子を使えば簡単に実装出来る。
装体調整
あくまでも描写内での見出し階層で装体を固定することにした上で,第1階層から第4階層までの描写内見出しには二本線・一本線・破線・点線と4種類の下線を付けることにした。これまでは第1階層に2px,第2階層に1pxの一本下線のみだった。
二本線は border-style
の double
では制御しにくいため ::after
を使い,1pxの線に2pxの間隔をあけた。また,点線も舞覧によって破線より目立ってしまう場合があるため,色を調整することにした。
最初は,第1階層の二本線,第2階層の一本線があれば十分かと思ったが,結局文字サイズだけの変化ではぱっと見分かりにくい。各描写内見出しに図形的な特徴があった方が良い。
文字サイズは,これまで 1.3em
,1.2em
,1.1em
,1.05em
,1em
だったのを 1.3em
,1.2em
,1.15em
,1.1em
,1.05em
とした。
1.3em
から 1.1em
まで0.05em刻みの方が数字的には綺麗かと思ったが,下線で特徴を付けても,特に第1階層と第2階層が一見して見分けにくかった(画面撮り)。それ以下は使用頻度も低いので0.05em刻みでも大きな問題はないだろう。
letter-spacing
や font-weight
の調整余地はもう少しありそうだが,視認性の改善という目的は十二分に果したのでここで一段落とした。
2pxの一本線よりも1pxの二本線の方がすっきりした印象になるのが意外だった。