✍️ フォントプレビュー
フォントサイズ
18px
10px60px
行間(line-height)
1.7
1.03.0
文字間隔(letter-spacing)
0em
-0.05em0.3em
【概要】
フォントプレビューツールは、入力したテキストを複数のフォント(ゴシック・明朝・等幅など)で同時に表示し、フォントサイズ・行間・文字間隔を直感的に調整しながらプレビューできるツールです。Web デザイン・タイポグラフィの検討、フォント選定の比較検討に最適です。
【仕組み・計算式】
フォント管理:Google Fonts や システムフォントを複数ロード。同一テキストを異なるフォントで実時間レンダリング。
フォントサイズ:10~60px の範囲で調整可能。
行間(line-height):1.0~3.0 の倍率で制御。読みやすさに影響。
文字間隔(letter-spacing):-0.05em~0.3em で微調整。字間の詰まり・広がりを視覚化。
【使い方】
- 「プレビューテキスト」エリアに見栄えを確認したいテキストを入力
- スライダーでフォントサイズ・行間・文字間隔を調整
- チェックボックスで太字・イタリック・取り消し線などを追加
- フィルターボタンでフォント種別を絞り込み(ゴシック・明朝・等幅・システム)
- 複数フォントの見栄えを同時比較して、最適なフォント・設定を選定
【よくある質問(FAQ)】
Q1. Webで使えるフォントは何ですか?
A. このツールは Google Fonts や システムフォント(メイリオ、ヒラギノなど)を表示。実際のWeb使用は、フォントの Web フォント化(CSS @font-face など)が必要です。
Q2. どのフォントがアクセシビリティ(読みやすさ)に優れていますか?
A. 一般的に、Noto Sans JP などのゴシック系は読みやすく、行間 1.6 以上で視認性が向上します。
Q3. モバイルでのフォント表示は異なりますか?
A. はい。OS によってデフォルトフォントが異なります。Android と iOS では見栄えが変わることがあります。