モジュラー写体スケール生成
基準16 px、比率1.25で5段階にすると、16、20、25、31.25、39.0625、48.828125になります。3つの数を選ぶだけで、一つずつ迷わずに文字サイズの階層全体が手に入ります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- ベースフォントサイズ
- 16
- モジュラー スケール比率
- 1.25
- ステップ数
- 5 px
- サイズ一覧
- 16, 20, 25, 31.25, 39.0625, 48.828125
- サイズ個数
- 6
モジュラー写体スケール生成器は、ベースフォントサイズ、スケール比率、ステップ数という三つのデザイン数値を、見出し・本文・キャプション用の一貫した文字サイズの階段に変換します。十六のようなベース、長三度なら一点二五、黄金比なら一点六一八のような比率、ベースより上に欲しいステップ数を入力すると、ツールは n がゼロからステップ数までの各サイズを base × ratio^n として返し、構造化されたスケール表、閉じた式の文字列、テストやデザインシステムで断言できる順序付き代入ステップも付けます。UI キット、ブランド指針、CSS デザイン トークン、授業課題はすべて、表計算や Figma プラグインを開かずに同じ決定的幾何数列を必要とします。
モジュラー写体スケールとは何か、比率が1を超えねばならない理由
モジュラー写体スケールは、単一のベースと単一の比率で制御されるフォントサイズの等比数列です。ベースが十六で比率が一点二五なら、ステップ0は十六、1は二十、2は二十五、3は三十一点二五…と、各サイズは直前に同じ比率を掛けたものです。デザイナーは音楽的・古典的な名を持つ比率を選びます。
長二度は約一点一二五、長三度は一点二五、完全四度は約一点三三三、完全五度は一点五、黄金比は約一点六一八です。手法の力は抑制です。 h1 からキャプションまで任意のピクセル値を発明する代わりに、三数を選んでブレークポイントとコンポーネント全体で意図的に感じる階層を継承します。比率は厳密に1より大きくなければなりません。
比率1は各ステップがベースと等しい定数列になり、1未満はステップ指数が増えるほどサイズが縮み、見出し階層を反転させ、写体スケールのランディングが約束するものとほぼ一致しません。
実務のヒント、制限、関連検索
base と ratio を公開絶対範囲内に保ち、Worker とブラウザで連続乗算が有限のままにします。比率が大きいときは控えめなステップ数を好み、最大見出しがレイアウト限界を超えて爆発しないようにします。よくあるスタジオの目安は覚えやすいです。
ベース十六に長三度一点二五を五ステップは本文からディスプレイへのなじみ深い梯子、ベース十八に黄金比を四ステップは長文記事システム向き、ベース十五に完全四度は密な管理 UI に向きます。クライアントを制御できるなら整形済み文字列より数値を送ってください。数値文字列は厳密な有限数値パターンに一致する場合のみ受け付けます。
px→rem 変換でも流体 clamp 計算機でもフォント組み合わせ推薦でもありません。base・比率・ステップ数が既に分かり、サイズ梯子だけが必要なときに使ってください。あとから rem が要るなら、公開サイズを別のルートフォント ツールで変換します。
往復確認は素直です。 base×ratio を反復で再計算し、sizes と scale の各項目がソルバーと同じ十二桁丸めに一致することを確認します。
活用例
見出しと本文用のデザイン トークン
デザイナーが base・比率・steps を一度入力し、sizes 配列を CSS 変数や Figma テキストスタイルにコピーして一貫した製品階層にします。
ブランド指針のワークシート
チームが長三度または黄金比のスケールを決定的な数値で文書化し、学生やフリーランサーが専用プラグインなしで再計算できるようにします。
よくある質問
モジュラー写体スケールとは何ですか?
フォントサイズの等比数列 size(n) = base × ratio^n です。一つのベースと一つの比率で、本文・見出し・ディスプレイの一貫した梯子ができます。
なぜ比率は1より大きくなければなりませんか?
比率1では各ステップがベースと等しく、1未満ではステップが増えるほどサイズが縮みます。
あるステップ数で何個のサイズが得られますか?
指数は0から steps まで inclusive です。steps が5ならベースから始まる6サイズです。
サイズの単位は何ですか?
サイズはベースと同じ単位の純粋な数値です(慣例では px)。応答はデザイン トークンの便宜で unit を px とラベルします。システムが要すれば rem に変換してください。
16 pxと比率1.25ではどんなサイズになりますか?
5段階で16、20、25、31.25、39.0625、48.828125の6つのサイズになります。どのサイズも前のサイズに1.25を掛けた値です。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/hobby/modular-scale \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":16,"ratio":1.25,"steps":5}'const res = await fetch("https://api.kit.forhosting.com/hobby/modular-scale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": 16,
"ratio": 1.25,
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/modular-scale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": 16,
"ratio": 1.25,
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/modular-scale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":16,"ratio":1.25,"steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":16,"ratio":1.25,"steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/modular-scale", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"base": 16,
"ratio": 1.25,
"steps": 5
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.modular_scale",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_abs | 1000000000000 |
max_steps | 32 |
min_base | 1e-12 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
比率が1以下だとスケールは成長できないため、API は階層を壊す平坦・縮小リストではなく明確な invalid_input を返します。経路は純粋な算術で、ネットワークも乱数シードも壁時計依存もなく、無料のブラウザ実行と前払い API は固定小数点丸めのあと、呼ぶたびに同じ JSON を返します。
モジュラー写体スケールとは何か、比率が1を超えねばならない理由
したがってこの能力は比率1以下を invalid_input で拒否し、授業の期待とモジュラー写体スケール生成の SEO 意図に合わせます。正のベースと有界の非負整数ステップ数は、IEEE 倍精度で中間べきが有限に保ちます。検査経路は反復乗算と公開フィールドと同じ十二桁丸めで各サイズを再計算するので、成功応答には常に手計算やユニットテストで固定できる steps が付きます。
API の呼び出し方と返却内容
base は公開絶対上限一兆以内の厳密に正の有限数でなければなりません。ratio は厳密に1より大きい有限数で、同じ絶対上限内です。必須フィールド三つを JSON ボディで送ってください。base(別名 base_size、font_size、base_font)、ratio(別名 scale_ratio、modular_ratio、r)、steps(別名 step_count、count、n)です。steps は0から32 inclusive の非負整数で、応答はそのとき step_count + 1 個のサイズ(指数0から steps)を含みます。成功時は丸めた base と ratio をエコーし、step_count を整数ステップ数に、sizes を丸めたフォントサイズの順序配列に、scale を各要素が step と size を持つオブジェクト配列に、size_count を sizes の長さに、unit を慣例のデザイン トークン単位ラベルとして文字列 px に、formula を size(n)=base×ratio^n(n=0…steps)の閉じた関係に、message を短い英語要約に、steps を中間行の順序ウォークスルーに設定します。欠落フィールド、非有限数、正でない base、1以下の ratio、小数または範囲外の steps、非有限のオーバーフローサイズなどの検証失敗は invalid_input を返し課金しません。料金は成功リクエストごとに定額 $0.002 で単位 item、限界単価はゼロです。
実務のヒント、制限、関連検索
教えるときやデザインシステムを文書化するときは、成功経路と意図的な比率1や0.9を組み合わせて硬い invalid_input 経路を示し、ステップ k のサイズが十二桁丸めで base×ratio^k と等しいことを確認します。このページはモジュラー写体スケール生成、タイポスケール計算機、フォントサイズ比率ステップ ツールを探す人向けです。invalid_input を返す失敗タスクは前払い残高を消費しないので、学習者が意図的に端を探っても探索スクリプトは安価です。
連携の活用例
デザインシステム生成器のユニットテスト
開発者が既知の base-比率-ステップ 三つ組を与え、フローティング UI ツールなしで CI の golden フィクスチャに対し sizes と scale 行を断言します。
技術的な質問
モジュラー写体スケール生成は無料ですか?
ブラウザツールは無料でローカル実行です。API 呼び出しは前払い KIT 残高を使い、成功リクエストごとに $0.002;失敗タスクは課金されません。