サービスの使いかた

文字間のアキを調整する

促音(そくおん)「っ」、拗音(ようおん)「ゃ/ゅ/ょ」のような仮名小文字は通常、文字間の余白が空きすぎる傾向にあります。FONTPLUSのスマートライセンス・プランでは、「自動設定(プロポーショナルメトリクス機能)」と「文字間の余白削除機能」の2種類の文字詰め機能をご用意し、個別の文字幅調整に時間をかけることなくWebフォントをご利用いただけます。

詳細設定パネル

詳細設定のスクリーンショット:「Webフォントに切り替わるまでの表示スタイル」「Webフォント適用のタイムアウト時間」「文字詰め」「表示位置ズレの自動調整」の設定ができます。

会員マイページ内「スクリプト発行」ページを開きます。「詳細設定パネル」の「文字詰め機能」で設定を行います。

a. 自動設定(プロポーショナルメトリクス機能)

FONTPLUSのエンジンが自動的に文字詰めを行います。プロポーショナルメトリクス情報とは、書体デザイナーが設定した各文字の最適な余白情報のことです。CSSで設定を行った場合は、本項のプロポーショナルメトリクス機能とは異なり、フォント本来のプロポーショナルメトリクス情報に合わせた文字詰めを行います。

注意事項

対応書体:フォントデータの中にプロポーショナルメトリクス情報が入っている書体

フォントデータによっては、プロポーショナルメトリクス情報が組み込まれていないものもありますので、利用したいフォントにプロポーショナルメトリクス情報が組み込まれているかどうか、フォントカタログの各フォント詳細ページにてご確認ください。

対応ブラウザ:モダンブラウザ

※IE 8以前等の古いブラウザでは反映されない場合があります。

a-1.プロポーショナルメトリクスをページ全体に適用する

スマートライセンス・プランの「スクリプト発行」ページよりJavaScriptスニペットを取得する際、詳細設定の文字詰め機能で「自動設定」にチェックを入れ、JavaScriptスニペットをHTMLへ記述してください。以上で設定は完了です。

※スマートライセンス・プランの詳しい導入方法はログイン後の「スマート>利用方法」ページをご覧ください。

a-2.プロポーショナルメトリクスを指定した部分のみに適用する

文字詰めを適用したいセレクタにCSSでフォントを指定し、フォント名の後に{pm}または---pmと追記してください。

h1 { font-family: "XXXXXX{pm}"; }
h1 { font-family: "XXXXXXX---pm"; }

b. 文字間の余白削除機能

それぞれの文字に含まれる左右の余白を一括で取り除くことができます。

この機能で文字の余白を削除した後に、CSSのletter-spacingを設定すれば一文字ずつ細かい設定をすることなく、均一に文字詰めを行うことができます。

CSSのOpenType機能を使用した文字詰めを利用する場合はOpenType機能のページを参照ください。

注意事項

文字間の余白削除が動作しない書体

一部の書体において、ブラウザによって機能が動作しない場合がございます。

例外的に余白幅を残した文字

下記の記号系の文字につきましては、余白を完全に削除するとバランスが崩れるため、字面の両サイド、または片側のみに余白を残しています。

両サイド左サイド右サイド
文字入力モード文字入力モード文字入力モード
1半角数字全角・鍵括弧(始),半角・カンマ
1全角数字全角・二重鍵括弧(始).半角・ピリオド
全角中点全角・山括弧(始)全角・カンマ

b-1. 余白削除機能をページ全体に適用する

スマートライセンス・プランの「スクリプト発行」ページよりコードスニペットを取得する際、詳細設定の文字詰め機能で「文字間の余白削除」にチェックを入れ、JavaScriptスニペットをHTMLへ記述してください。

※スマートライセンス・プランの詳しい導入方法は会員マイページへログインし「スマート > 利用方法」ページをご覧ください。

余白削除機能適用後のWebフォント表示例

描画イメージ:文字間が詰まって表示されます。

設定後は上記のように文字の余白が削除されますので、CSSのletter-spacingを使って調整してください。

h1 {
  font-family: "FOT-マティス Pro B";
  letter-spacing: 0.15em;
}

CSS調整後のWebフォント表示例

描画イメージ:letter-spacingを指定することで適切な文字間に調整していただけます。

b-2. 余白削除機能を指定した部分のみに適用する

文字詰めを適用したいセレクタにCSSでフォントを指定し、フォント名の後に{t=0}または---t0と追記してください。
01以上の値にすると、数値にともなってスペースができます。

h1 { font-family: "XXXXXX{t=0}"; }
h1 { font-family: "XXXXXX---t0"; }

注意事項

以上の設定はJavaScriptスニペットにも反映されます。
詳細設定を行った場合は、必ず設定後にJavaScriptスニペットのコピーとHTMLへの反映を行ってください。