【CSS】font-feature-settings: “palt”; が効く?効かない? テキストの括弧を簡単に揃える方法

font-feature-settingsとは?

font-feature-settings は、OpenTypeフォントの特定の機能を有効化・無効化できるCSSプロパティです。
その中でも、 “palt” はプロポーショナルメトリクス（Proportional Alternate Metrics）の略で、日本語の文字間調整を最適化し、
特に括弧（「（ ）」）や句読点のバランスを改善する機能を持ちます。

See the Pen font-feature-settings by Dezadezi (@dezadezi) on CodePen.

font-feature-settings: “palt”; が効かないケース

font-feature-settings: “palt”; が期待通りに適用されない原因はいくつか考えられます。

1. フォントが対応していない

“palt” はすべてのフォントでサポートされているわけではありません。特に、 Meiryo や MS PGothic などのシステムフォントでは適用されないことがあります。

対策 : Noto Sans JP, Yu Gothic, Hiragino Sans など、OpenType機能をサポートしているフォントを使用しましょう。

body {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
}

---

2. ブラウザがサポートしていない

font-feature-settingsの対応状況はブラウザによって異なります。
特に、古いバージョンのInternet Explorerや一部のモバイルブラウザでは適用されない場合があります。

対策: font-variant-alternates を併用することで、互換性を向上させることができます。

body {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  font-variant-alternates: proportional-width;
}

---

3. フォントサイズやレイアウトの影響

font-feature-settings: “palt”; はフォントのレンダリングに影響を与えるため、
フォントサイズが小さい場合に違いがほとんど見えないことがあります。
また、letter-spacing の値が大きすぎると効果が相殺されることもあります。

対策: letter-spacing の調整や、font-size の見直しを行うと改善される可能性があります。

p {
  font-size: 16px;
  letter-spacing: 0.05em;
}

font-feature-settings: “palt”; を活用する方法

✅ 括弧や句読点の見た目を揃える

以下のCSSを適用すると、日本語のテキスト内で括弧や句読点がきれいに整列し、読みやすくなります。

.text {
  font-family: "Hiragino Sans", sans-serif;
  font-feature-settings: "palt";
}

✅ font-kerning との併用

font-kerning: normal; を指定することで、カーニングの最適化を促し、さらに美しいタイポグラフィを実現できます。

.text {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  font-kerning: normal;
}

まとめ

• font-feature-settings: “palt”; は日本語の文字間隔を最適化する便利なCSSプロパティ
• フォントが対応していない場合は Noto Sans JP などのOpenType対応フォントを使用
• ブラウザの互換性を考慮し、font-variant-alternates との併用が有効
• letter-spacing や font-size の調整で適用効果を最大化

font-feature-settings を適切に使いこなすことで、美しく整ったテキストレイアウトを実現できます。ぜひ活用してみてください！