0
第二回 プログラマ向けデザイン勉強会 March 16, 2013はじめての欧文書体伊藤庄平@9d
伊藤庄平@9d株式会社シロクロというWeb制作会社でデザイナーをやっています。また、世界中のタイプファウンドリーを一覧できる「Typecache.com」というサイトのサーバサイドを担当しています。http://www.4696.co.jp/h...
今日はおおまかに欧文書体には色んな種類があるよ。というお話ができればと思います。
はじめに
デザインにおいて書体の役割はとても重要で、     書体の選択を間違えると…
こんな素敵な会社のWebサイトが
こんなことになってしまいます。。
ですので、少しでも多くの書体を知って、     用途に応じた書体を  使っていただければと思います。
目次・欧文書体の種類・文字の太さと字幅・作られた時代や国・書体が持つ雰囲気・実践編
欧文書体の種類
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体              Aa Aa               サンセリフ書体       ...
セリフ書体Aa Aa  Didot LT Std Roman   Garamond Regular文字の先端にセリフ(端にある小さな飾り)がついた書体のことをセリフ書体と言います。ローマン体とも呼ばれます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体              Aa Aa               サンセリフ書体       ...
サンセリフ書体Aa Aa Univers Lt Std 55 Roman   Futura Std Mediumセリフがない書体のことをサンセリフ書体と言います。国内ではゴシック体とも呼ばれます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体              Aa Aa               サンセリフ書体       ...
スクリプト書体  Aa   Linoscript Std Medium                           Aa                           !手書きのストロークに基づいた書体をスクリプト書体と言います。...
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体              Aa Aa               サンセリフ書体       ...
ブラックレター書体Aa Aa   Linotext Std Regular   Goundy Text MT Std Regular図のような黒みが強い書体をブラックレター書体と言います。海外ではこちらをゴシック体と呼びます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体              Aa Aa               サンセリフ書体       ...
ディスプレイ書体Ab AB   prism medium   rosewood Std Regularサインや看板などに用いるために作られた書体をディスプレイ書体と言います。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体              Aa Aa               サンセリフ書体       ...
スラブセリフ書体Aa Aa   Aachen Std Bold   Clarendon LT Std Roman縦線と横線が同じくらいの太さの書体をスラブセリフ書体と言います。
さらに。それらの書体は細かく分類されます。
例えば、セリフ書体は、ベネチアンセリフ、オールドスタイルセリフ、トランジショナルセリフ、モダンセリフなどに。サンセリフ書体は、グロテスク、ネオ・グロテスク、ヒューマニスト、ジオメトリックなどに分類されます。なお、欧文書体の分類について厳密に知り...
(そんなに覚えられない)
たくさん種類があるなぁ。くらいでいいと思います。
文字の太さと字幅
欧文書体には、ウェイト(太さ)とセット(字幅)の   ファミリーがあります。
Helvetica Neue LT Std 27 Ultra Light Condensed        ウェイトが細くて字幅が狭い。Helvetica Neue LT Std 93 Black Extended        ウェイトが太く...
細い     Ultra Light Condensed   Ultra Light   Ultra Light Extended     Thin Condensed          Thin          Thin Extended ...
※すべての書体にウェイト展開がある訳ではありません。
あとイタリック体があります。Helvetica Neue LT Std 46 Light Italic         Didot LT Std Italic
蛇足
こっちがイタリック体で、Helvetica Neue LT Std 46 Light Italic            こっちがオブリーク体。  Helvetica LT Std Light Oblique
HelveticaHelvetica オブリーク体は文字を斜めにしただけのもの。 イタリック体は斜体用に調整されているもの。
(蛇足いらなかったかも)
ウェイトや字幅にバリエーションの  あることが分かりました。
余談箸休め的に流れにそった小話をします。
作られた時代や国
当たり前ですが、一つ一つの書体は、     過去にどこかの国の  誰かによって作られています。
例
trajan pro regular古代ローマに建てられた「トラヤヌス帝の碑文」の文字をもとに作られた書体です。TRAJANPROは1989年にCarol Twomblyによって制作されました。
引用元:http://www.codex99.com/typography/images/ancient/trajan_inscr_lg.jpg
Adobe Garamond Pro Regular16世紀にフランス人のClaude Garamondによって製造されました。なお、Garamondは各社から様々なバリエーション(ギャラモン系、ジャノン系)がリリースされています。
引用元:http://www.paper-leaf.com/blog/2009/09/free-friday-design-wallpaper-garamond/
Helvetica Regular1957年、Neue Haas Groteskとして発売されたものが原型で、Max MiedingerとEduardHoffmannによって発表されました。※Helveticaはラテン語でスイスを意味します。
引用元:http://www.webdesignerdepot.com/2009/03/40-excellent-logos-created-with-helvetica/
Frutiger LT Std 55 Roman1976年、シャルル・ド・ゴール国際空港(パリ)のサインシステム設計を依頼されたAdrianFrutigerが制作しました。国内でもJR東日本や東京メトロなど多くの場所で目にする書体です。
蛇足
「Neue」とか「LT」とか「Std」って何?
「Neue」は英語で「New」の意味。             つまり「Neue Helvetica」は「Helvetica」の       改訂版ということ。
「LT」は「Linotype」のことで、 フォントファンダリー名を示しています。            MT=Monotype              FF=FontFontITC=International Typeface Corpora...
「Std」は「Standard」のことで、他に「Pro=Professional」などがあります。 これは主に収録されている文字数の違いでProの方が文字数が多く収録されています。
書体には見た目の特徴以外にも    制作時期や制作理由など様々な背景があることが分かりました。
書体が持つ雰囲気
さて、ようやく見た目の話です。       欧文書体は、高級感や暖かみ、近代的イメージなど、 様々な雰囲気を持ち合わせています。
例
高級感
trajan pro regular Didot LT Std RomanShelley Script LT Std Regular
インパクト
Bahhaus Std Heavy  Giddyup Std RegularCooper Std Black
スマート
Akko Pro RegularHelvetica Neue LT Std 25 Ultra Light       ITC Kabel Std Book
やさしい
Neo Sans Pro LightAvenir Next Pro Thin  Myriad Pro Light
ただし、    文字の大きさ、詰め具合などで      雰囲気は変わりますので   (あと個人の感覚もありますし)あくまでも一例ということでご参照ください。   そのため、この資料では特に文字詰めをしていません。
余談箸休め的に流れにそった小話をします。
実践編
Webサービスで使いやすそうな書体を考えてみる。
最初はHelvetica Neue(Bootstrapデフォルト状態)
その次から  DIN Next LT Pro    Didot LT Std  Clarendon LT Std   Prism Medium  Avenir Next Pro の順番で適用してみます。
Helvetica Neue(Bootstrapデフォルト状態)
DIN Next LT Pro
Didot LT Std
Clarendon LT Std
Prism Medium
Avenir Next Pro
 いかがでしょうか。(見出しならディスプレイ書体ありかも)
