Daiji Blog

約物専用Webフォント約組フォント

公開:
更新:

概要

約物専用のWebフォントの約組フォント/Yaku Kumi Fontsを公開しました全角の約物句読点や括弧のことが連続したときのアキを調整するWebフォントですAndroidNoto CJK Fontsをサブセットすることで作成されているのでシェア率が非常に高いNoto Sans JPとの組み合わせが良いです

CDNで公開しているので利用方法を参考にして自分のブログで使ってみてくださいちなみにこのブログでも使っていました今はCatalpaでも使われてる方法で無理やりアキを調整しています

はじめに

Webページを作るとき下の表みたいに括弧や句読点などの約物が連続したときのアキ空白が気になりませんか?Yaku Kumi Fontsを使えばこの問題が解決できます

Family
Noto Sans JP約物間のアキが調整できていない
Yaku Kumi Sans, Noto Sans JP約物間のアキを調整できている

このようなフォントはFONTPLUSにもありますが有料なのでブログなどで手軽に使うのは難しいです約味フォントは無料で公開されていますがオリジナルグリフであるためNoto Sans JPとの相性がいまいちです1

Yaku Kumi Fontsはもちろん無料で使えて見ての通りNoto CJK Fontsと同じグリフになっていますNoto Sans JPを利用している人にはすごくオススメできます

Noto CJK Fontsと同じグリフで約物のアキを詰めるYaku Han JPはすべてのアキが無くなるので組版要件を考えるといまいちですそれに約物を半角にするだけなら

font-feature-settings: "halt" 1;

すればいいです

ということでYaku Kumi Fontsを使いましょう!

対応文字

Yaku Kumi FontsSansSerifがありますまたGoogle FontsNoto Sans/Serif Japaneseと同じWeightがあります収録フォントは以下の通りです

、,。.・:;()⦅⦆「」『』[]〚〛{}【】〖〗〈〉《》〔〕〘〙

利用方法

下の表の7つのCSSを用意しましたこのブログでは基本的にSansNormal/Regular–400Bold–700しか使わないのでyakukumi-sans-rb.min.cssを読み込んでいます

FamilyWeightCSS
Sans, Serifすべてyakukumi.min.css
Sansすべてyakukumi-sans-all.min.css
400, 700yakukumi-sans-rb.min.css
400yakukumi-sans-r.min.css
Serifすべてyakukumi-serif-all.min.css
400, 700yakukumi-serif-rb.min.css
400yakukumi-serif-r.min.css

CDNを使う場合は次のようにCSSを読み込んでください利用したいCSSに合わせてyakukumi-sans-rb.min.cssを編集してください

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/daiji256/yaku-kumi-fonts@v1.1/css/yakukumi-sans-rb.min.css">

CSSfont-familyを設定しchwsをオンにしてくださいフォント名はSansを使うなら"Yaku Kumi Sans"Serifを使うなら"Yaku Kumi Serif"とします

font-family: "Yaku Kumi Sans", "Noto Sans JP", sans-serif;
font-feature-settings: "chws" 1;

ライセンス

Yaku Kumi FontsNoto CJK Fontsを元に作成されているのでライセンスはSIL OFL 1.1ですCSSなどはMITライセンスです

バージョン履歴

文献

  1. 約組フォント/Yaku Kumi Fonts
  2. Noto Sans JP
  3. Noto CJK full weight patch for Android devices
  4. FONTPLUS
  5. 約物Webフォント約味YakuAdj
  6. Yaku Han JP
  7. Catalpa
  8. 約組フォント/Yaku Kumi Fonts-約物専用Webフォント

脚注

  1. とくに僕はカンマが好みでは無かったです