Photo by Yaku Han JP-Qrac

標準のフォントでは WEBの文章での「」や『』など約物の空きが気になります。
それを解消できる約物半角専用のWebフォント、Yaku Han JP  をご紹介します。

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

デザイナーの Qrac（クラク）さんが Noto Sans Japanese をベースに、特定の約物のみの半角フォントを制作したものが「Yaku Han JP」です。
現在はCDNもあり、とても簡単にサイトへ導入することができます。
とても軽量なフォントでなので、ダウンロードして各自サーバーへUPして使っても何ら問題はないと思います。

“Yaku Han JP”は、Web上の日本語テキストに含まれる約物を半角にする「約物半角専用Webフォント」です。GoogleのNoto Sans Japaneseをベースにしており、7ウェイト対応が可能となっています。

Yaku Han JP　https://qrac.github.io/yakuhanjp/

2つのバージョンがあります

Yaku Han JP には以下の２つのバージョンがあり、”、” や ”。” などもすべて文字詰めしたい場合は Full を、取りあえず「」（かっこ）だけなら Small を選択してください。

Full Version

、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝…

Small Amount Version

〈〉《》「」『』【】〔〕（）［］｛｝…

CDN

// 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">

CSS

CSSの font-family では、”ヒラギノ” や “メイリオ” などの日本語フォントよりも必ず前に指定します。

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

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

私もさっそくこのサイトへ Small 版を反映してみましたが、いかがでしょうか。
約物の詰めに関してはクライアントからご要望をいただくことが多かったので、それを簡単に解決できるこのフォントは個人的にはとてもありがたく、大変気に入りました。
仕事でも積極的に活用していきたいと思います。