Webfont-feature-settingsと日本語文字詰めの調整について

文字詰めとは？

最近のWebデザインでは、font-feature-settings: "palt"を使って文字間を自動調整する手法が広く使われています。 これにより日本語の文章がすっきりと見やすくなるのですが、時として文字が詰まりすぎてしまい、かえって読みづらくなることがあります。

文字詰めの調整テクニック

1. letter-spacingとの組み合わせ

文字が詰まりすぎる場合、もっともシンプルな解決策はletter-spacingとの組み合わせです。

.text {
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

letter-spacingの値は0.02em〜0.08emの間で調整すると良いでしょう。フォントの種類や文章の長さによって、ちょうど良い値は変わってきます。

2. proportionalの強度調整

実はfont-feature-settingsには強度を指定することができます。

.text {
  font-feature-settings: "palt" 1;  /* 完全に有効 */
  /* または */
  font-feature-settings: "palt" 0;  /* 無効 */
}

3. 文字種による使い分け

句読点やカッコなど、特定の文字だけ詰めを調整したいこともあります。そんな時はHTMLで文字をくくって個別に指定できます。

<p class="text">
  こんにちは<span class="punctuation">、</span>みなさん
</p>

.text {
  font-feature-settings: "palt";
}

.punctuation {
  font-feature-settings: "palt" 0;
}

4. font-kerningの活用

より柔軟な制御が必要な場合は、font-kerningプロパティを使用する手もあります。

.text {
  font-kerning: normal;  /* auto | normal | none */
}

実践的なアプローチ

実際の制作現場では、これらの技術を組み合わせて使うことが多いです。例えば：

.article-text {
  /* 基本的な文字詰め */
  font-feature-settings: "palt";
  /* 少し字間を開ける */
  letter-spacing: 0.03em;
}

/* 見出しは強めの詰め */
.article-heading {
  font-feature-settings: "palt" 1;
  letter-spacing: 0;
}

/* 句読点は詰めない */
.punctuation {
  font-feature-settings: "palt" 0;
}