[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】

ちいラボでは、なるべく「文字が見やすい大きさ」に設定しています。
しかし、自分のスマートフォンで閲覧すると、一行の文字数が少ないために、改行が多すぎる気もしています。

そこで、文字の大きさをそのままに、「文字詰め」を狭めてみることにしました。

letter-spacing

全体的な字間をそのまま減らすには、letter-spacing に負の値を設定します（規定は0）。

letter-spacing: -0.05em;

font-feature-settings に “palt” を設定

また、文字の形に合わせて自動で文字詰めする（カーニング）には、font-feature-settings に "palt" を設定します（規定は normal¹）。

font-feature-settings: "palt";
font-feature-settings: normal;

normal は、引用符で囲まないんだね。

実際の比較

実際の文字詰めの見え方の違いを比べてみます。

letter-spacingの設定では、全部の文字が同じように詰められます。

font-feature-settingsの変更では、狭い文字が極端に詰められます。
本文でカーニングを有効にしてしまうと、句読点がちょっと狭すぎるようです。

比べてみると、本文は letter-spacing でわずかに詰めるのが、見出しはカーニングがよさそうだね。

before -> after

本文の字間を減らしたら、一行の文字数が約1文字分増えました。

/** 本文・見出しのカーニング（文字詰め）*/
.article p {
  letter-spacing: -0.05em;
}
.article h1, .article h2, .article h3 {
  font-feature-settings: "palt";
}

こちらもどうぞ。

[CSS] 幅とパディングの関係【box-sizing】

HTML要素の幅を固定して、パディングを内側に取りたいときには、「box-sizing」プロパティでborder-boxに指定します。 固定ヘッダーとサイドバーが重なって幅が取れない ウェブページに固定ヘッダーを作ろうと思いました。位置を ...

chiilabo.com

note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインは モバイルメニューです。 どうすれば...

chiilabo.com

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さ...

chiilabo.com

1. font-feature-settings – CSS: Cascading Style Sheets | MDN

QRコードを読み込むと、関連記事を確認できます。