「約物半角専用のWebフォント」Yaku Han JPを紹介する。

フロントエンドの方には当たり前の知識かもしれませんが、感動したのでYaku Han JPを紹介する。

私の現職はエディトリアルな紙モノのデザインやグラフィックが多く、文字詰めというのはかなり気を使います。メインのタイトルは特に一文字ずつサイズや詰めを調整して仕上げる必要があります。現在フロントエンドを勉強中なのですが、webでの文字詰めには限界があるのだろうと、難を覚えつつあまり気にしないことにしておりました。

しかし、このフォント「Yaku Han JP」を導入するだけで半角記号が詰められるのです！はじめて知ったときは本当に感動的でした！

#どういうことか？
約物？という方のために、公式HPよりキャプチャしたものを引用します。

これが

こうなります！！

「」や（）【】、。などの約物と呼ばれる記号が半角になっています。

この記事のタイトルの1文字目を見てほしいのですが、
“「約物半角専用の…」…”
タイトルの1文字目“「”の前ににまるで半角スペースを空けているような気持にならないでしょうか...。
エディトリアルでは多くの場合この微妙なスペースを詰めます。理由は見た目など様々ありますが、広告のキャッチコピーなどでわざわざ記号を目立たせる必要性がないことを考えれば自然な処理かと思います。

この辺の文字詰めなどをもっと直感的に知りたい方はグラフィック社のTypographyというシリーズ書籍がおすすめです。webデザインの情報などは全くありませんが、書籍自体の文字詰めが素敵＆紹介事例の質が高い印象です。
ただの文章やタイトルなのに「な、なんかかっこいい！」となること請け合いです。

Yaku Han JPにおいては、公式のホームページからフォントや文字サイズを変えたり、シミュレーションをすることができます。

#使い方はとってもカンタン。
cdn版は読み込んで、cssのfont-familyの一番最初に設定するだけ。

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

style.css

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

#改めて、Yaku Han jpについて
約物半角専用のWebフォントです。
デザイナーのクラクさん（twitterリンク）が開発されました。公式HPのほかScrapboxで開発経緯や導入事例をいくつか紹介されています。CDNのアクセス数は月間で1億、jsDelivrに登録されている全ライブラリ中39位とのこと。(2018年4月のScrapboxへの書き込みより)

##全6種類
＜ゴシック体・明朝体・丸ゴシックの3種類＞×＜約物全部入り・カッコのみの2種類＞で前6種類のラインナップ。

	ゴシック体	明朝体	丸ゴシック
約物全部入り	YakuHanJP	YakuHanMP	YakuHanRP
カッコのみ	YakuHanJPs	YakuHanMPs	YakuHanRPs

###それぞれ下記のフォントをベースに作成しているとのこと。
ゴシック体はNoto Sans
明朝体はNoto Serif
丸ゴシックはRounded M+

###約物全部入りとカッコのみの違い
、。！？・；：などが含まれるか否かだけです。

	中身
全部入り	、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝
カッコのみ	〈〉《》「」『』【】〔〕（）［］｛｝

句読点まで詰まると若干詰まりすぎな印象があったので、私はゴシック体のカッコのみを使用しています。

参考：
公式HP
Scrapbox
github