ご利用方法

文字詰め機能

スマートライセンス・プランをご利用されているお客様に、簡単に文字詰めができる機能をご案内します。

概要

通常、Webページ上のテキストは、文字と文字の間隔が不揃いになり美しく表示されない場合があります。例えば、促音(そくおん)「っ」、拗音(ようおん)「ゃ」「ゅ」「ょ」等のような仮名小文字は、文字間の余白が空きすぎる傾向にあり、部分的な文字幅調整に時間がかかることが多いのではないかと思います。

そこで、フォントプラスでは、「自動設定(プロポーショナルメトリクス機能)」と「文字間の余白削除機能」の2種類の文字詰め機能をご用意しています。

また、これまではページ全体に対する機能でしたが、2015年10月13日より、指定した箇所(セレクタ)に部分的に適用することが可能となりました。用途に合わせて、お好みの機能をご活用ください。

機能説明

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

フォントデータに組み込まれているプロポーショナルメトリクス情報を元に、自動的に文字詰めを行います。プロポーショナルメトリクス情報とは、書体デザイナーが設定した各文字の最適な余白情報のことです。

注意事項

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

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

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

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

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

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

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

注意事項

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

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

書体のリストは、こちらからご確認ください。

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

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

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

利用方法

A.ページ全体

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

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

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

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

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

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

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

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

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

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

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

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

B.指定した部分のみ

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

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

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

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

文字詰めを適用したいセレクタにCSSでフォントを指定し、フォント名の後に {t=0} と追記して下さい。

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