Webサイト用フォントサイズ検出ツール

ブラウザからコピーしたCSSルールやcomputed styleのJSONを貼り付けると、ページ内テキストのフォントサイズを確認できます。rem、em、%、pt、pxを実用的なpx表に変換し、line-height、font-weight、colorも一緒に表示します。

インタラクティブツール

CSSまたはブラウザ出力からフォントサイズを確認

このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。

  • rem、em、%、pt、pxを比較しやすいpx値に変換します。
  • selector、line-height、font-weight、colorを結果ごとに表示します。
  • 自分で確認できるページのCSSやcomputed-style JSONに対応します。
  • 画像からのフォント名推定と、CSS上のサイズ確認を分けて扱えます。

フォントサイズ検出ツールの使い方

Step 1

スタイルのサンプルを集める

監査したいサイトを開き、DevToolsからCSSルール、インラインstyle、computed styleをコピーします。ライブページの情報が必要な場合は、確認権限のあるページでスニペットを実行してJSONを貼り付けます。

Step 2

基準pxを設定する

多くのサイトは16pxを基準にしますが、デザインシステムによって異なります。rem、em、%を現実的に換算するため、基準値を合わせます。

Step 3

タイポグラフィ表を比較する

selector、宣言値、換算px、line-height、太さ、色をまとめて確認し、見出しやボタン、本文の不整合を見つけます。

フォントサイズチェッカーが役立つ場面

ブラウザからコピーしたCSSルールやcomputed styleのJSONを貼り付けると、ページ内テキストのフォントサイズを確認できます。rem、em、%、pt、pxを実用的なpx表に変換し、line-height、font-weight、colorも一緒に表示します。

ランディングページの書体監査

ヒーロー見出し、ボタン、カード、FAQなどが一貫したサイズスケールに沿っているか確認できます。

CSS単位をpxに変換

rem、em、%、pxが混在する実装を、比較しやすいpx表示にそろえます。

レスポンシブ文字サイズの確認

デスクトップとモバイルのCSSを別々に貼り付け、breakpointごとの差を比較できます。

サイズと太さと色を同時確認

読みやすさはサイズだけでは決まりません。行間、太さ、色も一緒に見ることで原因を探せます。

フォントサイズ検出とFont FinderとDevToolsの違い

このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。

CSS

Webサイト用フォントサイズ検出ツール

このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。

  • rem、em、%、pt、pxを比較しやすいpx値に変換します。
  • selector、line-height、font-weight、colorを結果ごとに表示します。
  • 自分で確認できるページのCSSやcomputed-style JSONに対応します。
  • 画像からのフォント名推定と、CSS上のサイズ確認を分けて扱えます。

向いている用途: CSSまたはブラウザ出力からフォントサイズを確認

Image

Font Finder

Use image-based font detection when the text is in a screenshot, logo, or flattened image.

  • Best for screenshots and logos
  • Returns probable font names
  • Useful when CSS is unavailable
  • Less precise for CSS size

向いている用途: image font identification

Manual

DevTools

Browser DevTools gives exact values for one live element, while this page helps compare several samples in one table.

  • Exact live values
  • Good for debugging
  • Slower for many samples
  • Requires access to the page

向いている用途: single-element inspection

CSSまたはブラウザ出力からフォントサイズを確認

このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。

Webサイト用フォントサイズ検出ツール

フォントサイズチェッカーが役立つ場面

ブラウザからコピーしたCSSルールやcomputed styleのJSONを貼り付けると、ページ内テキストのフォントサイズを確認できます。rem、em、%、pt、pxを実用的なpx表に変換し、line-height、font-weight、colorも一緒に表示します。

フォントサイズチェッカーが役立つ場面

フォントサイズ検出とFont FinderとDevToolsの違い

Use this workflow when the question is CSS size, not only the font name.

フォントサイズ検出とFont FinderとDevToolsの違い

フォントサイズ検出 FAQ

Webサイトのフォントサイズはどう確認しますか?

ブラウザでテキストを検証し、CSSまたはcomputed styleをコピーしてこのツールに貼り付けます。

任意のURLを自動スキャンできますか?

できません。静的ツールはCORS、非公開ページ、ログイン壁を安全に回避できません。アクセス可能なページからスタイルをコピーしてください。

宣言サイズとcomputed pxの違いは?

宣言サイズはCSSの元の値です。computed pxは設定した基準pxにもとづく概算変換です。

remやemに対応していますか?

はい。基準pxで変換します。emは親要素に依存するため、厳密にはcomputed JSONの利用を推奨します。

line-height、太さ、色も必要ですか?

読みやすさは行間、太さ、コントラストにも左右されるため、同時に確認すると判断しやすくなります。

画像用フォント検出との使い分けは?

CSS上のサイズ確認にはこのページを使い、スクリーンショットやロゴからフォント名を知りたい場合は画像用検出を使います。