読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

有名サイトのフォントまわりのCSS指定状況

gestaltung Typography WebDev

 採集方法は、記事詳細ページで本文にインスペクタを当て、そのpタグや包含ブロックに適用されているCSSをまず見て、次にbodyや*まで遡っていくという方法をとった。下記にその採取結果をCSSスニペットとして掲載するが、スタイルのうちフォントに関連しない部分はこちらで勝手に省いた。採取は主に3月下旬に行われた。

大手新聞社

 文字を読ませるということならば、まずは新聞社だろうということで採取しに行った。しかし、日頃眺めている中で、デザイン的にあんまり期待できないことはわかっているため、左右バランスよく2社のみ。

朝日新聞

朝日新聞デジタル:朝日新聞社のニュースサイト
 フォントファミリーの指定なしで、ブラウザのデフォルトフォントに任せている。

#Main #MainInner .ArticleBody p {
        font-size: 100%;
        line-height: 1.6;
        letter-spacing: 0;
}
産経新聞

産経ニュース

body {
        font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"MS Pゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;
}

.articleText article .fontMiddiumText p {
        font-size: 17px;
        font-size: 1.7rem;
        line-height: 1.8;
}

ファッション系(モード寄り)

 モード系のファッションを扱うなら、タイポグラフィにも気を使うかな、と思って採取しに行った。けれども、際立っているところはない。ひとつ思ったのは、文字を小さくする方がスタイリッシュな印象を与えるのかな、ということ。大きい文字といえば、子供向けの絵本や高齢者向けのケータイなどが思い浮かぶ。だからその逆張りであえて小さくして、「オトナな」印象を与えるにはいいかもしれないけれど、私としては読みやすさを犠牲にしてそこまでやる意味は見いだせない。

VOGUEジャパン

ファッション最新情報 | VOGUE

body {
	font-family: "avenir_medium","ヒラギノ角ゴ Pro W3","Lucida Grande","Hiragino Kaku Gothic Pro",メイリオ,Verdana,"MS Pゴシック",sans-serif;
        letter-spacing: 0.07em;
}
ヌメロ・トウキョウ

 ヌメロ・トウキョウと次のエル・オンラインは、bodyに12px指定して、それを文章にもそのまま適用している。

Numero TOKYO (ヌメロ・トウキョウ)|numero.jp

body {
	font-family: Helvetica,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Verdana, "MS Pゴシック", sans-serif;
        font-size: 12px;
}
エル・オンライン

【ELLE】ファッション・ビューティ・セレブの最新情報|エル・オンライン(ELLE ONLINE)

body, textarea, input, select {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
.fatale

.fatale|fatale.honeyee.com

body {
        font-family: 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS Pゴシック', sans-serif;
        font-size: 11px;
        font-size: 1.1rem;
        line-height: 1.4;
        letter-spacing: 0;
        -webkit-font-smoothing: antialiased;
}
.individual #articleArea article div.detail-wrap {
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 1.45;
}

ビジネス情報サイト

東洋経済オンライン

東洋経済オンライン | 新世代リーダーのためのビジネスサイト

body, input {
	font-family: 'Meiryo', 'メイリオ', Verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS Pゴシック',sans-serif;
}

#article-body-inner p {
        margin-bottom: 1em;
        line-height: 1.6em;
        text-indent: 1em;
        letter-spacing: 0.05em; 
} 
ダイヤモンド・オンライン

ダイヤモンド・オンライン(Diamond Online)|ダイヤモンド社の総合ビジネス情報サイト

* {
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
講談社 現代ビジネス

現代ビジネス [講談社]

* {
  font-family: '平成明朝','Lucida Grande', Verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS Pゴシック',sans-serif;
}

#main-contents p {
  font-size: 0.9em;
  line-height: 1.6em;
  letter-spacing: 0.1em;
}

平成明朝は,ミッドレンジクラスのプリンタにインストールされていることがあり,たとえば Windows で“MS 明朝”が置換されたりすることがある。 (cf.Hints of fonts on the web -- Section 14 )

ライフハッカー日本版

 游ゴシック登場。
ライフハッカー[日本版]

body {
  font-family: SourceHanSansJP-Light, YuGothic, 'Yu Gothic', "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  line-height: 1.75;
}
幻冬舎プラス

幻冬舎plus|幻冬舎が運営する刺激と感動のマガジン&ストア

* {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic",Helvetica ,sans-serif;
}

#article-body p {
  line-height: 1.8;
  margin-bottom: 1em;
}

その他

NAVERまとめ

NAVER まとめ[情報をデザインする。キュレーションプラットフォーム]

body.ExOsMac {
  font-family: arial,sans-serif;
}
body {
  font: 12px/1.5 arial,sans-serif;
}
Twitter

Welcome to Twitter - Login or Sign up

body.ja {
  font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}
cakes

cakes(ケイクス)|8061本の記事、コラムが週150円で読み放題

body {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Arial, Helvetica, sans-serif;
}
Facebook
body, button, input, label, select, td, textarea {
      font-family: 'lucida grande',tahoma,verdana,arial,"hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
      font-size: 11px;
}
._5pbw, ._5pbx {
        font-size: 13px;
        font-weight: normal;
        line-height: 1.38;
}
WIRED

WIRED.jp

body {
  background-color: #f2f2f2;
  color: #000000;
  font-family: "Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS ゴシック","MS Gothic",sans-serif;
  letter-spacing: 0.05em;
}

#ContentsArea .article_maincontents .wiredEdit {
  font-size: 14px;
  line-height: 26px;
}

結び

 エディトリアルデザイン志向のウェブデザイナーとしては、日本語サイトにおいてタイポグラフィがないがしろにされている、という問題意識から現状調査をしに行った。CSSの発展やウェブフォントなどによって、サイトのタイポグラフィは差別化要因になると確信している ワクワク♪o(^o^o)(o^o^)oワクワク♪.

更新記録

  • 4/9, WIRED日本版を追加