CSSで句読点やカッコなどを文字詰めする方法

ウェブサイトで日本語を使うとき、日本語の句点（。）や読点（、）鍵カッコ（「」）は日本語フォントの性質上、等幅で表示されてしまいます。より優れたデザインで読みやすくするためには、文字詰めをしてあげる必要があります。

文字詰めをするCSS

以下の記述をすることで自動カーニングを実現することができます。

font-feature-settings: "palt";

英語と日本語で別々のフォントを指定するCSS

font-familyで英語フォントを前に指定して後から日本語フォントを指定することで、英語フォントに欠けた日本語のみを日本語フォントとして指定することができます。

font-family: Arial, 'Noto Sans JP', sans-serif;

参考サイト

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング（https://ics.media/entry/14087/）

「約物半角専用のWebフォント」Yaku Han JPを紹介する。（https://qiita.com/basho/items/b01f6159d64ccce12365）