Web でも字詰めする

CSS でそれなりに解決する

CSS で font-feature-settings を指定する

OpenType フォントには字間情報を制御するプロポーショナルメトリクスという機能があります。
CSS で font-feature-settings を指定すると、この機能が有効になり字間が詰まります。

百聞は一見にしかず。適用例です。

• 無指定

---

• font-feature-settings: plat; 指定

わかりにくいかもしれませんが、「ご覧ください」の下にある「総称で、」を見比べてみてください。未設定の場合と比べて字間が詰まっているので、「で」の位置が違いますね。

多少綺麗になりました。
ウェブで長文を読む場合には是非設定しておきたいですね。

font-feature-settings のオプションは plat だけでいいと思いますが、気になる方は参考リンクを参照ください。

font-feature-settings - CSS: カスケーディングスタイルシート | MDN

font-feature-settings は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御します。

developer.mozilla.org

とはいえ、 CSS の指定はサイト毎に依るため、自分で設定できないのでは？と思われるでしょう。
その場合は、 Stylus という Google Chorme アドオンで自分好みの CSS を追加するのがいいと思います。
Edge や Vivaldi といった、 Chromium 派生 Web ブラウザでも使えます。

私はこのアドオンを使って、「アルファベット」「ひらがな」「カタカナ」「漢字」をそれぞれ別のフォントで表示するようにしています。
「カタカナだけ明朝体」のようなこともできますし、忌しき MS なんちゃらフォントやらを消し去ることもできます。

それはまた別の機会に。

Stylus

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

chromewebstore.google.com

フォントで解決する

font-feature-settings の問題

CSS でも多少見栄えはよくなりましたが、まだ物足りない。
また、一番の問題は先に「OpenType フォントには」と書いたように、 OpenType 形式のフォントでしか利用することができません。
TrueType はおろか、残念ながらウェブフォントは OpenType 形式ではないので、 font-feature-settings が使えないのです。
Google Fonts には優れたフォントが多数ありますが、使えないのです。

Yaku Han JP という選択肢

「約物だけを半角にする」素晴しいフォントを公開されている方がいます。
そもそも約物とは？というのは、 Wikipedia を参照ください。

約物 - Wikipedia

ja.wikipedia.org

このフォントを使うと 、。!?〈〉《》「」『』【】〔〕・():;[]{} のような約物だけが半角になります。
sans-serif (ゴシック体) だけでなく、 serif (明朝体) もあります。
※ 明朝体の場合はフォント名が変わって Yaku Han MP になります

しかも、 CDN まで用意されています。
ありがたや～ですね。感謝しかない。

Yaku Han JP - 約物半角専用のフォント

Yaku Han JP（ヤクハンジェイピー）は、日本語テキストに含まれる約物を半角にするフォントです。

yakuhanjp.qranoko.jp

適用方法

ウェブフォントですが、約物限定なので、サイズも小さいです。
サイトに適用するのは特に難しいことはないのですが、強いて挙げるのであれば、英字フォントよりも後、日本語フォントよりも前に指定することぐらいでしょうか。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanjp.css">

body {
  font-family: Arial, YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

ローカル環境用のフォントも GitHub で用意されています。

Releases · qrac/yakuhanjp

Yakumono-Hankaku Fonts. Contribute to qrac/yakuhanjp development by creating an account on GitHub.

github.com

フォント名ですが、ウェブフォントの場合は「YakuHanJP」で半角スペなし、ローカル用は「Yaku Han JP」となるようなので、その点は注意ですね。

適用結果

早速当サイトにウェブフォントを設定し、ローカル環境にもインストールして、前述の Stylus で全サイトに適用できるようにしてみました。

• 適用前

---

• 適用後

CSS 適用だけでは違いがわかりにくかったですが、もう一目瞭然ですね。
明かに綺麗で読み易い。

画像や動画視聴ばかりという方もいると思いますが、まだまだ文字ベースでの情報収集は多いです。生成 AI 系も結局言語での指定です。

ぜひ綺麗なフォント、綺麗な字詰めを試してみてください。