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

Pocket
LINEで送る

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

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

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

「Yaku Han JP」


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を使って文字詰めもできるようです。
文字詰め有りきのデザインで構築してスマホ端末だとどうなるんだろう?ってのは未検証(そのうち検証します)。

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

Pocket
LINEで送る

back to top