画面の上で文字を組むという行為には、気づかぬうちに妥協が含まれていることがあります。
たとえば、句読点の余白や、カッコのふくらみ。見出しの冒頭が少しだけずれているのを見過ごしながら、どこかで「そういうものだ」と折り合いをつけてきた感覚が、私にもありました。
けれど、近年になって Web上の字詰めをめぐる技術が大きく変わりつつあります。CSSでの調整、OpenTypeの活用、そして「Yaku Han JP」という小さなフォントの登場。いずれも、かつて“できないこと”として諦められていた調整に、もう一度目を向けるきっかけを与えるものでした。
今回はこの「約物の詰め」という小さなテーマから、デジタルの文字組にまつわる思考と選択を、今一度考えてみたいと思います。
デジタル環境と日本語の字詰め
Webサイトの見出しやテキストで、日本語の句読点やカッコ類をはじめとした「約物」が間延びして見えてしまう。そんな経験をされた方はきっと多いと思います。
特にデザイナーや開発者であれば、意図していない妙なアキを見ると震えが止まらなくなってしまうものです。
印刷物では、約物の前後の空き（アキ）を調整し、美しい字詰めを実現しますが、Webブラウザの標準フォントでは約物が常に全角幅で配置されるため、たとえば見出しに「「」」や「、。」が含まれると、文字の塊が分断されたように見えてしまいます。
字詰めを怠った人が落ちる地獄があるかどうかは、私にもわかりません
上側ではカッコに余白があり、文頭が揃わずなんだか落ち着かない印象です。一方、下側では約物の余白が詰まり、行頭の揃いが良くなっています。背筋かピンと伸びるような感覚です。
エディトリアルとウェブは異なるものだと理解しつつも、視認性やバランスへのこだわりは捨てられない。そんなジレンマから長らくの間、CSSのletter-spacingを使って調整したり、見出し部分を画像化する手法も取られてきました。
ですが、いずれも保守性や更新性を損ねるため、実用性の点ではどうしても難しい部分がありました。
CSSのOpenType機能による約物詰め調整
こうした状況に変化をもたらしたのが、OpenTypeフォントの機能をCSSから呼び出す font-feature-settings プロパティの登場でした。
特に palt（Proportional Alternate Widths）という設定は、フォントに用意されたプロポーショナルな文字幅に切り替えるもので、例えば句読点やカッコ、小仮名、カタカナなどの字間を適切に調整してくれます。
body {
font-feature-settings: "palt";
}CSSに一行追加するだけの簡便な設定で字詰めができる上に、主要なモダンブラウザにも広く対応しているため、制作現場でも重宝される存在です。
ただし、使うフォントがOpenTypeのpaltに対応していなければ効果は出ません。
また、palt はすべての文字（仮名や漢字、英数字を含む）に影響を与えるため、文字がギュッと詰まりすぎてしまい、可読性が低くなってしまうこともあります。
約物専用Webフォント「Yaku Han JP」の登場
そんな中登場したのが、「Yaku Han JP」という約物専用のWebフォントでした。
正確なリリース時期の記憶が曖昧なのですが、2017〜2018年頃には広く制作現場で使用され始めていたと思います。特に文字周りへの意識が格段に鋭いグラフィックやDTP系出身のウェブデザイナーの方は、嬉しさのあまり大声で泣き叫んでいたことでしょう。
Yaku Han JPは、句読点やカッコなどの約物のみを収録し、それらの字幅を半角相当に調整したフォントです。
CDN等でheadタグ内でアセットを読み込み、Yaku Han JP をfont-familyの先頭に指定することで、対象となる約物だけが自動的にYaku Han JPで表示されます。約物以外の文字は通常の日本語フォントで表示されるため、font-feature-settingsのように文字が詰まりすぎることもありません。
body {
font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}Yaku Han JPという字面から、Noto Sans JPとセットで使わないといけないような雰囲気が漂っていますが、ベースがどの日本語フォントであっても約物だけを半角にできます。（ゴシックと明朝で読みこむべきファイルが異なる点は後述します。）
フォントファイルは3KB前後と非常に軽量で、読み込みの負担も少なく、CDNやnpmから簡単に導入可能です。私はheadタグ内で読み込むアセットの量が増えるにつれて体調が悪くなる特殊体質のため、いつも本当に助かっています。
書体と収録内容の違いによるバリエーションがありがたい
YakuHanJP には、以下のようなバリエーションがあります。
- YakuHanJP / YakuHanJPs（ゴシック体ベース）
- YakuHanMP / YakuHanMPs（明朝体ベース）
- YakuHanRP / YakuHanRPs（丸ゴシック体ベース）
メインのフォントに応じて、JPs / MPs / RPsのいずれかを選びます。決して、気分とノリで選択してはいけません。
また、それぞれに「Full」（すべての約物）と末尾にsの文字のついた「Small」（カッコ類のみ）というバージョンがあり、使用する書体や用途に応じて適切なファイルを選択します。
たとえば「本文では読点や句点の余白を残したいけれどカッコだけは詰めたい」という場合には末尾にsのついた「Small」バージョンが適しています。一律で適用するのではなく、このように小回りが効く点がとてもありがたいですね。
Yaku Hanとfont-feature-settingsの違い
YakuHan と font-feature-settings: “palt” は、どちらも約物の詰まりを改善するための手段ですが、それぞれ性質の違いがあります。
font-feature-settingsはすべての文字 にプロポーショナル幅を適用する（仮名や英数字も詰まる）に対して、YakuHanは約物だけに限定して字詰めを行います。
つまり、見出しなどで全体をキュッと引き締めたいならpalt、本文の自然なリズムは保ちつつ約物だけ整えたいなら YakuHan、という使い分けができるのです。
同じ「なけなしの金」であっても、それぞれ余裕が微妙に異なる点は人間と同じかもしれません
YakuHan はフォント非依存なので、OpenType対応でないフォントにも対応可能です。CSS一行で完結するpaltに比べ、外部フォントの読み込みが必要という点ではひと手間ありますが、その分確実な効果が得られます。
CDNで読み込むのが最も簡便ですが、フロントエンドの開発環境を用意している場合にはnpmを利用するのが良いと思います。
他のツールとの補完関係
YakuHan以外にも、FontForgeなどのフォントエディタを用いて独自に約物の幅を調整したフォントを作る方法もあります。
ただし、自前での調整は専門性が高い上に、再配布やライセンスの観点でも注意が必要です。
ちなみにYakuHanはCSSで制御できる環境向けに設計されていますが、ゲーム開発や画像生成などCSSが使えない場面向けに、YakuHanの約物グリフをベースフォントに合成した「マージフォント」も公式で提供されています。
痒いところに手が届きますね。
使い分ける、という選択
YakuHanやfont-feature-settingsは、今や多くのWeb制作現場で使われる字詰めの道具となりました。
しかし、便利さゆえに「とりあえず入れておく」が習慣になってしまうこともあると思います。（かく言う私も、毎回息をするようにYaku Hanをプロジェクトに入れてしまう癖がついています…）
見出しやキャッチコピーにはYakuHanが効果的でも、本文ではあえて詰めない方が自然に読めることもあります。
可読性、視覚的な落ち着き、サイトの目指すべきトーン。それらを見極めながら、詰める／詰めないの選択をしていくことも時には大切だと感じています。
美しい文字組は、細部へのまなざしと、適切な距離感から。
参考 : Yaku Han JP公式サイト