WEB

font-familyを考え直す2015

WEB制作においてOSに影響されてしまうフォントですが、なるべくなら統一したいのが人心。今回El Captainの登場で新しくフォントが追加さたのでとりあえずおさらいです。

- 株式会社ハーティブレーン 【 技術者ブログ 】

867 Weekly Views
219,716 Total Views

ハーティブレーン(うぇ部)

スマホでアクセス
スマホでアクセス

WEB制作においてOSに影響されてしまうフォントですが、なるべくなら統一したいのが人心。今回El Captainの登場で新しくフォントが追加さたのでとりあえずおさらいです。
追加されたのは「クレー、筑紫A丸ゴシック、筑紫B丸ゴシック、游明朝体+36ポかな、ヒラギノ角ゴ(W0〜W9)」で、ヒラギノ角ゴは前からありましたが、W0〜W9までウェイトが今回さらに追加されています。最近細いフォントが流行っているのでありがたいことです。

日本語 ゴシック体

一般的に使われているのはこのゴシック体じゃないでしょうか?
たまに英語と日本語のフォントを切り替えている人がいますが、私は好きじゃないので同じにしています。
一般的にはヒラギノ角ゴシックをメインに使ったフォントファミリーが有名かと思います。

ヒラギノ角ゴシック(旧)

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

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

ヒラギノ角ゴシック(新)

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

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

新しく追加されたヒラギノフォントは指定方法が変わって「”Hiragino Sans”, “ヒラギノ角ゴシック”」となっています。これでW0〜W9までのウェイトのフォントが使えます。今までどおりW3とW6だけでいいのであれば新しく指定する必要はありません。

ちょっと変わって游書体のゴシックをメインに使ったフォントファミリーを使われているサイトもちらほら見かけます。游書体はOS X MavericksとWindows 8.1から標準インストールされています。ヒラギノに比べてもう少しかな文字が小さく、より日本語っぽい感じでしょうか。

游書体 游ゴシック

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

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

日本語 丸ゴシック体

当サイトでも現時点で採用しています。ヒラギノ丸ゴシックのフォントがなければヒラギノ角ゴシックが表示されます。あれば丸ゴシックで表示するって感じです。

ヒラギノ丸ゴシック

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック", Osaka, sans-serif;

今回新しくEl Captainで追加された筑紫丸ゴシック。とても日本語っぽい書体です。日本語ようなので当たり前ですが、かな文字に特徴が見られます。

筑紫丸Aゴシック

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: "TsukuARdGothic-Regular","Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック", Osaka, sans-serif;

筑紫丸Bゴシックは筑紫丸Aゴシックに比べてより、かな文字がオールド書体になっています。

筑紫丸Bゴシック

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: "TsukuBRdGothic-Regular","Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック", Osaka, sans-serif;

日本語 明朝体

日本語のオシャレなサイトでよく見られる明朝体。ヒラギノ明朝の指定方法です。

ヒラギノ明朝体

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: "Hiragino Mincho ProN","ヒラギノ明朝 ProN W3","HG明朝E","MS P明朝","MS 明朝",serif;

游書体 游明朝体の指定方法です。古いOS用にはヒラギノ明朝体を指定してます。

游書体 游明朝体

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: YuMincho,"游明朝","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;

游明朝体+36ポかなを追加。

游書体 游明朝体 + 游明朝体+36ポかな

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: "YuMin_36pKn-Medium",YuMincho,"游明朝","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;

英語 ゴシック体

Arial

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Arial,sans-serif;

Arial Black

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Arial Black,sans-serif;

Impact

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Impact,sans-serif;

Trebuchet MS

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Trebuchet MS,sans-serif;

Verdana

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Verdana,sans-serif;

英語 セリフ書体(明朝体)

Courier

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Courier,sans-serif;

Courier New

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Courier New,sans-serif;

Georgia

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Georgia,sans-serif;

Times New Roman

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Times New Roman,sans-serif;

英語 手書き風

Comic Sans MS

  1. No set Font Weight
  2. Set Font Weight 100
  3. Set Font Weight 200
  4. Set Font Weight 300
  5. Set Font Weight 400
  6. Set Font Weight 500
  7. Set Font Weight 600
  8. Set Font Weight 700
  9. Set Font Weight 800
  10. Set Font Weight 900

font-family: Comic Sans MS,sans-serif;

有名サイトのfant-family

Apple

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: 'Apple TP', 'Helvetica Neue', Helvetica, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', Arial, Verdana, sans-serif;

Apple TPという独自のWEBフォントが使用されています。

amazon

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

Microsoft

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;

Wikipedia

  1. フォントWeightは指定してません。
  2. フォントWeight 100 を指定してます。
  3. フォントWeight 200 を指定してます。
  4. フォントWeight 300 を指定してます。
  5. フォントWeight 400 を指定してます。
  6. フォントWeight 500 を指定してます。
  7. フォントWeight 600 を指定してます。
  8. フォントWeight 700 を指定してます。
  9. フォントWeight 800 を指定してます。
  10. フォントWeight 900 を指定してます。

font-family: sans-serif;

WEBフォントを利用したくない人のためのfont-familyまとめでした。
今まで何となくで過ごしていたためスッキリしました。

結局、何を使えばいいかは「最適なfont-familyを考える2016」をご覧ください。

生活・暮らし
不動産
WEB
デザイン