デザイン・デザイン/無料ツール
タイポグラフィスケール調整ツール
調節可能なベースサイズ、比率、フォント、およびラインの高さのモジュラータイポグラフィスケールをプレビューします。 輸出入 CSS ボディテキストと6つの見出しレベルのサイズ。
タイポグラフィ CSS
typography.css
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }単語数: 75詳しくはこちら ↑
出力テキストは英語のままです。入力内容はそのまま保持されます。
サインアップはありません。 AIクレジットなし。 このツールは、お使いのブラウザで出力を組み立てます。
アイデアから何か役に立つものまで。
- 01
フォント、ベースサイズ、モジュラー比を選択します。
- 02
見出しのサイズと段落の間隔を調べます。
- 03
ダウンロード CSS 現在のスケールの変数。
小さな文脈。
モジュラースケールは、繰り返し比でベースフォントサイズを乗じます。 この遊び場は、6レベルの見出し階層と体と小さなテキストを計算します。 サイズは、開始点のピクセル値が明示的です。 応答動作を見直し、生産で使用する前にズームします。
よくある質問
は、 CSS 選択したフォントをロードしますか?
いいえ。 フォントの名前とフォールバックファミリーを供給します。 選択したフォントをアプリケーションにロードまたは自動ホストします。
これらのサイズは反応していますか?
輸出は固定サイズを含んでいます。 実際のコンテンツをテストした後、ブレイクポイントや流体型システムに適応します。