タイポグラフィテスターとは？

タイポグラフィテスターでは、フォントのプロパティをリアルタイムで調整して結果を確認できます。フォントファミリーを選び、サイズ・ウェイト・行の高さ・文字間隔を調整したら、CSSをそのままプロジェクトにコピーできます。

フォントファミリー、サイズ、ウェイト（100〜900）、行間、字間、単語間、揃え、テキスト変換、色を細かく調整できます。サンプル文字は編集可能なので、自分の実際の見出しや段落をそのまま試せます。CSS 出力パネルはワンクリックでスタイルシートや styled component に貼り付けられます。

使い方

1. プレビューエリアにサンプルテキストを入力または貼り付けます。
2. タイポグラフィコントロールを調整します：フォントファミリー、サイズ、ウェイト、行の高さ、字間、単語間隔。
3. CSS出力をコピーして、プロジェクトでそのままタイポグラフィ設定を使用します。

使用するタイミング

• ブログ本文を Inter 18px・行間1.6 にして、スマホで読み心地が良いか確かめるとき。
• 長文記事を 16・17・18px で並べて、どのサイズがいちばん読み続けたくなるか比較するとき。
• 全大文字ボタンの詰まった見た目が、字間を広げて解消するか試すとき。

結果

ウェブデザイナーが「Inter」を18px、行の高さ1.6、字間0.02emでテストして、ブログのスタイルシート用にCSSをコピーします。

よくある質問

本文に適した行間はどれくらいですか？

16〜18px の長文段落では、行間 1.5〜1.7 が画面上で読みやすく感じられます。見出しはもう少し詰めた方が映え、通常 1.1〜1.3 です。サンプル欄に見出しと段落を入れて見比べると違いが分かります。

字間が px ではなく em で指定するのはなぜですか？

em はフォントサイズに合わせてスケールします。0.02em の字間は 14px でも 48px でも比率が一定です。px で指定すると、あるサイズで合っていても別のサイズでは間延びしたり詰まったりします。

Web で安心して使えるフォントウェイトは？

最近の Google Fonts や可変フォントは 100〜900 をカバーしますが、セルフホストのフォントは 400 と 700 だけというものもあります。ウェイトを変えてもプレビューが動かない場合、そのフォントが該当ウェイトを持たず、ブラウザが合成スタイルで代用しているだけです。

ページに読み込まれていないフォントもテストできますか？

内蔵のフォントメニューから選べます。検索ボックスと サンセリフ / セリフ / 等幅 / システム のフィルターがあり、選んだ Google Fonts は自動で読み込まれます。「ギャラリー」表示に切り替えれば同じサンプル文をすべてのフォントで一度に見られ、「比較」をオンにすれば 2 書体を並べて確認できます。カスタムフォントファイルのアップロードはここでは対応しておらず、その場合はサイト側で @font-face が必要です。

出力した CSS を React や Tailwind プロジェクトへどう移せばいいですか？

「CSS をコピー」を押すと、各プロパティが標準宣言として手に入ります。React では styled-components のテンプレートリテラルに貼るか、各行を camelCase キーに変換してください。Tailwind ならサイズとウェイトをユーティリティクラスに割り当て、字間と行間は任意値構文で残します。

関連ツール