タイプスケール生成
Type Scale Generator
基準サイズと比率から文字と余白のモジュラースケールを作り、CSSかトークンとして書き出します。
基準サイズと比率からモジュラーなタイプスケールを組み立て、各段を実寸で見せ、その横に効いてくる数字を並べます。rem、行の高さ、字送り、そして本文に使えるサイズかどうかを決める、指定した段幅で1行に何文字入るかです。同じ比率から余白のスケールも導き、4pxのグリッドに合わせます。
スケール
比率: 1.25
同じ比率から取った余白
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
4px のグリッドに合わせています。ほとんどのデザインシステムがすでに持っているグリッドですし、12px の隣の 13px は雑音でしかありません。
プレビュー
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
いろはにほへと ちりぬるを · The quick brown fox jumps over the lazy dog
緑は 1行 45〜75文字です。Bringhurst が示した欧文の範囲で、分かち書きをするハングルは全角の漢字・かなよりこちらに近いところにあります。
書き出し
この中のどれかを段で刻まずに画面の幅に合わせて変えたいなら可変サイズのclamp()計算が 2 つの値をひとつの clamp() にまとめます。
使い方
基準サイズを決めます
本文の文字サイズで、ほとんどの場合16pxです。ほかはすべてこれに比率を掛けるか割るかしたものなので、先にここを合わせておけば、あとで比率を選び直さずに済みます。
比率を選びます。ここが決定です
長2度（1.125）はインターフェースの安全な既定です。8段取ってもまだ妥当な範囲に収まります。完全4度（1.333）は読み物向けで、16pxから3段上がればもう38pxです。黄金比は有名ですが、インターフェースの文字には急すぎます。プリセットごとに何のためのものかを書いてあります。名前ではなく、必要な範囲で選んでください。
段数と、丸めるかどうかを決めます
下の段はキャプションやラベルのため、上の段は見出しのためです。厳密のままなら幾何が保たれ、ピクセルに小数が出ます。1pxか2pxで丸めれば人が頭に入れられる数字になり、比率はわずかに崩れます。丸めるのがふつうの選択で、丸めた値の横には厳密な値も出ています。
段幅を入れて1行の文字数を読みます
この文章が実際に置かれる段の幅を入力します。各行のいちばん右の数字がその幅での1行あたりの文字数で、45から75のあいだで緑になります。続けて読ませる文章について実証のある範囲です。単体では気持ちよく読めても1行110文字になるサイズは、本文には合わないサイズです。
トークンを書き出します
CSS変数、Tailwindのテーマブロック、SCSS、JSONがあります。余白のスケールも一緒に出るので、1回の貼り付けで両方そろいます。
よくある質問
プレビューは実際に使う書体で表示されていますか。
違います。このページの書体で描いています。サイズ、行の高さ、字送りは本物ですが、書体が変わればxハイトも変わり、16pxがどれくらい大きく見えるかを実際に決めているのはxハイトです。プレビューは比率の確認として扱い、基準サイズは自分のプロダクトで確かめてください。
スケール全体を使うべきですか。
使うべきではありませんし、11段作ったことは11段使う理由になりません。たいていのインターフェースに要るサイズは4つか5つです。余分な段があるのは、比率がどこへ向かうかを見られるようにするためと、めったに使わないサイズにもその場の思いつきではなく定まった値があるようにするためです。
行の高さと字送りはどこから来ていますか。
書体からではなく規則からです。サイズが大きくなるほど行の高さは下がり、大きな段では字送りが詰まり、小さな段ではわずかに緩みます。慣習的な出発点で、役に立つ程度には当たりますが、細長い書体や、字面の大きい和文書体では別の数字が要ります。見てから調整してください。
タイプスケールは丸めないのに、余白のスケールだけ4pxに合わせるのはなぜですか。
目の読み方が違うからです。17pxの見出しの隣に18pxの見出しがあれば階層ですが、12pxの隙間の隣の13pxの隙間はただの雑音で、しかもレビューを生き延びてそのまま複製される種類の雑音です。ほとんどのデザインシステムにはすでに4pxのグリッドがあるので、余白のスケールはそこで足並みをそろえます。
ここから渡せます
可変サイズのclamp()計算
Fluid Size Calculator
2つのビューポート幅のあいだでサイズがなめらかに変わるclamp()の式を計算します。
フォントの組み合わせ提案
Font Pairing
システムフォントスタックから見出し用と本文用の組み合わせを提案し、韓国語か英語のサンプルで見比べてからCSSを渡します。和文の見本はありません。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
次の一手
このツールが出したものをそのまま受け取れる道具です。
可変サイズのclamp()計算
Fluid Size Calculator
2つのビューポート幅のあいだでサイズがなめらかに変わるclamp()の式を計算します。
CSSトークン抽出
CSS Token Extractor
スタイルシートから色・余白・角丸・書体の値を拾い出し、カスタムプロパティの一式を提案します。
フォントの組み合わせ提案
Font Pairing
システムフォントスタックから見出し用と本文用の組み合わせを提案し、韓国語か英語のサンプルで見比べてからCSSを渡します。和文の見本はありません。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。