Webで行う役物の文字詰め方法(font-feature-settings, YakuHanJP)

はじめに

この記事の概要

こんにちは、株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWeb上での役物の文字詰めについて、CSSだけで完結する方法や特殊なWebフォントを使用する方法を紹介します！

Webサイトのタイトルやテキスト内で「」や、。（）などの役物を使う機会があるかと思いますが、それらの役物は字間が大きすぎてしまい見た目が悪くなってしまうことがあります。

例えば、テキストの先頭や文中に「」や（）などの役物を使用した際は全体が揃っていないような見え方になります。（特に左側）

Webでは文字詰めできないからしょうがない、、、 と私も思っていましたが、役物に対してだけ文字詰めができる方法がありました！

今回ご紹介する2つの方法はどちらも簡単な方法です！
Webデザインの細部のクオリティを上げたいと思っているあなたにおすすめの内容ですので、ぜひ使ってみてください！

対象読者

• Webデザイナー
• HTML,CSSコーダー

CSSプロパティ font-feature-settings

まず紹介するのがCSSのプロパティであるfont-feature-settingsを使う方法です。

font-feature-settings: "palt";を指定することで、役物の文字詰めが可能です。
めちゃくちゃ簡単な方法ですが、若干詰まり過ぎてしまう印象を受けます。(誤差？)

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

Webフォント YakuHanJP

続いてはYakuHanJPというWebフォントを使用する方法です。

実際に使うにはCDNでWebフォントを読み込み、CSSでフォントを指定する必要があります。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.min.css"
/>

.yakuhanjp {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}

さいごに

今回はWeb上での役物の文字詰めについて紹介しました！
CSSだけで完結する方法や特殊なWebフォントを使用する方法があったかと思いますが、用途によって使い分けてみてください！