クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > CSS > 【CSSの文字詰め】Yaku Han JPとletter-spacingとfont-feature-settingsの比較

【CSSの文字詰め】Yaku Han JPとletter-spacingとfont-feature-settingsの比較

CSS

今日、テキストの約物（句読点やカッコなど）を文字詰めしてくれる素敵なWebフォント「Yaku Han JP」を知りました。CSSのデフォルトにある文字詰め機能、letter-spacingとfont-feature-settingsと見え方などを比較してみました。では、どうぞ。

※目次：

※参考：CSSの基本
【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと

約物詰めてくれる待望の素敵なWebフォント「Yaku Han JP」

今日、素敵なWebフォントを知りました。「Yaku Han JP」

※参考：「」や『』など約物が半角にできる、Yaku Han JP のご紹介 | デザイナーのタネあかし

え？何か素敵なんだかよくわからないって？ただのゴシック体じゃないかって？ いえいえ、見て欲しいのはそこぢゃない、約物ですよ。約物ってなんだって？そうですね、句読点とかカッコとか、記号系の文字あるじゃないですか。あれです。 「Yaku Han JP」を読み込むと約物部分を文字詰めしてくれるのです！！これは素敵ですよ！ なにが素敵なのか、順番に説明していきましょう。

紙媒体の二つの文字詰め文化

私はもともと印刷会社に勤務しておりまして、紙媒体では二つの文字詰め文化があります。

例えば句読点やカッコなど、半角字形のように見える約物の場合、下記のような設定にするなど。（※2021/08/08：約物半角について さんからいただいたコメントを参考に表現を変更しました）

  • グラフィックデザイン：字送りを半角にして次の文字との間が詰まるように見せる
  • エディトリアルデザイン：字送りを全角にして次の文字との間が半角空くように見せる（正し行頭行末は空けない）

前者は、要素（コンテンツ）のグルーピングとして、主にキャッチコピー、見出しなどのタイトル系を一塊りのブロックとして認識させる意図があります。
後者は、文章などの大量のテキストを読むときに、ところどころに一呼吸を置いて、読みやすくするさせる意図があります。
これは文化の違いであり、目的の違いであり、どちらが正しいとか上という話ではありません。*1

Webブラウザのシステムフォントは文字詰めに弱い

で、Webブラウザのシステムフォントですが、文字詰めに弱いです。あらゆる約物は基本的に全角1マスになります。こんな感じです。

まあ、文章の部分はいいんです、これでも。問題は見出しです。

ケンシロウは「お前はもう、死んでいる」と言った

なんというか…カッコの前後や句読点のところで半角のアキが入るので、見出しがパラパラと分割しているように見えます。
冒頭の「Yaku Han JP」と再度比較してみてくだせい。

これを防ぐために、かつてはグラフィックソフトで見出し部分を画像化して配置してました。alt属性にテキストを入れれば検索にはヒットしますしね。
でもデメリットとして見出し内のキーワードをユーザーがコピーできないのと、修正のたびにグラフィックソフトを開かねばなりま千円。

そうだ、letter-spacingで詰めよう

そうこうしているうちに、CSSにletter-spacingというものがあることを知りました。こんな書式です。

article {
    letter-spacing: -0.1em;
}

1emが1文字の大きさです。-0.1emだとマイナスなので、0,1文字分開けるのではなく詰めます。こんな見た目になります。

どうでしょう。前に比べて、少しシュッとした印象ですね。

もっと詰めるとどうでしょう。-0.2emいっときますか！

article {
    letter-spacing: -0.2em;
}

どうだ！

おっとっと、危ない（汗）。もうすぐ文字と文字がくっついちゃいそうですね。letter-spacingは-0.1emが限度だな。 しかも肝心の約物のところはまだ空いたままだし。

実は文字詰めには2種類ありまして

  • カーニング：特定の文字と文字の間だけを詰める
  • トラッキング：文章全体の文字間を詰める

letter-spacingは「トラッキング」を実現するCSSなんだよなー。。

※参考：[Å] 今まで曖昧だった「カーニング・トラッキング・文字詰め」の違いについてまとめてみました | あかめ女子のwebメモ

