🔤
typography preview,
文字サイズ・行間 ライブプレビュー
font-size・line-height・letter-spacingをスライダーで即調整。
最適なタイポグラフィを確認してCSSをコピー。
🎛️
4プロパティ同時調整
font-size/line-height/letter-spacing/font-weight
📋
CSSコード出力
調整結果のCSSをワンクリックコピー
🔤
Google Fonts対応
日本語Webフォントのプレビューも可能
font-size 16px
line-height 1.75
letter-spacing 0.05em
font-weight 400
プレビュー
日本語のタイポグラフィは、文字サイズ、行間、文字間隔のバランスが重要です。適切な設定により、読みやすく美しいテキストレイアウトを実現できます。
The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*()
↑ テキストをクリックして直接編集できます
生成CSS
about,
概要
文字サイズ・行間ライブプレビューツールは、CSSのfont-size・line-height・letter-spacing・font-weightをスライダーで直感的に調整し、テキストの見た目をリアルタイムにプレビューできるツールです。
Google Fontsの日本語フォント（Noto Sans JP・Noto Serif JPなど）の読み込みに対応しており、実際のWebフォントを使ったプレビューも可能です。設定が決まったらCSS出力をワンクリックでコピーできます。
※Google Fontsの読み込み（フォントファイル取得）のみ外部通信が発生します。入力テキストや設定値は外部サーバーに送信されません。
how to,
使い方
STEP 1
スライダーで調整
font-size・line-height・letter-spacing・font-weightの各スライダーを動かします。プリセットから始めるとすばやく調整できます。
STEP 2
プレビューを確認
プレビューエリアでテキストの見た目をリアルタイムに確認します。テキストを直接クリックして内容を編集できます。
STEP 3
CSSをコピー
「CSSをコピー」ボタンで生成コードをクリップボードにコピーしてプロジェクトに貼り付けます。
glossary,
用語集
- font-size
- フォントサイズを指定するCSSプロパティ。px・em・rem・%などの単位で指定できる。Webでは16pxがブラウザデフォルト。
- line-height
- 行間（行の高さ）を指定するCSSプロパティ。単位なし数値（例: 1.75）での指定が推奨。日本語本文は1.6〜1.9が読みやすい。
- letter-spacing
- 文字間隔（字詰め）を指定するCSSプロパティ。em単位での指定が推奨。日本語では0.05em程度が自然。
- font-weight
- フォントの太さを指定するCSSプロパティ。100〜900の数値または「bold」「normal」で指定。
- font-family
- 使用するフォントを指定するCSSプロパティ。カンマ区切りで複数のフォールバックフォントを指定できる。
- タイポグラフィ
- テキストの視覚的な配置・デザイン全般。文字サイズ・行間・字詰め・フォント選択などの要素から成る。
- Google Fonts
- Googleが提供する無料Webフォントサービス。Noto Sans JPなど日本語フォントも豊富に提供されている。
- Webフォント
- サーバーからダウンロードして使用するフォント。@font-faceでカスタムフォントを、CDNでGoogle Fontsなどを利用できる。
- 可読性（Readability）
- テキストが読みやすいかどうかの指標。適切なフォントサイズ・行間・コントラストが可読性を高める。
- rem / em
- CSSの相対単位。remはルート要素の、emは現在の要素のfont-sizeを基準とする。レスポンシブデザインに適している。
faq,
FAQ
- Q.旧サイトのフォントプレビューとの違いは？
- 旧サイトのweb-font-previewerは「フォントの比較・選定」が主目的でした。本ツールはfont-size/line-height/letter-spacingの微調整とCSSコード出力に特化しています。
- Q.Google Fontsの読み込みでデータが送信されますか？
- フォントファイルの取得のみGoogleのサーバーと通信します。入力テキストや設定値は一切送信されません。
- Q.入力したテキストはサーバーに送信されますか？
- いいえ。テキストはすべてブラウザ内のみで処理されます。
- Q.日本語以外のフォントも使えますか？
- プリセットには日本語フォントを中心に収録していますが、フォントファミリー名を直接入力して別のフォントを指定することも可能です。
- Q.スライダーの値を直接数値で指定できますか？
- 現在はスライダーのみの対応ですが、プリセットボタンで典型的な設定値を素早く適用できます。
- Q.モバイルでも使えますか？
- はい。スライダーはタッチ操作に対応しています。
use cases,
活用シーン
🎨
Webデザインのタイポグラフィ設計
見出し・本文・キャプションなど、各種テキスト要素の最適な設定値を視覚的に確認しながら決定できます。
📖
ブログ記事の読みやすさ最適化
本文の行間・文字間隔を調整して、長文記事の読みやすさを高める設定値を探します。
🖥️
プレゼン資料のフォント設定確認
スライドで使用するフォントサイズと行間の組み合わせを事前に確認できます。
🎓
CSSタイポグラフィの学習
スライダーを動かしながらCSSプロパティの効果を視覚的に学習できます。