ForHosting KIT · PDF・文書ツール

見出し用タイポグラフィックスケールを生成

本文16 px、比率1.25から始めると、見出しは階段状に大きくなります。h6は20、h5は25、h4は31.25となり、1段上がるごとに同じ比率を掛けます。ブラウザで無料で使えます。

  • 無料
  • ブラウザで動作
  • 登録不要
  • データは端末の外に出ません
ご利用方法 ウェブAPIメールTelegramアプリ 近日

タイポグラフィックスケールは、本文の基準サイズと比率を、予測可能な見出し階層へ変換します。基準値として16、長三度の正の比率として1.25などを入力してください。生成器は比率の連続した累乗を各見出しレベルに割り当て、h1から順に機械処理可能な一覧を返します。CSSトークンの作成、デザインシステムの文書化、または個別に選んだ無関係なサイズではなく、一貫した数式に従っているかの確認に役立ちます。

閲覧環境に合う基準値と比率を選びます

まず、通常の本文に使用するサイズを基準にしてください。Webでは16ピクセルが一般的ですが、必須ではありません。情報密度の高い業務画面では小さめ、読み物中心の誌面では18または20ピクセルから始める場合があります。

比率は、見出しが基準値から離れる速さを決めます。1.125は控えめな進行、1.2は明確で穏やかな階層、1.25は一般に長三度と呼ばれます。大きな比率で6段階すべてを指定すると、表示用サイズは急速に大きくなります。

本機能は有限の正の比率をすべて受け付けます。1では各サイズが等しくなり、1未満では指数が増えるほど値が小さくなります。エラーになるのはゼロと負数だけです。

ご自身のシステム内では単位を統一してください。応答ではWeb利用の便宜上pxと表示しますが、数値間の関係自体に単位はありません。比率の名称だけで決めず、実際の文章、利用可能な幅、書体のメトリクス、対象端末を考慮して入力値を選ぶことをおすすめします。

各見出しレベルの計算方法を確認します

基準フォントサイズはステップ0であり、見出し自体には含まれません。6段階を指定した場合、h6は基準値に比率の1乗を掛け、h5は2乗を使い、h1は6乗を使います。比率が1より大きいとき、h1が本文から最も離れたサイズになりますが、出力順は一般的なh1からh6のままです。

3段階ならh1、h2、h3を返し、h3が1乗、h2が2乗、h1が3乗です。各行には見出し名、指数、計算済みサイズが明記されるため、配列位置から対応を推測する必要はありません。値は浮動小数点の不要な誤差を抑え、CSS変数に十分な精度を保つため、小数点以下6桁に丸めます。

任意のlevelsは既定値が6で、1から6までの整数で指定します。極端に大きな結果は、無限値や実用できない出力になる前に拒否されます。

文字サイズと文書構造を混同せずに適用します

生成値はデザイン候補として扱い、見た目だけでHTMLタグを選ぶ指示とは考えないでください。見出しレベルはブラウザー、検索エンジン、支援技術へ文書構造を伝えます。コンポーネントで小さなトークンを適用していても、h2はh1の下位節である必要があります。

実務では、まずスケールを生成し、サイズを意味のある名前のトークンへ移し、その後スタイルで構造要素へ割り当てます。最大値は実際の題名、狭いモバイル画面、翻訳文、太いウェイト、異なる字幅の書体でご確認ください。スケールの一部だけを採用したり、大きな値をレスポンシブに制限したり、複数の意味レベルで同じサイズを共有したりしても構いません。

こうした調整により、数式を現実のレイアウト制約へ適合できます。レビュー用には基準値、比率、段階数、結果行を一緒に保存すると、変更理由を追跡しやすくなります。

CSSデザイントークンを作成

再現可能な見出しサイズを生成し、カスタムプロパティまたはトークン構築処理へ取り込めます。

ブランド階層を文書化

基準値と比率をh1からh6の値とともに記録し、チームで一貫した書体設計を再現できます。

候補スケールを比較

同じ基準値に複数の正の比率を適用し、表示用見出しがどの速さで大きくなるか比較できます。

比率を1未満にできますか?

はい。 有限の正数なら有効です。1未満では、指数が増えるほど値が小さくなります。

生成できる段階数はいくつですか?

標準HTML見出しに対応する1から6です。levelsを省略すると既定値は6です。

最初はどの比率を使えばよいですか?

1.125なら控えめな段差、1.2ならはっきりしつつも穏やかな階層、1.25は定番の長3度になります。比率を大きくすると、6段階すべてを使ったときに見出しが急に大きくなります。

それぞれの見出しはスケールのどの段に当たりますか?

本文が0段目です。最も小さいh6は基準に比率を1回掛けた値、h5は2乗、というように続き、h1は6乗で本文から最も離れた段になります。

ピクセルではなくremで使えますか?

使えます。サイズにはpxと表示されますが、比率の関係自体に単位はないため、remの値から始めても同じ比例になります。単位は1つにそろえてください。

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

POSThttps://api.kit.forhosting.com/doc/typography-scale-generate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

curl -X POST https://api.kit.forhosting.com/doc/typography-scale-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"base_font_size":16,"ratio":1.25}'
{
  "base_font_size": 16,
  "ratio": 1.25
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "doc.typography_scale_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

max_mb25
max_pages200
HTTPコード意味
401unauthorizedAPIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
402insufficient_balance残高が不足しています。チャージ後に再度お試しください。
404unknown_type指定されたタスクタイプは存在しません。タイプ名を確認してください。
429rate_limitedリクエストが多すぎます。しばらく待ってから再度お試しください。

各見出しレベルの計算方法を確認します

処理はネットワーク、時刻、乱数を使用しないので、同じ入力から常に同じJSONが得られます。baseとfont_sizeは基準値、scale_ratioは比率の別名です。

文字サイズと文書構造を混同せずに適用します

APIは成功したリクエストごとに$0.002で、同じ決定的計算をブラウザーでも実行できます。正でない比率などの無効値には、部分的なスケールではなくinvalid_inputを返します。

どの数式で生成しますか?

各サイズは、base_font_sizeにratioの該当行で示す指数乗を掛けて求めます。

比率ゼロが拒否されるのはなぜですか?

ゼロでは正の比例スケールを作れません。ゼロまたは負数にはinvalid_inputを返します。

APIリクエストの料金はいくらですか?

成功したリクエストは$0.002です。無効な入力にはスケールではなくエラーを返します。

KITの完全なドキュメントを見る →