Font

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


スポンサーリンク

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

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

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

※(B)はweight bold です。

サイト見出し本文文字リンク
size/line heightsize/line heightcolorcolor
Google18px/29px13px/18px#545454
#1a0dab
Yahoo!JAPAN22px/29px(B)16px/29px#333333#1d3994
livedoor28px/36px16px/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/39px18px/31px#222222#222222
朝日新聞24px/34px16px/26px#0a0a03#1E1E17
産経ニュース22px/22px17px/31px#333333#113b7
スポンサーリンク

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 Pゴシック“, “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 Pゴシック”, “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 Pゴシック“, “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 Pゴシック”, “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

フォント一覧

Font

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