約物半角専用のWebフォントの話

デザイナーさんから聞いてはいたヤクハンのこと。
有名どころではNintendoさんなんかも使ってたフォント。

任天堂ホームページ

文字の頭にくる鍵カッコがズレるの、かっこよくないよね…。
という悩みを解決してくれるらしい。

「
↑わかりますか？左側にピッタリこないで、余白ができてますよね。

ザックリした認識しかなく、てっきり従来のフォントと同じで日本語網羅したNEWフォントか！と思ってました。

でも、違うじゃないか！
サイトをよく見ると、含まれているフォントは約物のみ。
ほーーーーーーん。

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

つまり、
、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝
だけ入っている。

！！！！

ようやく納得しました。
左右に無駄な余白ができてしまう記号（約物）のみを収録しているのか！
公式サイトのCSSコードを見てさらに納得。

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

ヤクハンを最優先にしておけば、約物は優先的にヤクハンフォントが当たり、それ以外は今まで通りNotoSansやその他のフォントが当たるので、ベースはNotoを保ちつつ、部分的にスタイリッシュにしてくれます。

ページトップの「Simulator」で色々選べるので、ゴシック・All・Notoと選んでCDNをhead内に貼り付けました。
ウェイトは随時CSSで設定すれば良さそう。

<!-- HTML：CDNリンクをhead内に貼り付け -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp-noto.min.css">

// CSS：bodyに設定
body {
　color:#000;
　background-color:#fff;
　font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", "MS P Gothic", san-serif;
　font-weight: 400;
　line-height: 1;
　letter-spacing: 0.03em;
　-webkit-font-smoothing: antialiased;
　-moz-osx-font-smoothing: grayscale;
}

ヤクハン当てつつ、今回はレギュラーのWeight400を指定。
letter-spacingをデフォルトで0.03emにしてるのは、よく一緒に仕事をするデザイナーさんのデザインとの関係です。
また、どの端末でも文字の太さを均等に見せるためにアンチエイリアスをかけています。

今後の…というか既に？トレンドなのかな。
ヤクハンはぜひ、WEBフォントではマストにしてほしいですね。
Notoなんか、最初から組み込んでくれればいいのに……と思ったりします。