フォント&ウェイト ライブプレビュー

説明 データ更新日: 2026年7月12日

Webセーフフォントや主要OSのシステムフォントを検索・選択し、実際のデバイスでのレンダリング結果(サイズ別・ウェイト別:100〜900)をリアルタイムに比較できる確認ツールです。

ブラウザを実行している「今使っている物理的なデバイス」のローカルフォントを用いてレンダリングするため、デバイスごとの「生の表示状態」を確認できます。また、ブラウザ上で該当フォントが利用可能かを自動検出しステータス表示します。

1. フォントの選択 & 直接入力
フォントファミリー名
検出中...
表示中のフォント: sans-serif
CSS: font-family: sans-serif;
システム&Webセーフフォント一覧から選択
すべて
日本語フォント
英語フォント
Sans-serif
Serif
等幅 (Mono)
その他
2. プレビュー設定
サンプルテキスト
3. ウェイト別ライブプレビュー(100 〜 900)
CSS記述・ウェイト名
表示プレビュー (フォントサイズ: 20px)
font-weight: 100; Thin (極細 / ヘアライン)
font-weight: 200; Extra Light (超極細)
font-weight: 300; Light (細字)
font-weight: 400; Normal / Regular (標準)
font-weight: 500; Medium (中字)
font-weight: 600; Semi Bold (中太)
font-weight: 700; Bold (太字)
font-weight: 800; Extra Bold (極太)
font-weight: 900; Black / Heavy (超極太)
4. サイズ別ライブプレビュー(12px 〜 64px)
CSS指定サイズ
表示プレビュー (ウェイト: 400)
font-size: 12px;
font-size: 14px;
font-size: 16px;
font-size: 18px;
font-size: 20px;
font-size: 24px;
font-size: 32px;
font-size: 48px;
font-size: 64px;
CSS font-weight 仕様・早見表

CSSの font-weight プロパティに指定できる数値と、それに対応する一般的なウェイト(太さ)の名称および対応表です。

数値 ウェイト名(日/英) 説明・一般的な実装状況
100 極細 (Thin / Hairline) 非常に細いウェイト。細字のシステムフォント(SF Pro, Segoe UI 等)でサポートされていますが、通常のゴシック体等ではRegularで代替されることが多いです。
200 超極細 (Extra Light / Ultra Light) ThinとLightの中間のウェイト。
300 細字 (Light) 一般的な細字。本文よりやや細めのサブタイトル等に適しています。遊ゴシックの「L(ライト)」などが該当します。
400 標準 (Normal / Regular) 通常のテキストや本文用ウェイト。font-weight: normal; と同等です。ヒラギノのW3、遊ゴシックのR、メイリオのレギュラーが該当します。
500 中字 (Medium) Regularよりやや太く、視認性を高めたウェイト。ヒラギノのW4、遊ゴシックのMなどが該当します。
600 中太 (Semi Bold / Demi Bold) Boldよりやや細いウェイト。見出しや強調箇所に適しています。
700 太字 (Bold) 一般的な太字。font-weight: bold; と同等です。ヒラギノのW6、遊ゴシックのB、メイリオのボールドが該当します。
800 極太 (Extra Bold / Ultra Bold) 非常に太いウェイト。非常に強調したい見出しなどに用いられます。
900 超極太 (Black / Heavy) 最も太いウェイト。対応しているフォントファミリーは限られており、一部の欧文フォントやNoto Sansなどで利用できます。
Copyright 2023 Project iDEEILE all right reserved.