CSSでテキストの読みやすさを調整する

本ブログはCodeFocusテーマを利用しています。 12/26にリリースしたv1.7.0で、テキストの読みやすさを向上させるためCSSを調整しました。今回はどのような意図で変更したのかメモです。

CodeFocusテーマについて
Before & After
変更内容
Windowsのフォント調整
文字間スペースの調整
aリンク前後のスペース調整
line-heightの調整
まとめ
参考

CodeFocusテーマについて

CodeFocusテーマは本ブログのテーマですが、記事更新して読み直すたびに、より読みやすいスタイルは何かを考えて更新し続けています。今回の調整もその一環です。

技術記事といえばZennですが、中にはSEOや巡回性ではなく見た目でZennとなることもあります。それもいいのですが、はてなブログでも技術記事を快適に読める選択を提供したいと考えてるので、一度CodeFocusテーマも試してみてください。

Before & After

まず、文章の見た目の違いを見てみましょう。

Before

After

変更内容

変更前はZennやNoteのスタイルを参考に次の調整をしていましたが、読みやすさの観点から見直しを行いました。

変更前の調整内容	変更後の調整内容
Windowsは`Meiryo`が使われる想定	Windowsで`Noto Sans JP`を`Meiryo`より優先して使うように調整
日本語文章の文字間スペースは未設定	`letter-spacing: 0.05em`で調整
fontのプロポーショナルフォント設定は未設定	`font-feature-settings: "palt" 1`を追加
aリンクの前後スペースは未設定	`a`タグの前後に`padding: 0 2px`の調整
全体は`line-height: 1.9`、`p`タグの行間は`line-height: 1.8`	全体を`line-height: 1.9`に統一

大きくは、文章の文字間スペースとリンク前後のスペースを追加したこと、Windowsのフォント調整がポイントです。

Windowsのフォント調整

変更前のフォント設定は以下のようになっていました。Windowsを除く環境ではHiraginoやHelvetica系フォントが優先される想定ですが、Windowsには通常ないのでMeiryoが選択されます。当初、Meiryoはそこまで悪くない見た目だと考えていましたが、iOSやmacOSで見た後にWindowsで見ると、ジャギーな印象が強く、プラットフォームを跨いだ時に見た目の統一感が損なわれてしまうことがわかりました。

font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Helvetica Neue', 'Helvetica', 'Meiryo', sans-serif, "Segoe UI Emoji";

WindowsでMeiryoが使われた時の見た目は以下の通りです。MSゴシックのようなジャギーさを感じます。

Meiryoの見た目

そこで、変更後は以下のようにNoto Sans JPを追加しMeiryoより優先されるようにしました。Windows 11には2025年4月から標準でNoto Sans JPがインストールされているため、事実上Windows環境ではNoto Sans JPが優先されることになります。Noto Sans JPはMeiryoよりも滑らかな印象で、Hiraginoに近い見た目なので、プラットフォームを跨いだ時の見た目の統一感が向上します。

font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Helvetica Neue', 'Helvetica', "Noto Sans JP", 'Meiryo', sans-serif, "Segoe UI Emoji";

WindowsでNoto Sans JPが使われた時の見た目は以下の通りです。

Noto Sans JPの見た目

ただ、Noto Sans JPはMeiryoよりも文字間が広いため、そのままだと今度は1行で収まる文字数が減ってしまい、逆に読みづらくなってしまいます。そこで、文字間スペースを調整します。

文字間スペースの調整

文字間スペースは、letter-spacingとfont-feature-settings: "palt" 1の両方を設定することで、より自然な見た目になるように調整しています。

当初は、letter-spacingのみで調整しようと考えましたが、全角文字と半角文字のバランスが難しく、またNoto Sans JPで文字幅が広がりすぎる問題もありました。そこで、この記事を参考に、font-feature-settings: "palt" 1も併用することにしました。

font-feature-settings: "palt"はプロポーショナルフォントを有効にするCSSプロパティで、フォントが対応しているなら文字ごとにプロポーショナルで自動調整されます。設定値ごとの見た目の違いを示します。ただ、これだけだと全体的に文字が詰まった印象になるため、letter-spacingも併用して調整します。

以下は、プロパティの組み合わせごとの見た目の違いです。例えば、句読点の、や全角文字、半角文字の見た目がどのように変わるかを比較しています。両方未設定では、、と全角文字が同じ幅で表示されて間延びした印象、かつ半角文字は狭く詰まった印象になります。font-feature-settings: "palt"のみ設定するとフォントごとのプロポーショナル幅が考慮されるため、や全角文字の間延びが解消されますが、全角/半角文字とも詰まった印象になります。letter-spacingのみ設定すると、全体的に文字間が広がり半角文字の詰まりが解消されますが、全角文字がより広がってしまいます。font-feature-settings: "palt" 1とletter-spacing両方を設定することで、全角文字はプロポーショナルですが適度な文字間、半角文字はほどほどの文字間で表示され、全体的に読みやすい見た目になります。

設定	見た目
未設定
`font-feature-settings: "palt" 1`のみ設定
`letter-spacing`のみ設定
`letter-spacing`と`font-feature-settings: "palt" 1`の両方を設定

font-feature-settingsは他にもいろいろ設定があるのですが、ブログ記事的にはこの設定ぐらいですかね?

aリンク前後のスペース調整

もう1つ気になっていたのが、aリンクの前後のスペースです。変更前は特に調整していなかったため、文章中のリンク部分は文章に溶け込んでいます。画像はWindowsですが、iOSのような1行が少ない文字列な環境ではリンク部分がやけに詰まって見えていました。これは日本語文中に英語のリンク部分が混じると、文字間のスペースが詰まって感じるためだと考えています。

aタグを無調整

当初はこれでも気にならなかったのですが、いくつかのZenn記事でリンク前後に半角スペースを入れている文章¹を読んでいて、リンク部分が色の違いだけでなくわずかなスペースがあることで詰まっている印象が減っていました。ただ、半角スペースほど広げる必要はなく1,2px程度で十分です。そこで、aタグの前後にpadding: 0 2pxを追加しています。