スタイルのサンプルを集める
監査したいサイトを開き、DevToolsからCSSルール、インラインstyle、computed styleをコピーします。ライブページの情報が必要な場合は、確認権限のあるページでスニペットを実行してJSONを貼り付けます。
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上のサイズ確認を分けて扱えます。
検出ルール
0
サイズ範囲
-
最多サイズ
-
| セレクター | 宣言サイズ | 換算px | 行間 | 太さ | 色 |
|---|
フォントサイズ検出ツールの使い方
基準pxを設定する
多くのサイトは16pxを基準にしますが、デザインシステムによって異なります。rem、em、%を現実的に換算するため、基準値を合わせます。
タイポグラフィ表を比較する
selector、宣言値、換算px、line-height、太さ、色をまとめて確認し、見出しやボタン、本文の不整合を見つけます。
フォントサイズチェッカーが役立つ場面
ブラウザからコピーしたCSSルールやcomputed styleのJSONを貼り付けると、ページ内テキストのフォントサイズを確認できます。rem、em、%、pt、pxを実用的なpx表に変換し、line-height、font-weight、colorも一緒に表示します。
ランディングページの書体監査
ヒーロー見出し、ボタン、カード、よくある質問の文章などが一貫したサイズスケールに沿っているか確認できます。
CSS単位をpxに変換
rem、em、%、pxが混在する実装を、比較しやすいpx表示にそろえます。
レスポンシブ文字サイズの確認
デスクトップとモバイルのCSSを別々に貼り付け、breakpointごとの差を比較できます。
サイズと太さと色を同時確認
読みやすさはサイズだけでは決まりません。行間、太さ、色も一緒に見ることで原因を探せます。
フォントサイズ検出とFont FinderとDevToolsの違い
このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。
Webサイト用フォントサイズ検出ツール
このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。
- rem、em、%、pt、pxを比較しやすいpx値に変換します。
- selector、line-height、font-weight、colorを結果ごとに表示します。
- 自分で確認できるページのCSSやcomputed-style JSONに対応します。
- 画像からのフォント名推定と、CSS上のサイズ確認を分けて扱えます。
向いている用途: CSSまたはブラウザ出力からフォントサイズを確認
画像フォント検索
テキストがスクリーンショット、ロゴ、画像化された画像にある場合は、画像からフォントを検出します。
- スクリーンショットやロゴに適しています
- 有力なフォント名を提示します
- CSSを確認できない場合に便利です
- CSS上のサイズ確認には向きません
向いている用途: 画像からフォントを識別したい場合
DevTools
ブラウザーのDevToolsは1つのライブ要素の正確な値を確認できます。一方、このページでは複数のサンプルを1つの表で比較できます。
- ライブ要素の正確な値
- デバッグに適しています
- サンプルが多いと時間がかかります
- ページへのアクセスが必要です
向いている用途: 1つの要素を詳しく確認したい場合
CSSまたはブラウザ出力からフォントサイズを確認
このツールは実際のWebサイト監査向けです。CSS、インラインstyle、ブラウザスニペットでコピーしたJSONを貼り付けて分析します。非公開ページの取得やセキュリティ回避は行わず、すでに確認できるスタイルを整理します。
フォントサイズチェッカーが役立つ場面
ブラウザからコピーしたCSSルールやcomputed styleのJSONを貼り付けると、ページ内テキストのフォントサイズを確認できます。rem、em、%、pt、pxを実用的なpx表に変換し、line-height、font-weight、colorも一緒に表示します。
フォントサイズ検出とFont FinderとDevToolsの違い
フォント名だけでなくCSS上のサイズを確認したいときは、この手順を使います。
フォントサイズ検出ツールのよくある質問
Webサイトのフォントサイズはどう確認しますか?
ブラウザでテキストを検証し、CSSまたはcomputed styleをコピーしてこのツールに貼り付けます。
任意のURLを自動スキャンできますか?
できません。静的ツールはCORS、非公開ページ、ログイン壁を安全に回避できません。アクセス可能なページからスタイルをコピーしてください。
宣言サイズとcomputed pxの違いは?
宣言サイズはCSSの元の値です。computed pxは設定した基準pxにもとづく概算変換です。
remやemに対応していますか?
はい。基準pxで変換します。emは親要素に依存するため、厳密にはcomputed JSONの利用を推奨します。
line-height、太さ、色も必要ですか?
読みやすさは行間、太さ、コントラストにも左右されるため、同時に確認すると判断しやすくなります。
画像用フォント検出との使い分けは?
CSS上のサイズ確認にはこのページを使い、スクリーンショットやロゴからフォント名を知りたい場合は画像用検出を使います。