蛇足
有料Webフォントを 使うのも良いと思います。
メリット・有名フォントも定番フォントも使える・他のサイトと被りにくくなる・お金を出して利用するから愛着もわく
例えばFF DINなら買取型でページビューが50万/月以下なら$55。
購入ガイドはフォントブログに詳しい記事があります。http://blog.petitboys.com/archives/myfonts-webfonts-guide.html
まとめ
文字中心のページだと印象は書体に大きく影響されます。  ですので「書体を選ぶ」ことは 重要なデザイン作業だといえます。
見た目で選ぶのもいいし、お国柄や時代性を考慮してもいいし、 知名度で選んでもいいと思います。
選択基準が増えたことで  「書体を選ぶ」ことが 楽しくなればと思います。
参考文献
参考文献・小林 章『欧文書体―その背景と使い方』株式会社美術出版社・小泉 均『タイポグラフィ・ハンドブック』研究社・高岡昌生『欧文組版 組版の基礎とマナー』美術出版社・組版工学研究会『欧文書体百花事典』朗文堂引用・「欧文書体の種類」で利用した画...
おわりに
過不足があったかと思いますが、    以上になります。
もっと詳しく知りたい方は          先の参考文献や年2回刊行の文字デザイン専門誌『TYPOGRAPHY』、フォント全般の総合情報サイト『フォントブログ』、『Typecache』などを見ると楽しめると思います。
ありがとうございました。
はじめての欧文書体
はじめての欧文書体
はじめての欧文書体
はじめての欧文書体
はじめての欧文書体
はじめての欧文書体
はじめての欧文書体
Upcoming SlideShare
Loading in...5
×

はじめての欧文書体

23,430

Published on

Published in: Design
0 Comments
80 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,430
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
160
Comments
0
Likes
80
Embeds 0
No embeds

No notes for slide

