9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

世界で気になるサイトのフォントファミリーが知りたい!

Posted at

現在の世界のWebサイトでは、どのようなフォントを使用しているのか。
単純な好奇心で見ていきたいと思います。
今回はファッション系サイト。独断と偏見で選びました。

#日本
COMME_des_GARÇONS.jpg

####COMME des GARÇONS(コム デ ギャルソン)

トップページbody
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    font-family: 'HelveticaNeueW01-95Blac', "Helvetica Neue CE 95 Black",
    "Helvetica Neue LT 95 Black", "Helvetica Neue 95 Black", 
    "HelveticaNeue-Black", "Helvetica Neue Black", "Helvetica Neue CE 85 Heavy",
    "Helvetica Neue LT 85 Heavy", "Helvetica Neue 85 Heavy", "HelveticaNeue-Heavy",
    "Helvetica Neue Heavy", "Helvetica Neue CE 75 Bold", "Helvetica Neue LT 75 Bold", 
    "Helvetica Neue 75 Bold", "HelveticaNeue-Bold", "Helvetica Neue Bold", 
    "Helvetica Neue", 'HelveticaNeueW01-85Heav', Arial, "Lucida Grande", sans-serif;

ショップリストbody
    margin: 0;
    padding: 0 0 0 0;
    background-color: #FFF;
    background-image: url(../images/cdg-bg-halftonepolka-rev2.png);
    background-size: 500px 500px;
    background-position: 0 0,250px 250px;
    background-attachment: fixed;
    color: #000;
    font-size: 34px;
    line-height: 39px;
    font-family: "Gothic MB101 Ultra";

#中国
wuyonguseless.jpg

####wuyonguseless(ウー・ヨン)

body
    font-family: '楷体', '微软雅黑', 'Microsoft YaHei', Tahoma;
    font-size: 11px;
    line-height: 22px;
    color: #1a1a1a;
    background: #51504a;

#韓国
OBZEE.jpg

####OBZEE(オブジェ)

body
    font-size: 0.75em;
    font-family: '나눔고딕', 'NanumGothicWeb', '돋움', Dotum, Helvetica,
    Verdana, Arial, sans-serif;

#アメリカ
nike.jpg

####NIKE(ナイキ)

body
    font-family: OneNikeCurrency,Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    min-width: 768px;
    background: #fff;
    position: relative;
    overflow: visible;
    -webkit-font-smoothing: antialiased;
    margin: 0;

#イギリス
BURBERRY.jpg

####BURBERRY(バーバリー)

body
    min-width: 1024px;
    font-size: 68.75%;
    font-family: 'Proxima N W01', Arial, Helvetica, Sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: #171717;

#フランス
Maison_Kitsuné.jpg

####MAISON KITSUNÉ(メゾン キツネ)

body
    background: #fff;
    font: 11px/16px helvetica,Helvetica_R, Verdana, sans-serif;
    color: #000;
    text-align: center;

#イタリア
DIESEL.jpg

####DIESEL(ディーゼル)

body
    font-family: trade-gotich-medium,Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #191919;
    letter-spacing: 0.075em;
    line-height: 1.4;
    text-transform: none;
    max-width: 1920px;
    margin: 0 auto;

#ドイツ
HUGO BOSS.jpg

####HUGO BOSS(ヒューゴ ボス)

body
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: Univers,sans-serif;
    background-color: #EEE;
    font-weight: 300;
    max-width: 100%;
    overflow: auto;
    position: relative;

#フィンランド
marimekko.jpg

####marimekko(マリメッコ)

body
    font-family: MarimekkoSans,Arial,Verdana,Sans-serif;
    font-size: 14px;
    line-height: 22px;
    background-color: #f6f5f3;

#スェーデン
HM.jpg

####H&M(エイチ アンド エム)

body
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: Univers,sans-serif;
    background-color: #EEE;
    font-weight: 300;
    max-width: 100%;
    overflow: auto;
    position: relative;

#スペイン
zara.jpg

####ZARA(ザラ)

body
    font-family: 'Helvetica','Arial',Sans-Serif;
    color: #222;
    font-size: 11px;
    line-height: 1.231;
    min-width: 990px;

#ブラジル
melissa.jpg

####melissa(メリッサ)

body
    font-family: utopia-std-subhead, serif;
    font-size: 16px;
    line-height: 1.625;
    color: #323232;
    overflow-y: scroll;
    -webkit-font-smoothing: subpixel-antialiased;

全体的に見ると、フォントはHelvetica, Univers, Arial を使用しているサイトが目立ちました。自社のオリジナルフォントを使用しているのは、NIKE(ナイキ)、marimekko(マリメッコ)。Webフォントは、BURBERRY(バーバリー)の、Proxima N W01と、melissa(メリッサ)の、utopia std subheadというAdobe Typekitのフォントでした。
ファッション系のサイトデザインは写真メインで比較的固い印象です。ブランドイメージがとても重要で、ビジュアルがメインになるよう、なるべくシンプルなフォントを使用しているのだと思います。

今回の試みは、ただの好奇心だったわけですが、
フォントファミリー以外にも、bodyタグのスタイルのつけ方も見ることができ、
とても楽しかったですね。

##参照サイト
FASHION PRESS
JDNレポート
週間ファッション情報

9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?