デバイスフォント + 約物半角専用のWebフォント「Yaku Han JP」の組見本

書体について

QRANOKOさんによる「約物半角専用のWebフォント」。Web業界では相当有名なWebフォントです。Webフォントの文字組は制限が多いなか画期的なWebフォントが開発されています。
行頭に括弧がきたりすると空いていて不格好に見える問題をWebフォント「Yaku Han JP」が解決してくれます！

Webテキストの日本語に含まれる約物を半角にすることができます。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは全部で7種類。Noto Sans Japaneseに沿っています。

基本的には
、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝
が半角に置き換わるので前後のアキがなくなります。

※左上の「例文・EXAMPLE」のプルダウンメニューから「イベントの案内」を選択して確認してください。

使用フォントに注意！

「Yaku Han JP」は、Noto Sans Japaneseに準じてデザインされているので、他の日本語フォントと組み合わせて使用する際は太すぎたり、大きすぎたりする場合がでてくるので検証が必要になります。

句読点まで詰めるかどうか？

Webフォント「Yaku Han JP」を使用するポイントは「句読点まで詰めるかどうか？」、上のプレビューの組見本では句読点も半角に置き換えて詰めていますが、本文だと読みづらくなるので「句読点」を詰めない設定がオススメです！見出しの場合はデザインによって詰めてもいいのですが、本文は句読点の後ろは空いていた方が読みやすくなります。

コーディング時の設定で「括弧のみ」半角に置き換えて詰めることができるので、デザイナーさんがコーダーさんにコーディングを依頼する際は注意してください。詳細はこちらから確認できます。

CSSの設定

cssのフォント指定は以下になります。
font-family: YakuHanJP, ‘Hiragino Sans’, ‘Hiragino Kaku Gothic ProN’, ‘Noto Sans JP’, Meiryo, sans-serif;
font-weight:400;
font-style:normal;