Transcript of "はじめての欧文書体"

  1. 1. 第二回 プログラマ向けデザイン勉強会 March 16, 2013はじめての欧文書体伊藤庄平@9d
  2. 2. 伊藤庄平@9d株式会社シロクロというWeb制作会社でデザイナーをやっています。また、世界中のタイプファウンドリーを一覧できる「Typecache.com」というサイトのサーバサイドを担当しています。http://www.4696.co.jp/http://typography.cc/http://typecache.com/
  3. 3. 今日はおおまかに欧文書体には色んな種類があるよ。というお話ができればと思います。
  4. 4. はじめに
  5. 5. デザインにおいて書体の役割はとても重要で、 書体の選択を間違えると…
  6. 6. こんな素敵な会社のWebサイトが
  7. 7. こんなことになってしまいます。。
  8. 8. ですので、少しでも多くの書体を知って、 用途に応じた書体を 使っていただければと思います。
  9. 9. 目次・欧文書体の種類・文字の太さと字幅・作られた時代や国・書体が持つ雰囲気・実践編
  10. 10. 欧文書体の種類
  11. 11. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体Aaブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  12. 12. セリフ書体Aa Aa Didot LT Std Roman Garamond Regular文字の先端にセリフ(端にある小さな飾り)がついた書体のことをセリフ書体と言います。ローマン体とも呼ばれます。
  13. 13. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体Aaブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  14. 14. サンセリフ書体Aa Aa Univers Lt Std 55 Roman Futura Std Mediumセリフがない書体のことをサンセリフ書体と言います。国内ではゴシック体とも呼ばれます。
  15. 15. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体Aaブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  16. 16. スクリプト書体 Aa Linoscript Std Medium Aa !手書きのストロークに基づいた書体をスクリプト書体と言います。筆記体とも呼ばれます。
  17. 17. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体Aaブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  18. 18. ブラックレター書体Aa Aa Linotext Std Regular Goundy Text MT Std Regular図のような黒みが強い書体をブラックレター書体と言います。海外ではこちらをゴシック体と呼びます。
  19. 19. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体Aaブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  20. 20. ディスプレイ書体Ab AB prism medium rosewood Std Regularサインや看板などに用いるために作られた書体をディスプレイ書体と言います。
  21. 21. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書体、ディスプレイ書体、スラブセリフ書体などの種類があります。Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体Aaブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  22. 22. スラブセリフ書体Aa Aa Aachen Std Bold Clarendon LT Std Roman縦線と横線が同じくらいの太さの書体をスラブセリフ書体と言います。
  23. 23. さらに。それらの書体は細かく分類されます。
  24. 24. 例えば、セリフ書体は、ベネチアンセリフ、オールドスタイルセリフ、トランジショナルセリフ、モダンセリフなどに。サンセリフ書体は、グロテスク、ネオ・グロテスク、ヒューマニスト、ジオメトリックなどに分類されます。なお、欧文書体の分類について厳密に知りたい場合はVox-ATypIの分類法か、FontShopやLinotype社の分類法をご参照ください。
  25. 25. (そんなに覚えられない)
  26. 26. たくさん種類があるなぁ。くらいでいいと思います。
  27. 27. 文字の太さと字幅
  28. 28. 欧文書体には、ウェイト(太さ)とセット(字幅)の ファミリーがあります。
  29. 29. Helvetica Neue LT Std 27 Ultra Light Condensed ウェイトが細くて字幅が狭い。Helvetica Neue LT Std 93 Black Extended ウェイトが太くて字幅が広い。
  30. 30. 細い Ultra Light Condensed Ultra Light Ultra Light Extended Thin Condensed Thin Thin Extended Light Condensed Light Light Extended Roman Condensed Roman Roman Extended狭い 広い Medium Condensed Medium Medium Extended Bold Condensed Bold Bold Extended Heavy Condensed Heavy Heavy Extended Black Condensed Black Black Extended 太い
  31. 31. ※すべての書体にウェイト展開がある訳ではありません。
  32. 32. あとイタリック体があります。Helvetica Neue LT Std 46 Light Italic Didot LT Std Italic
  33. 33. 蛇足
  34. 34. こっちがイタリック体で、Helvetica Neue LT Std 46 Light Italic こっちがオブリーク体。 Helvetica LT Std Light Oblique
  35. 35. HelveticaHelvetica オブリーク体は文字を斜めにしただけのもの。 イタリック体は斜体用に調整されているもの。
  36. 36. (蛇足いらなかったかも)
  37. 37. ウェイトや字幅にバリエーションの  あることが分かりました。
  38. 38. 余談箸休め的に流れにそった小話をします。
  39. 39. 作られた時代や国
  40. 40. 当たり前ですが、一つ一つの書体は、 過去にどこかの国の 誰かによって作られています。
  41. 41.
  42. 42. trajan pro regular古代ローマに建てられた「トラヤヌス帝の碑文」の文字をもとに作られた書体です。TRAJANPROは1989年にCarol Twomblyによって制作されました。
  43. 43. 引用元:http://www.codex99.com/typography/images/ancient/trajan_inscr_lg.jpg
  44. 44. Adobe Garamond Pro Regular16世紀にフランス人のClaude Garamondによって製造されました。なお、Garamondは各社から様々なバリエーション(ギャラモン系、ジャノン系)がリリースされています。
  45. 45. 引用元:http://www.paper-leaf.com/blog/2009/09/free-friday-design-wallpaper-garamond/
  46. 46. Helvetica Regular1957年、Neue Haas Groteskとして発売されたものが原型で、Max MiedingerとEduardHoffmannによって発表されました。※Helveticaはラテン語でスイスを意味します。
  47. 47. 引用元:http://www.webdesignerdepot.com/2009/03/40-excellent-logos-created-with-helvetica/
  48. 48. Frutiger LT Std 55 Roman1976年、シャルル・ド・ゴール国際空港(パリ)のサインシステム設計を依頼されたAdrianFrutigerが制作しました。国内でもJR東日本や東京メトロなど多くの場所で目にする書体です。
  49. 49. 蛇足
  50. 50. 「Neue」とか「LT」とか「Std」って何?
  51. 51. 「Neue」は英語で「New」の意味。 つまり「Neue Helvetica」は「Helvetica」の 改訂版ということ。
  52. 52. 「LT」は「Linotype」のことで、 フォントファンダリー名を示しています。 MT=Monotype FF=FontFontITC=International Typeface Corporation などがあります。
  53. 53. 「Std」は「Standard」のことで、他に「Pro=Professional」などがあります。 これは主に収録されている文字数の違いでProの方が文字数が多く収録されています。
  54. 54. 書体には見た目の特徴以外にも 制作時期や制作理由など様々な背景があることが分かりました。
  55. 55. 書体が持つ雰囲気
  56. 56. さて、ようやく見た目の話です。 欧文書体は、高級感や暖かみ、近代的イメージなど、 様々な雰囲気を持ち合わせています。
  57. 57.
  58. 58. 高級感
  59. 59. trajan pro regular Didot LT Std RomanShelley Script LT Std Regular
  60. 60. インパクト
  61. 61. Bahhaus Std Heavy Giddyup Std RegularCooper Std Black
  62. 62. スマート
  63. 63. Akko Pro RegularHelvetica Neue LT Std 25 Ultra Light ITC Kabel Std Book
  64. 64. やさしい
  65. 65. Neo Sans Pro LightAvenir Next Pro Thin Myriad Pro Light
  66. 66. ただし、 文字の大きさ、詰め具合などで 雰囲気は変わりますので (あと個人の感覚もありますし)あくまでも一例ということでご参照ください。 そのため、この資料では特に文字詰めをしていません。
  67. 67. 余談箸休め的に流れにそった小話をします。
  68. 68. 実践編
  69. 69. Webサービスで使いやすそうな書体を考えてみる。
  70. 70. 最初はHelvetica Neue(Bootstrapデフォルト状態)
  71. 71. その次から DIN Next LT Pro Didot LT Std Clarendon LT Std Prism Medium Avenir Next Pro の順番で適用してみます。
  72. 72. Helvetica Neue(Bootstrapデフォルト状態)
  73. 73. DIN Next LT Pro
  74. 74. Didot LT Std
  75. 75. Clarendon LT Std
  76. 76. Prism Medium
  77. 77. Avenir Next Pro
  78. 78.  いかがでしょうか。(見出しならディスプレイ書体ありかも)
  79. 79. 蛇足
  80. 80. 有料Webフォントを 使うのも良いと思います。
  81. 81. メリット・有名フォントも定番フォントも使える・他のサイトと被りにくくなる・お金を出して利用するから愛着もわく
  82. 82. 例えばFF DINなら買取型でページビューが50万/月以下なら$55。
  83. 83. 購入ガイドはフォントブログに詳しい記事があります。http://blog.petitboys.com/archives/myfonts-webfonts-guide.html
  84. 84. まとめ
  85. 85. 文字中心のページだと印象は書体に大きく影響されます。 ですので「書体を選ぶ」ことは 重要なデザイン作業だといえます。
  86. 86. 見た目で選ぶのもいいし、お国柄や時代性を考慮してもいいし、 知名度で選んでもいいと思います。
  87. 87. 選択基準が増えたことで 「書体を選ぶ」ことが 楽しくなればと思います。
  88. 88. 参考文献
  89. 89. 参考文献・小林 章『欧文書体―その背景と使い方』株式会社美術出版社・小泉 均『タイポグラフィ・ハンドブック』研究社・高岡昌生『欧文組版 組版の基礎とマナー』美術出版社・組版工学研究会『欧文書体百花事典』朗文堂引用・「欧文書体の種類」で利用した画像は  MyFonts(myfonts.com)と  H&FJ(typography.com)から引用しております。
  90. 90. おわりに
  91. 91. 過不足があったかと思いますが、 以上になります。
  92. 92. もっと詳しく知りたい方は 先の参考文献や年2回刊行の文字デザイン専門誌『TYPOGRAPHY』、フォント全般の総合情報サイト『フォントブログ』、『Typecache』などを見ると楽しめると思います。
  93. 93. ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×