【書庫】ニュースサイトのフォント一覧 文字の種類・色・サイズ

ニュースサイトのフォントのサイズと色一覧表

※Googleは検索結果のタイトル（見出し）と抜粋記事のフォントです。

※文字のcolor、リンクのcolorはカラーコードの色をつけています。

※(B)はweight bold です。

[table id=60 /]

	size/line height	本文	文字	リンク
	size/line height	size/line height	color	color
Google	18px/29px	13px/18px	#545454	#1a0dab
Yahoo!JAPAN	22px/29px(B)	16px/29px	#333333	#1d3994
livedoor	28px/36px	16px/30px	#2d2d2d	#2355a5
日経電子版	20px/24px(B)	16px/26px	#333333	#136
時事ドットコム	28px/34px(B)	18px/29px	#1e1e17	#174487
読売新聞	24px/40px(B)	16px/26px	#333333	#333
毎日新聞	26px/39px	18px/31px	#222222	#222222
毎日新聞	24px/34px	16px/26px	#0a0a03	#1E1E17
産経ニュース	22px/22px	17px/31px	#333333	#113b7

Googleのフォントの種類・色・サイズ

Googleのタイトルの文字のサイズ・色

Family

arial, sans-serif;

size	20px
line height	1.3
weight	normal
color	#222
link	#1a0dab
visited（訪問済み）	#609

抜粋

Family

arial, sans-serif;

size	14px
line height	1.57
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	30px
line height	1.4
weight	700
color	#333

Yahoo!JAPANの本文の文字・リンクの文字の色

Family

メイリオ, “Hiragino Kaku Gothic Pro”, Meiryo, “ヒラギノ角ゴ Pro W3”, “MS PGothic”, “MS UI Gothic”, Helvetica, Arial, sans-serif;

文字	メイリオ
size	17.5～20px
line height	1.6
weight	normal
color	#333
link	#0033CC
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	#000

llivedoorの本文の文字・リンクの文字の色

Family

“Hiragino Kaku Gothic Pro”, Meiryo, “MS PGothic”, arial, sans-serif;

文字	Meiryo（メイリオ）
size	16px
line height	1.9
weight	normal
color	#2D2D2D
link	#2355A5
visited（訪問済み）	#660099
hover（マウスオーバー）	underline

日経電子版のフォントの種類・色・サイズ

トップページのリンクの色

link	#00629D
visited（訪問済み）	―
hover（マウスオーバー）	underline

日経新聞の見出しの文字のサイズ・色

Family

“Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3”, Meiryo, メイリオ, Osaka, “MS PGothic”, arial, helvetica, sans-serif;

※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）

文字	MS Pゴシック
size	28.888px
line height	36px
weight	bold
color	#333

日経新聞の本文の文字・リンクの文字の色

Family

“Hiragino Kaku Gothic Pro”, Meiryo, “MS PGothic”, arial, sans-serif;

文字	MS Pゴシック
size	20px
line height	38px
weight	normal
color	#333
link	#00629D
visited（訪問済み）	―
hover（マウスオーバー）	underline

時事ドットコム 時事通信のフォント

トップページのリンクの色

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	26px
line height	1.2
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	21px
line height	1.5
weight	normal
color	#1E1E17
link	#174487
visited（訪問済み）	―
hover（マウスオーバー）	#174487

YOMIURI ONLINE 読売新聞のフォント

トップページのリンクの色

link	#333
visited（訪問済み）	#777#969
hover（マウスオーバー）	underline

YOMIURI ONLINEの見出しの文字のサイズ・色

Family

Telex, sans-serif;

文字	sans-serif
size	27px
line height	1,5
weight	bold
color	#1e2428

YOMIURI ONLINEの本文の文字・リンクの文字の色

Family

“Helvetica Neue”, Helvetica, Arial, sans-serif;

※青はwindowsのため、赤はmacOSのための記述（詳しくは下記参照）

文字	Helvetica
size	20px
line height	1.8
weight	normal
color	#1E2428
link	#333
visited（訪問済み）	#745399
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	22.5px
line height	1.7
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を指定しなかった場合、ブラウザで設定されているデフォルトのフォントで表示されます。

1. 優先させたいフォントファミリーから記載する
2. 英字名と日本語名を併記する場合は日本語名を先に記載する
3. フォント名に全角文字やスペースが含まれている場合はダブル「“”」またはシングルクォーテーション「”」で囲む
4. 日本語名を記述する場合は、最初に「@charset ‘UTF-8’;」を記述する
5. 最後に総称フォントファミリーを記述する

総称フォントファミリー

フォントを指定した場合でも、表示するデパイスにそのフォントがインストールされていなければ、指定したフォントは表示されません。

指示したすべてのフォントで表示できない場合、最後に総称フォントファミリーを記述しておくと、ブラウザが指示の通り選び表示してくれます。

• 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あいうえお