ニュースサイトのフォントのサイズと色一覧表
※Googleは検索結果のタイトル（見出し）と抜粋記事のフォントです。
※文字のcolor、リンクのcolorはカラーコードの色をつけています。
※(B)はweight bold です。
[table “60” not found /]Googleのフォントの種類・色・サイズ
Googleのタイトルの文字のサイズ・色
Family
arial, sans-serif;
| size | 18px |
| line height | 29px |
| weight | normal |
| color | #222 |
抜粋
Family
arial, sans-serif;
| size | 13px |
| line height | 18px |
| weight | normal |
| color | #545454 |
| link | #1a0dab |
| visited（訪問済み） | #609 |
| hover（マウスオーバー） | underline |
Yahoo!JAPANのフォントの種類・色・サイズ
トップページのリンクの色
| link | #1d3994 |
| visited（訪問済み） | ー |
| hover（マウスオーバー） | underline |
Yahoo!JAPANの見出しの文字のサイズ・色
Family
メイリオ, “Hiragino Kaku Gothic Pro“, Meiryo, “ヒラギノ角ゴ Pro W3“, “MS PGothic“, “MS UI Gothic“, Helvetica, Arial, sans-serif;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| size | 22px |
| line height | 29px |
| weight | bold |
| color | #333333 |
Yahoo!JAPANの本文の文字・リンクの文字の色
Family
メイリオ, “Hiragino Kaku Gothic Pro”, Meiryo, “ヒラギノ角ゴ Pro W3”, “MS PGothic”, “MS UI Gothic”, Helvetica, Arial, sans-serif;
| 文字 | メイリオ |
| size | 16px |
| line height | 29px |
| weight | normal |
| color | #333333 |
| link | #03C |
| visited（訪問済み） | #639 |
| hover（マウスオーバー） | #cc3434 |
livedoorのフォントの種類・色・サイズ
livedoorの見出しの文字のサイズ・色
Family
“Hiragino Kaku Gothic Pro“, Meiryo, “MS PGothic“, arial, sans-serif;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | Meiryo（メイリオ） |
| size | 28px |
| line height | 36px |
| weight | normal |
| color | #000000 |
llivedoorの本文の文字・リンクの文字の色
Family
“Hiragino Kaku Gothic Pro”, Meiryo, “MS PGothic”, arial, sans-serif;
| 文字 | Meiryo（メイリオ） |
| size | 16px |
| line height | 30px |
| weight | normal |
| color | #2d2d2d |
| link | #2355a5 |
| visited（訪問済み） | #660099 |
| hover（マウスオーバー） | underline |
日経電子版のフォントの種類・色・サイズ
トップページのリンクの色
| link | #136#333 |
| visited（訪問済み） | #6a3884 |
| hover（マウスオーバー） | underline |
日経新聞の見出しの文字のサイズ・色
Family
“Hiragino Kaku Gothic ProN“, “ヒラギノ角ゴ ProN W3“, Meiryo, メイリオ, Osaka, “MS PGothic“, arial, helvetica, sans-serif;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | MS Pゴシック |
| size | 20px |
| line height | 24px |
| weight | bold |
| color | #333333 |
日経新聞の本文の文字・リンクの文字の色
Family
“Hiragino Kaku Gothic Pro”, Meiryo, “MS PGothic”, arial, sans-serif;
| 文字 | MS Pゴシック |
| size | 16px |
| line height | 26px |
| weight | normal |
| color | #333333 |
| link | #136 |
| visited（訪問済み） | #6A3884 |
| hover（マウスオーバー） | #458cdd |
時事ドットコム 時事通信のフォント
トップページのリンクの色
| link | #1e1e17 |
| visited（訪問済み） | #8E8E8B |
| hover（マウスオーバー） | #174487 |
時事通信の見出しの文字のサイズ・色
Family
“ヒラギノ角ゴ ProN W3“,HiraKakuProN-W3, “ヒラギノ角ゴ Pro W3“,HiraKakuPro-W3, メイリオ, Meiryo, “ＭＳ Ｐゴシック“, “MS Pgothic“, Osaka, sans-serif, Helvetica, “Helvetica Neue“, Arial, Verdana;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | メイリオ |
| size | 28px |
| line height | 34px |
| weight | bold |
| color | #1e1e17 |
時事通信の本文の文字・リンクの文字の色
Family
“ヒラギノ角ゴ ProN W3”, HiraKakuProN-W3, “ヒラギノ角ゴ Pro W3”, HiraKakuPro-W3, メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “MS Pgothic”, Osaka, sans-serif, Helvetica, “Helvetica Neue”, Arial, Verdana;
| 文字 | メイリオ |
| size | 18px |
| line height | 29px |
| weight | normal |
| color | #1e1e17 |
| link | #174487 |
| visited（訪問済み） | #8E8E8B |
| hover（マウスオーバー） | #174487 |
YOMIURI ONLINE 読売新聞のフォント
トップページのリンクの色
| link | #333 |
| visited（訪問済み） | #777#969 |
| hover（マウスオーバー） | underline |
YOMIURI ONLINEの見出しの文字のサイズ・色
Family
Telex, sans-serif;
| 文字 | sans-serif |
| size | 24px |
| line height | 40px |
| weight | bold |
| color | #333333 |
YOMIURI ONLINEの本文の文字・リンクの文字の色
Family
“Helvetica Neue“, Helvetica, Arial, sans-serif;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | Helvetica |
| size | 16px |
| line height | 26px |
| weight | normal |
| color | #333333 |
| link | #333 |
| visited（訪問済み） | #777#969 |
| hover（マウスオーバー） | underline |
毎日新聞のフォントの種類・色・サイズ
トップページのリンクの色
| link | #122769 |
| visited（訪問済み） | |
| hover（マウスオーバー） | underline |
毎日新聞の見出しの文字のサイズ・色
Family
Meiryo, “Hiragino Kaku Gothic ProN“, Helvetica, Arial, sans-serif;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | Meiryo（メイリオ） |
| size | 26px |
| line height | 39px |
| weight | normal |
| color | #222222 |
毎日新聞の本文の文字・リンクの文字の色
Family
Meiryo, “Hiragino Kaku Gothic ProN”, Helvetica, Arial, sans-serif;
| 文字 | Meiryo（メイリオ） |
| size | 18px |
| line height | 31px |
| weight | normal |
| color | #222222 |
| link | #122769 |
| visited（訪問済み） | |
| hover（マウスオーバー） | underline |
朝日新聞デジタル 朝日新聞のフォント
トップページのリンクの色
| link | #1E1E17 |
| visited（訪問済み） | #5A5A53 |
| hover（マウスオーバー） | border#D2D2CB |
朝日新聞デジタルの見出しの文字のサイズ・色
Family
Meiryo;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | Meiryo（メイリオ） |
| size | 24px |
| line height | 34px |
| weight | bold |
| color | #0a0a03 |
朝日新聞デジタルの本文の文字・リンクの文字の色
Family
Meiryo;
| 文字 | Meiryo（メイリオ） |
| size | 16px |
| line height | 26px |
| weight | normal |
| color | #0a0a03 |
| link | #1E1E17 |
| visited（訪問済み） | #5A5A53 |
| hover（マウスオーバー） | backgroud |
産経ニュース 産経新聞のフォント
トップページのリンクの色
| link | #113b7d |
| visited（訪問済み） | #113b7d |
| hover（マウスオーバー） | underline |
産経ニュースの見出しの文字のサイズ・色
Family
“ヒラギノ角ゴ ProN W3“, HiraKakuProN-W3, “ヒラギノ角ゴ Pro W3“, HiraKakuPro-W3, メイリオ, Meiryo, “ＭＳ Ｐゴシック“, “MS Pgothic“, Osaka, sans-serif, Helvetica, “Helvetica Neue“, Arial, Verdana;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | メイリオ |
| size | 22px |
| line height | 22px |
| weight | normal |
| color | #333333 |
産経ニュースの本文の文字・リンクの文字の色
Family
“ヒラギノ角ゴ ProN W3”, HiraKakuProN-W3, “ヒラギノ角ゴ Pro W3”, HiraKakuPro-W3, メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “MS Pgothic”, Osaka, sans-serif, Helvetica, “Helvetica Neue”, Arial, Verdana;
| 文字 | メイリオ |
| size | 17px |
| line height | 31px |
| weight | normal |
| color | #333333 |
| link | #113b7 |
| visited（訪問済み） | #113b7 |
| hover（マウスオーバー） | underline |
共同通信 47NEWSのフォントの種類・色・サイズ
トップページのリンクの色
| link | #1d3994 |
| visited（訪問済み） | #941D55 |
| hover（マウスオーバー） | underline |
共同通信の見出しのサイズ・色
メイリオ
Family
“Noto Sans JP”, Roboto, “Hiragino Kaku Gothic ProN“, sans-serif;
※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）
| 文字 | Noto Sans JP |
| size | 36px |
| line height | 43px |
| weight | bold |
| color | #222324 |
共同通信の本文の文字・リンクの文字の色
Meiryo（メイリオ）
Family
“Noto Sans JP”, Roboto, “Hiragino Kaku Gothic ProN”, sans-serif;
| 文字 | Noto Sans JP |
| size | 15px |
| line height | 24px |
| weight | 300 |
| color | #222324 |
| link | #1d3994 |
| visited（訪問済み） | #941D55 |
| hover（マウスオーバー） | underline |
font-family 比較 インストールされているOS
macOSとWindows、両方にインストールされているフォント
| Verdana | macOS・Windows |
| Arial | macOS・Windows |
ArialとHelvetica
HelveticaはmacOS・iOSに標準搭載されているフォントで、WindowsではHelveticaは「Arial の別名」として登録されています。WindowsでHelveticaを指定するとArialで表示されます。
Arialは、Helveticaの代用windowsやMacの両方に標準搭載されてます。
| Helvetica | 最も利用されているフォント | masOS |
| Helvetica Neue | masOS | |
| Arial | Helveticaの派生 | mac・Windows |
| Geneva | Helveticaの派生でかわいい文字 | mac・Windows |
メイリオとヒラギノ
| Meiryo | Windows |
| HiraKakuPro-W3 | macOS・iOS |
| HiraKakuProN-W3 | macOS・iOS |
メイリオ
Windows Vistaの日本語版のシステム用フォントとして開発され、Windows 7でMeiryo UIに改良。macOSではMeiryo UIをインストールしなければ表示されません。
ヒラギノ
macOS・iOSに標準搭載されていうフォントで、Windowsでは表示されません。
| HiraKakuPro-W3 | ヒラギノ角ゴ Pro W3 |
| HiraKakuProN-W3 | ヒラギノ角ゴ ProN W3 |
時事通信や産経新聞はヒラギノを英語名と日本語名で表記しています。Safariなど、日本語名を認識しないブラウザや、英語名を認識しないブラウザがあるため両方を記述します。
Firefoxでは ‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには『’ヒラギノ角ゴ Pro W3′ , ‘Hiragino Kaku Gothic Pro’』と両方表記しなくてはいけない。Vistaのメイリオに対応する場合も日本語で指定する必要がある。
MS Pゴシック
macOSにはインストールされていないフォントです。MS PGothicの日本語はアンチエイリアスが効かずギザギザに表示されてしまいます。
| MS PGothic | Windows95～ |
| MS UI Gothic | Windows98～ |
Noto Sans JP
| Noto Sans JP | 無料の日本語のwebフォント |
webフォント
webフォントを使うと、フォントがインストールされているか否か、表示する方の環境に頼らず、指示したフォントが表示されます。
その他のフォント
| Roboto | Android・Chrome OS |
| Osaka | macは追加インストール可能 |
| Telex |
Roboto
AndroidやChrome OSのシステムフォント
Osaka
Classic Mac OS日本語版において標準フォント・システムフォントとして使われた日本語フォント
font-familyの書き方
font-familyを指定しなかった場合、ブラウザで設定されているデフォルトのフォントで表示されます。
- 優先させたいフォントファミリーから記載する
- 英字名と日本語名を併記する場合は日本語名を先に記載する
- フォント名に全角文字やスペースが含まれている場合はダブル「“”」またはシングルクォーテーション「”」で囲む
- 日本語名を記述する場合は、最初に「@charset ‘UTF-8’;」を記述する
- 最後に総称フォントファミリーを記述する
総称フォントファミリー
フォントを指定した場合でも、表示するデパイスにそのフォントがインストールされていなければ、指定したフォントは表示されません。
指示したすべてのフォントで表示できない場合、最後に総称フォントファミリーを記述しておくと、ブラウザが指示の通り選び表示してくれます。
- sans-serif ゴシック体系のフォント
- serif 明朝体系のフォント
- cursive 筆記体系のフォント
- fantasy 装飾系のフォント
- monospace 等幅系のフォント
ブラウザのデフォルトのフォント
| Chrome | メイリオ | 設定→フォントをカスタマイズで変更 |
| IE | MS PGothic | 設定→全般→フォントで変更 |
| Firefox | MS PGothic | 設定→コンテンツ→フォントで変更 |
インストールされているフォント一覧が確認できるサイト
- wordmark
フォント一覧
macOSとWindows、両方にインストールされているフォント
※一応記載していますが、表示するデパイスにそのフォントがインストールされていなければ、指定しているフォントは表示されません。
| Verdana ヴァーダナ ABCDEFabcdef12345あいうえお |
| arial アリアル ABCDEFabcdef12345あいうえお |
Windowsにインストールされているフォント
※一応記載していますが、表示するデパイスにそのフォントがインストールされていなければ、指定しているフォントは表示されません。
| Meiryo メイリオ ABCDEFabcdef12345あいうえお |
| MS PGothic MS Pゴシック ABCDEFabcdef12345あいうえお |
| MS UI Gothic ゴシック ABCDEFabcdef12345あいうえお |
macOS・iOSにインストールされているフォント
※一応記載していますが、表示するデパイスにそのフォントがインストールされていなければ、指定しているフォントは表示されません。
| Helvetica ヘルベチカ ABCDEFabcdef12345あいうえお |
| Helvetica Neue ヘルベチカ ABCDEFabcdef12345あいうえお |
| HiraKakuPro-W3 ヒラギノ角ゴ ABCDEFabcdef12345あいうえお |
| HiraKakuProN-W3 ヒラギノ角ゴ ABCDEFabcdef12345あいうえお |
Android・Chrome OS
※一応記載していますが、表示するデパイスにそのフォントがインストールされていなければ、指定しているフォントは表示されません。
| Roboto ABCDEFabcdef12345あいうえお |
インストールされていると表示されるフォント
※一応記載していますが、表示するデパイスにそのフォントがインストールされていなければ、指定しているフォントは表示されません。
| Osaka ABCDEFabcdef12345あいうえお |