もうWEBで約物に困らない? 日本語約物WEBフォント「Yaku Han JP」を試してみる

Update:

約物、「やくもの」と読みます。「やくぶん」や「やくぶつ」は間違いです（当初間違えて記事に書いてました。。）
「」『』（）【】、。！？ といった全角だと幅を食う記号類です。
この約物についての説明は以下サイトがさすが印刷屋さんの運営だけあって詳しくわかりやすいです。

ご存知でしたか？印刷の世界での呼び名「約物」
文字・数字以外の記号「約物」 「約物」と書いて「ヤクブツ」ではなく「やくもの」。PCの文字入力で「やくもの」の変換が「焼...

以前、下記の記事で触れて（文句を書いて）いましたが、DTPデザイナーがイラレでWEBデザインしたときあるある「カッコや句読点などの約物を詰めて出してくる。なおテキストで配置してほしいと言っている」、半角カッコを置したりして誤魔化していました。

IllustratorでWEBものデザイン、注意点まとめ
XDが人気でも便利でも、まだまだイラレでWEBものデザインをすることがあります。デザインによっては、結局イラレを使った方がスムーズに作業できる場合もあります。しかし、WEBものデザインの仕方を把握できていなくて、後々混乱することも。本当なら簡単なコーディングはできる（理解している）状態でデザインをした方がいいのですが、デザイン専門でやってる人に少々酷な注文でしょう。そういった場合の説明用記事です。現在、内容を増補中です。デザイナーとコーダーがナレッジ共有してスムーズに進行できるために、「イラレでデザ...

しかし、やはり皆さん困っていたようで約物半角専用のWebフォントが開発されています。今回の記事ではそのWebフォントの1つである「Yaku Han JP」を試してみます。

「Yaku Han JP」

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

Noto Sansベースでゴシック体、明朝体、丸ゴシックとバリエーションがあるのも嬉しいところですね。
さらに句読点、！？を含めた約物全部入りver、カッコのみverがさらにあり、合計で6バージョンが用意されています。

このFONTを開発したのがデザイナーさんだけあって、サイトも見やすい&スッキリ。
font-weightやfont-sizeによっての見え方のBefore Afterもここで試しつつ、該当FONTのCDNとCSSも合わせて表示される気配りっぷり！

使い方

WEBフォントを導入したことがある方なら悩まないかと思います。

1. headにCDNで読み込み

ここでは前述の公式サイトでゴシック体で約物全部入りを選択しました。
6バージョンごとにCDN、font-familyの指定が異なるので、もし実装後に反映されない場合はチェックしてみてください。

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

2. CSSでオリジナルclassを作ってfont-familyを設定

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

3. 反映させたい箇所に2で作成したclassを付加

Demo: デフォルト

〇〇〇〇
「〇〇〇」

　二疋の蟹の子供らが青じろい水の底で話していました。
『クラムボンはわらったよ。』『クラムボンはかぷかぷわらったよ。』『クラムボンは跳ねてわらったよ。』『クラムボンはかぷかぷわらったよ。』
上の方や横の方は、青くくらく鋼のように見えます。そのなめらかな天井を、つぶつぶ暗い泡が流れて行きます。
『クラムボンはわらっていたよ。』『クラムボンはかぷかぷわらったよ。』『それならなぜクラムボンはわらったの。』『知らない。』
つぶつぶ泡が流れて行きます。蟹の子供らもぽっぽっぽっとつづけて五六粒泡を吐きました。それはゆれながら水銀のように光って斜めに上の方へのぼって行きました。

  • ダミーテキストダミーテキストダミーテキストダミーテキスト、ダミーテキストダミーテキストダミーテキストダミーテキスト
  • 「ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。」
  • （ダミーテキスト）
Demo: 「Yaku Han JP」ゴシック体、約物全部入り

〇〇〇〇
「〇〇〇」

　二疋の蟹の子供らが青じろい水の底で話していました。
『クラムボンはわらったよ。』『クラムボンはかぷかぷわらったよ。』『クラムボンは跳ねてわらったよ。』『クラムボンはかぷかぷわらったよ。』
上の方や横の方は、青くくらく鋼のように見えます。そのなめらかな天井を、つぶつぶ暗い泡が流れて行きます。
『クラムボンはわらっていたよ。』『クラムボンはかぷかぷわらったよ。』『それならなぜクラムボンはわらったの。』『知らない。』
つぶつぶ泡が流れて行きます。蟹の子供らもぽっぽっぽっとつづけて五六粒泡を吐きました。それはゆれながら水銀のように光って斜めに上の方へのぼって行きました。

  • ダミーテキストダミーテキストダミーテキストダミーテキスト、ダミーテキストダミーテキストダミーテキストダミーテキスト
  • 「ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。」
  • （ダミーテキスト）

font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;のYakuHanJP以降のFontの並びがこのブログのfont-familyの指定と異なっているので、私の環境ではFONTが変わってしまいました。
実際に使う場合は、baseのfont-familyに合わせた方が良いと思います。

WEBの本文は約分スカスカに慣れちゃってるところもありますが、見出し、リスト周りにめっちゃ有能なWEBフォントですね。

おまけ

該当フォントは限られますがCSSでfont-feature-settingsを使って文字詰めもできるようです。
文字詰め有りきのデザインで構築してスマホ端末だとどうなるんだろう？ってのは未検証（そのうち検証します）。

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい...
「Webでは文字詰めはできない」と諦めていませんか？　美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの1つとされています。 そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきました。今回はそんなfont-feature-settingsプロパティの魅力と使いどころをくまなく紹介します。 この記事のポイント 使い...

個人的にWindowsマシンで游ゴシックを指定したときの字の薄さが大っ嫌いでメイリオ最高！と思ってるのですが、メイリオさんはfont-feature-settingsを使えないそうです。

関連記事: