Webサイトやブログでも約物が詰められる!約物を半角にするWebフォント「Yaku Han JP」

SHARE

グラフィックデザインやエディトリアルデザイン出身の人がWebサイトやブログを見て思う、気になるポイント第一位、それは文字詰め。間違いない。

Webサイトやブログではキャッチコピーは詰めてあっても、本文は一切詰めないベタ打ちであることが多いと思いますが、グラフィックやエディトリアルなど印刷物のデザインでは基本的にバリバリ文字詰めをします。

キャッチコピーなんかは1文字単位で調整することも当たり前、本文でも文字ごとに細かく設定したりします。なのでグラフィックデザインの目線で見ると、Webの文字詰めは気になっちゃうんですよね。

その中でも特に気になるのが「」【】や。、などの約物が詰まってないこと。めっちゃ気になりません!?

こんな感じですね。特に「」や()が多用されているとその空きスペースが気になる……

グラフィックデザインでよくやるのが約物だけ半角になるように詰める処理。これをやるだけでも無駄な空きスペースがなくなってスッキリします。

こんな感じ。約物の間が詰まることで、特に「」で目立っていた空きスペースがなくなりスッキリしました。

Webの世界では細かく詰めるのは技術的な問題から現実的ではないようです。とはいえ約物くらいは簡単にどうにかならないもんかと思っていたところ、素晴らしい解決法を発見しました!

それがWebフォントYaku Han JP」。このフォントを使うことで約物が半角になります!

約物を半角にするWebフォント「Yaku Han JP

Yaku Han JP」はデザイナーのQrac(クラク)さんが開発した約物半角専用のWebフォント。GoogleAdobeが共同開発したフォント「Noto Sans Japanese」をベースに、特定の約物が半角になっています。

Yaku Han JP」は全部で6種類あります。ゴシック体明朝体丸ゴシック体3種類に、それぞれ「約物全部入り」「カッコのみ」2種類の計6種類。

「約物全部入り」は「」、。!?といった括弧や句読点などが半角に、「カッコのみ」は「」【】など括弧だけが半角になります。

・YakuHanJP ゴシック体(約物全部入り)
・YakuHanJPs ゴシック体(カッコのみ)
・YakuHanMP 明朝体(約物全部入り)
YakuHanMPs 明朝体(カッコのみ)
・YakuHanRP 丸ゴシック(約物全部入り)
・YakuHanRPs 丸ゴシック(カッコのみ)
約物全部入り
、。!?〈〉《》「」『』【】〔〕・():;[]{}
カッコのみ
〈〉《》「」『』【】〔〕()[]{}

ちなみにどちらも試してみましたが「約物全部入り」だとちょっと詰まりすぎるかなという印象。あと微妙に元の約物とフォントの形が違うので違和感も。なのでこのブログではゴシック体の「カッコのみ」バージョンを使用しています。

Yaku Han JPの導入方法

CSSファイルリンクをHTMLheadタグ内に記述

まずはYaku Han JPの下の方、「How To Use」の「CDN」から、使いたい種類のCSSファイルリンクを取ってきてHTMLheadタグ内に記述します。

このブログの場合はYakuHanJPs ゴシック体(カッコのみ)なので、この部分を記述します。

// YakuHanJPs:ゴシック体(カッコのみ)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp_s.min.css">

WordPressの場合、headタグ内に記述する方法はいくつかあります(header.phpを編集する、プラグインを使うなど)ので、ご自分のサイトにあった方法を選んでください。

CSSにフォント名を記述

次にCSSfont-familyに自分が使いたい種類のYaku Han JPを記述します。

body {
  font-family: YakuHanJPs, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
}

この時に必ず全ての日本語フォントよりも前に記述します。先頭に書くのが安全ですね。

設定はこれだけです。めっちゃ簡単。

文字組みにこだわる人におすすめ

いかがだったでしょうか。Webサイトやブログでも簡単に約物が詰まるので気持ちがいいですね。「いや、ブログでも約物だけは詰めてるし!」とドヤれること間違いなし。文字組みにこだわりがあるデザイナーには特におすすめです!

スポンサーリンク

SHARE