約物半角専用のWebフォント『Yaku Han JP』が素晴らしい。

Sponsored Link

@Qrac_jpさんが制作した約物半角専用のWebフォント『Yaku Han JP』が便利すぎるのでご紹介。

Yaku Han JP

約物半角専用の約物(やくもの)とは何?という方のために

約物(やくもの)とは
言語の記述に使用する記述記号類の総称で、専らフォントなど組版を意識して使われる用語である。具体的には、句読点・疑問符・括弧・アクセントなどのこと。

Wikipedia

この約物がWEBデザイナーにとっては困り物。CSSで調整するのも限界があるし、なんといっても面倒くさい。

その悩みをこのWebフォントは一発で解消してくれます。

『Yaku Han JP』の使い方

1. GitHubからデータ一式をダウンロードします。

2. distフォルダにあるcssフォルダをサーバーにアップ。cssフォルダにはFull版の「yakuhanjp.min.css」とSmall版の「yakuhanjp_s.min.css」があるので、アップするのは自分が利用したい方だけでOK。

// Full版Include Fonts
、。!?〈〉《》「」『』【】〔〕・():;[]{}…
// Small版Include Fonts
〈〉《》「」『』【】〔〕()[]{}…

3. distフォルダにあるfontsフォルダをサーバーにアップします。この時に2でアップしたcssフォルダとの同一階層にアップしないとパス切れになりますよ。

4. サイトのhead内にアップしたCSSを読み込みます。

<link rel="stylesheet" href="../css/yakuhanjp_s.min.css">

5. cssのfont-familyに”YakuHanJPs”を追加。すでに指定している日本語フォントより前に必ず指定します。

font-family: "YakuHanJPs", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;

『Yaku Han JP』の反映結果

『Yaku Han JP』を使う前は『』(二重括弧)の隙間が広く気になります。

before_1

『Yaku Han JP』を指定すると、隙間が調整されて、いい感じに。

after_1

素晴らしい!

『Yaku Han JP』は、GoogleのNoto Sans Japaneseがベースで7ウェイト対応。

7ウェイトをwoffタイプですべて読み込んでも、FontとCSSの合計容量が57KBという軽さです。

WEBデザイナーにとっては本当にありがたいWEBフォントですね。

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。