デザインSHAREグラフィックデザインやエディトリアルデザイン出身の人がWebサイトやブログを見て思う、気になるポイント第一位、それは文字詰め。Webサイトやブログではキャッチコピーは詰めてあっても、本文は一切詰めないベタ打ちであることが多いと思いますが、グラフィックやエディトリアルなど印刷物のデザインでは基本的にバリバリ文字詰めをします。キャッチコピーなんかは1文字単位で調整することも当たり前、本文でも文字ごとに細かく設定したりします。グラフィックデザインの目線で見ると、Webの文字詰めは気になっちゃうんですよね。その中でも特に気になるのが「」【】や。約物が詰まってないこと。気になりません!?こんな感じですね。「」や()が多用されているとその空きスペースが気になる......。グラフィックデザインでよくやるのが約物だけ半角になるように詰める処理。これをやるだけでも無駄な空きスペースがなくなってスッキリします。約物の間が詰まることで、特に「」で目立っていた空きスペースがなくなりスッキリしました。Webの世界では細かく詰めるのは技術的な問題から現実的ではないようです。JP」はデザイナーのQrac(クラク)さんが開発した約物半角専用のWebフォント。Japanese」をベースに、特定の約物が半角になっています。JP」は全部で6種類あります。!?といった括弧や句読点などが半角に、「カッコのみ」は「」【】など括弧だけが半角になります。丸ゴシック(カッコのみ)約物全部入り、。()[]{}ちなみにどちらも試してみましたが「約物全部入り」だとちょっと詰まりすぎるかなという印象。あと微妙に元の約物とフォントの形が違うので違和感も。このブログではゴシック体の「カッコのみ」バージョンを使用しています。Use」の「CDN」から、使いたい種類のCSSファイルリンクを取ってきてHTMLのheadタグ内に記述します。ゴシック体(カッコのみ)なので、この部分を記述します。href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp_s.min.css">WordPressの場合、headタグ内に記述する方法はいくつかあります(header.phpを編集する、プラグインを使うなど)ので、ご自分のサイトにあった方法を選んでください。sans-serif;}この時に必ず全ての日本語フォントよりも前に記述します。先頭に書くのが安全ですね。