配信とインテリアの実話映画
WordPressを簡単に
Morning&Lunch
PCとスマホとゲーム
配信とインテリアの実話映画
配信とインテリアの実話映画

Style Note

WordPressを簡単に
WordPressを簡単に

WordPress

Morning&Lunch
Morning&Lunch

モーニング&ランチ

PCとスマホとゲーム
PCとスマホとゲーム

webNote

previous arrow
next arrow
 
Shadow
AP

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

フォント一覧 WordPressの書庫
フォント一覧
AP

この記事は古い内容です。

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

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

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

※(B)はweight bold です。

[table id=60 /]

size/line height本文文字リンク
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;

size20px
line height1.3
weightnormal
color#222
link#1a0dab
visited(訪問済み) #609

抜粋

Family

arial, sans-serif;

size14px
line height1.57
weightnormal
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のための記述(詳しくは下記参照)

size30px
line height1.4
weight700
color#333

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

Family

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

文字メイリオ
size17.5~20px
line height1.6
weightnormal
color#333
link#0033CC
visited(訪問済み)#639
hover(マウスオーバー)#CC3434

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

livedoorの見出しの文字のサイズ・色

Family

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

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

文字Meiryo(メイリオ)
size28px
line height36px
weightnormal
color#000

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

Family

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

文字Meiryo(メイリオ)
size16px
line height1.9
weightnormal
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ゴシック
size28.888px
line height36px
weightbold
color#333

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

Family

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

文字MS Pゴシック
size20px
line height38px
weightnormal
color#333
link#00629D
visited(訪問済み)
hover(マウスオーバー)underline

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

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

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のための記述(詳しくは下記参照)

文字メイリオ
size26px
line height1.2
weightbold
color#1E1E17

時事通信の本文の文字・リンクの文字の色

Family

“ヒラギノ角ゴ ProN W3”, HiraKakuProN-W3, “ヒラギノ角ゴ Pro W3”, HiraKakuPro-W3, メイリオ, Meiryo, “MS Pゴシック”, “MS Pgothic”, Osaka, sans-serif, Helvetica, “Helvetica Neue”, Arial, Verdana;

文字メイリオ
size21px
line height1.5
weightnormal
color#1E1E17
link#174487
visited(訪問済み)
hover(マウスオーバー)#174487

YOMIURI ONLINE 読売新聞のフォント

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

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

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

Family

Telex, sans-serif;

文字sans-serif
size27px
line height1,5
weightbold
color#1e2428

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

Family

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

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

文字Helvetica
size20px
line height1.8
weightnormal
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(メイリオ)
size26px
line height39px
weightnormal
color#222222

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

Family

Meiryo, “Hiragino Kaku Gothic ProN”, Helvetica, Arial, sans-serif;

文字Meiryo(メイリオ)
size22.5px
line height1.7
weightnormal
color#222222
link#122769
visited(訪問済み) 
hover(マウスオーバー)underline

朝日新聞デジタル 朝日新聞のフォント

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

link#1E1E17
visited(訪問済み)#5A5A53
hover(マウスオーバー)border#D2D2CB

朝日新聞デジタルの見出しの文字のサイズ・色

Family

Meiryo;

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

文字Meiryo(メイリオ)
size24px
line height34px
weightbold
color#0a0a03

朝日新聞デジタルの本文の文字・リンクの文字の色

Family

Meiryo;

文字Meiryo(メイリオ)
size16px
line height26px
weightnormal
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のための記述(詳しくは下記参照)

文字メイリオ
size22px
line height22px
weightnormal
color#333333

産経ニュースの本文の文字・リンクの文字の色

Family

“ヒラギノ角ゴ ProN W3”, HiraKakuProN-W3, “ヒラギノ角ゴ Pro W3”, HiraKakuPro-W3, メイリオ, Meiryo, “MS Pゴシック”, “MS Pgothic”, Osaka, sans-serif, Helvetica, “Helvetica Neue”, Arial, Verdana;

文字メイリオ
size17px
line height31px
weightnormal
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
size36px
line height43px
weightbold
color#222324

共同通信の本文の文字・リンクの文字の色

Meiryo(メイリオ)

Family

“Noto Sans JP”, Roboto, “Hiragino Kaku Gothic ProN”, sans-serif;

文字Noto Sans JP
size15px
line height24px
weight300
color#222324
link#1d3994
visited(訪問済み)#941D55
hover(マウスオーバー)underline

font-family 比較 インストールされているOS

macOSとWindows、両方にインストールされているフォント

VerdanamacOS・Windows
ArialmacOS・Windows

ArialとHelvetica

HelveticaはmacOS・iOSに標準搭載されているフォントで、WindowsではHelveticaは「Arial の別名」として登録されています。WindowsでHelveticaを指定するとArialで表示されます。

Arialは、Helveticaの代用windowsやMacの両方に標準搭載されてます。

Helvetica最も利用されているフォントmasOS
Helvetica Neue masOS
ArialHelveticaの派生mac・Windows
GenevaHelveticaの派生でかわいい文字mac・Windows

メイリオとヒラギノ

MeiryoWindows
HiraKakuPro-W3macOS・iOS
HiraKakuProN-W3macOS・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 PGothicWindows95~
MS UI GothicWindows98~

Noto Sans JP

Noto Sans JP無料の日本語のwebフォント

webフォント

webフォントを使うと、フォントがインストールされているか否か、表示する方の環境に頼らず、指示したフォントが表示されます。

その他のフォント

RobotoAndroid・Chrome OS
Osakamacは追加インストール可能
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メイリオ設定→フォントをカスタマイズで変更
IEMS PGothic設定→全般→フォントで変更
FirefoxMS 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あいうえお

タイトルとURLをコピーしました