見出し用タイポグラフィックスケールを生成
本文16 px、比率1.25から始めると、見出しは階段状に大きくなります。h6は20、h5は25、h4は31.25となり、1段上がるごとに同じ比率を掛けます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
タイポグラフィックスケールは、本文の基準サイズと比率を、予測可能な見出し階層へ変換します。基準値として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アクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
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}'const res = await fetch("https://api.kit.forhosting.com/doc/typography-scale-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base_font_size": 16,
"ratio": 1.25
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/typography-scale-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base_font_size": 16,
"ratio": 1.25
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/typography-scale-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base_font_size":16,"ratio":1.25}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base_font_size":16,"ratio":1.25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/typography-scale-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"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リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_mb | 25 |
max_pages | 200 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
各見出しレベルの計算方法を確認します
処理はネットワーク、時刻、乱数を使用しないので、同じ入力から常に同じJSONが得られます。baseとfont_sizeは基準値、scale_ratioは比率の別名です。
文字サイズと文書構造を混同せずに適用します
APIは成功したリクエストごとに$0.002で、同じ決定的計算をブラウザーでも実行できます。正でない比率などの無効値には、部分的なスケールではなくinvalid_inputを返します。
技術的な質問
どの数式で生成しますか?
各サイズは、base_font_sizeにratioの該当行で示す指数乗を掛けて求めます。
比率ゼロが拒否されるのはなぜですか?
ゼロでは正の比例スケールを作れません。ゼロまたは負数にはinvalid_inputを返します。
APIリクエストの料金はいくらですか?
成功したリクエストは$0.002です。無効な入力にはスケールではなくエラーを返します。