spanで特定の文字にletter-spacing

letter-spacingしか知らなかったころ、次に私がやってみたのは、特定の文字をspanタグで囲って、そこにletter-spacingを掛ける方法です。ザ・力技（笑）

<h1>ケンシロウ<span>は</span>「お前はもう<span>、</span>死んでいる<span>」</span>と言った</h1>

はと、と」をspanタグで囲って…

article span {
  letter-spacing: -0.5em;
}

letter-spacingを-0.5em（=半角詰め）にすると…

なんということでしょう！約物のところだけ「カーニング」を実現できました。 難点としては、spanで囲う場所が若干直感的ではない。はのところとかね。「を囲うとおとの間が詰まっちゃいます。 あと、この方法は手間が多いので、文章部分は現実的ではないですな。。

そこはfont-feature-settingsでしょ、社長！

手間暇を掛けますか？それとも文字詰めを諦めますか？
我々Webデザイナーには葛藤の日々です。紙媒体の品質を知るクライアントは当然「見出しの文字がパラパラなんですけど。。」と仰いますぁな。ええ、そうなんです。。

そんなとき、福音の鐘がなりました。font-feature-settings！！

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

さあ、ラピュタの呪文の如く、皆で唱えましょう。せ〜のっ「パルト（palt）！」

ムスカ「約物が、約物がぁ〜〜〜〜〜〜！！！！」 そうなんです！我々はついに手に入れました。すごいぞぉ！「カーニング」は本当にあったんだ！

ただし、当時はOSによって効くもの効かないものがあったんですよねぇ。特にMac OSとiOSが効かなかった。。

※参考：文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました | briccolog

しかし、この記事の続報が朗報です！MacとiOSも効くようになりました！！

※参考：【CSS】font-feature-settingsプロパティのmacOS/iOSでのバグが解消されていました【palt】 | briccolog

そしてYaku Han JPへ…

さて、冒頭の「Yaku Han JP」に戻ります。

※参考：「」や『』など約物が半角にできる、Yaku Han JP のご紹介 | デザイナーのタネあかし

Yaku Han JPはWebフォントなので、まずフォントファイルをインポートします。

// Full
<link rel="stylesheet" href="https://cdn.jsdelivr.net/yakuhanjp/1.3.1/css/yakuhanjp.min.css">

// Small
<link rel="stylesheet" href="https://cdn.jsdelivr.net/yakuhanjp/1.3.1/css/yakuhanjp_s.min.css">
  • Full：カッコと句読点など約物全般を詰める
  • Small：カッコのみを詰める

CodePenの場合はCSSのSettingの「Add External Stylesheets/Pens」にリンクを追加してください。

* {
  font-family: "YakuHanJP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

参考記事の説明の通りfont-familyプロパティで、YakuHanJPを日本語フォントより前に書きます。そうすることで約物が優先的に詰まります。

Webフォントを読み込む必要があることと、部分的に効果を掛けるためには、若干font-familyの指定が複雑になるかも？ただ、環境による差異はおそらく無さそうです。
難点としては、Webフォントなので初回は読み込みに少し時間がかかることですね。

最後に比較

最後にこれまで「カーニング」を実現できた3つの方法を比較してみましょう。

letter-spacing & spanタグ

font-feature-settings

YakuHanJP

まとめ

見た感想としては
* letter-spacing & spanタグ：は約物は詰まっているが、カタカナはパラパラ、漢字は窮屈、と細かい文字間のピッチが合っていない。*2
* font-feature-settings：「YakuHanJP」より少し窮屈？
* YakuHanJP：「font-feature-settings」より少しゆったり？

個人的にはfont-feature-settingsがいつの間にか適用範囲が拡がったことを知れて、グッと現実味が増した感があります！
それを知れたのも「YakuHanJP」との出会いがキッカケなので感謝です！

「YakuHanJP」、平尾さんのツイートで知りました。

Kageyamaさんのツイートが本記事の着想になりました。

二人に感謝です！それではまた…

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com

*1:ちなみに私は前職がエディトリアル寄り、前々職がグラフィック寄りでした

*2:ひらがなに比べ、カタカナは一回り小さく、漢字は一回り大きいのです