SlideShare uma empresa Scribd logo
1 de 100
Baixar para ler offline
第二回 プログラマ向けデザイン勉強会 March 16, 2013



はじめての欧文書体

伊藤庄平@9d
伊藤庄平@9d
株式会社シロクロというWeb制作会社でデザイナーを
やっています。また、世界中のタイプファウンドリーを
一覧できる「Typecache.com」というサイトのサーバ
サイドを担当しています。


http://www.4696.co.jp/
http://typography.cc/
http://typecache.com/
今日はおおまかに
欧文書体には色んな種類があるよ。
というお話ができればと思います。
はじめに
デザインにおいて書体の役割はとても重要で、
     書体の選択を間違えると…
こんな素敵な会社のWebサイトが
こんなことになってしまいます。。
ですので、少しでも多くの書体を知って、
     用途に応じた書体を
  使っていただければと思います。
目次


・欧文書体の種類
・文字の太さと字幅
・作られた時代や国
・書体が持つ雰囲気
・実践編
欧文書体の種類
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
セリフ書体




Aa Aa
  Didot LT Std Roman   Garamond Regular



文字の先端にセリフ(端にある小さな飾り)がついた書
体のことをセリフ書体と言います。ローマン体とも呼ば
れます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
サンセリフ書体




Aa Aa
 Univers Lt Std 55 Roman   Futura Std Medium




セリフがない書体のことをサンセリフ書体と言います。
国内ではゴシック体とも呼ばれます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
スクリプト書体




  Aa
   Linoscript Std Medium
                           Aa
                           !




手書きのストロークに基づいた書体をスクリプト書体と
言います。筆記体とも呼ばれます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
ブラックレター書体




Aa Aa
   Linotext Std Regular   Goundy Text MT Std Regular




図のような黒みが強い書体をブラックレター書体と言い
ます。海外ではこちらをゴシック体と呼びます。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
ディスプレイ書体




Ab AB
   prism medium   rosewood Std Regular




サインや看板などに用いるために作られた書体をディス
プレイ書体と言います。
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
スラブセリフ書体




Aa Aa
   Aachen Std Bold   Clarendon LT Std Roman




縦線と横線が同じくらいの太さの書体をスラブセリフ書
体と言います。
さらに。
それらの書体は細かく分類されます。
例えば、セリフ書体は、ベネチアンセリフ、オールド
スタイルセリフ、トランジショナルセリフ、モダンセ
リフなどに。サンセリフ書体は、グロテスク、ネオ・
グロテスク、ヒューマニスト、ジオメトリックなどに
分類されます。
なお、欧文書体の分類について厳密に知りたい場合はVox-ATypIの分類法か、
FontShopやLinotype社の分類法をご参照ください。
(そんなに覚えられない)
たくさん種類があるなぁ。
くらいでいいと思います。
文字の太さと字幅
欧文書体には、
ウェイト(太さ)とセット(字幅)の
   ファミリーがあります。
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
     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


                                     太い
※すべての書体に
ウェイト展開がある訳ではありません。
あとイタリック体があります。

Helvetica Neue LT Std 46 Light Italic
         Didot LT Std Italic
蛇足
こっちがイタリック体で、

Helvetica Neue LT Std 46 Light Italic

            こっちがオブリーク体。

  Helvetica LT Std Light Oblique
Helvetica
Helvetica
 オブリーク体は文字を斜めにしただけのもの。
 イタリック体は斜体用に調整されているもの。
(蛇足いらなかったかも)
ウェイトや字幅にバリエーションの
  あることが分かりました。
余談
箸休め的に流れにそった小話をします。
作られた時代や国
当たり前ですが、一つ一つの書体は、
     過去にどこかの国の
  誰かによって作られています。
例
trajan pro regular

古代ローマに建てられた「トラヤヌス帝の碑文」
の文字をもとに作られた書体です。TRAJAN
PROは1989年にCarol Twomblyによって制作
されました。
引用元:http://www.codex99.com/typography/images/ancient/trajan_inscr_lg.jpg
Adobe Garamond Pro Regular

16世紀にフランス人のClaude Garamondに
よって製造されました。なお、Garamondは各
社から様々なバリエーション(ギャラモン系、
ジャノン系)がリリースされています。
引用元:http://www.paper-leaf.com/blog/2009/09/free-friday-design-wallpaper-garamond/
Helvetica Regular
1957年、Neue Haas Groteskとして発売され
たものが原型で、Max MiedingerとEduard
Hoffmannによって発表されました。
※Helveticaはラテン語でスイスを意味します。
引用元:http://www.webdesignerdepot.com/2009/03/40-excellent-logos-created-with-helvetica/
Frutiger LT Std 55 Roman

1976年、シャルル・ド・ゴール国際空港(パ
リ)のサインシステム設計を依頼されたAdrian
Frutigerが制作しました。国内でもJR東日本や東
京メトロなど多くの場所で目にする書体です。
蛇足
「Neue」とか「LT」とか「Std」って何?
「Neue」は英語で「New」の意味。

             つまり
「Neue Helvetica」は「Helvetica」の
       改訂版ということ。
「LT」は「Linotype」のことで、
 フォントファンダリー名を示しています。

            MT=Monotype
              FF=FontFont
ITC=International Typeface Corporation

           などがあります。
「Std」は「Standard」のことで、
他に「Pro=Professional」などがあります。

 これは主に収録されている文字数の違いで
Proの方が文字数が多く収録されています。
書体には見た目の特徴以外にも
    制作時期や制作理由など
様々な背景があることが分かりました。
書体が持つ雰囲気
さて、ようやく見た目の話です。

       欧文書体は、
高級感や暖かみ、近代的イメージなど、
 様々な雰囲気を持ち合わせています。
例
高級感
trajan pro regular
 Didot LT Std Roman
Shelley Script LT Std Regular
インパクト
Bahhaus Std Heavy
  Giddyup Std Regular
Cooper Std Black
スマート
Akko Pro Regular
Helvetica Neue LT Std 25 Ultra Light
       ITC Kabel Std Book
やさしい
Neo Sans Pro Light
Avenir 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
まとめ
文字中心のページだと
印象は書体に大きく影響されます。

  ですので「書体を選ぶ」ことは
 重要なデザイン作業だといえます。
見た目で選ぶのもいいし、
お国柄や時代性を考慮してもいいし、
 知名度で選んでもいいと思います。
選択基準が増えたことで
  「書体を選ぶ」ことが
 楽しくなればと思います。
参考文献
参考文献
・小林 章『欧文書体―その背景と使い方』株式会社美術出版社
・小泉 均『タイポグラフィ・ハンドブック』研究社
・高岡昌生『欧文組版 組版の基礎とマナー』美術出版社
・組版工学研究会『欧文書体百花事典』朗文堂


引用
・「欧文書体の種類」で利用した画像は
  MyFonts(myfonts.com)と
  H&FJ(typography.com)から引用しております。
おわりに
過不足があったかと思いますが、
    以上になります。
もっと詳しく知りたい方は
          先の参考文献や
年2回刊行の文字デザイン専門誌『TYPOGRAPHY』、
フォント全般の総合情報サイト『フォントブログ』、
『Typecache』などを見ると楽しめると思います。
ありがとうございました。

Mais conteúdo relacionado

Mais procurados

伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス
Takashi Fujimoto
 

Mais procurados (20)

デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
20161122_How to start Recruiting Engineers_mercari_ishiguro
20161122_How to start Recruiting Engineers_mercari_ishiguro20161122_How to start Recruiting Engineers_mercari_ishiguro
20161122_How to start Recruiting Engineers_mercari_ishiguro
 
【出張ヒストリア2018】Caligula OverdoseでのUIデザインアプローチ
【出張ヒストリア2018】Caligula OverdoseでのUIデザインアプローチ【出張ヒストリア2018】Caligula OverdoseでのUIデザインアプローチ
【出張ヒストリア2018】Caligula OverdoseでのUIデザインアプローチ
 
9コマシナリオの使い方
9コマシナリオの使い方9コマシナリオの使い方
9コマシナリオの使い方
 
「DX完全に理解した」「DXわけがわからないよ」なユーザ企業の方へ
「DX完全に理解した」「DXわけがわからないよ」なユーザ企業の方へ「DX完全に理解した」「DXわけがわからないよ」なユーザ企業の方へ
「DX完全に理解した」「DXわけがわからないよ」なユーザ企業の方へ
 
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
【Unite Tokyo 2019】HDRPコワクナイ! HDRPで目指す小規模で高品質な映像制作
 
インタフェース完全に理解した
インタフェース完全に理解したインタフェース完全に理解した
インタフェース完全に理解した
 
フーリエ変換を用いたテクスチャ解像度推定とその応用
フーリエ変換を用いたテクスチャ解像度推定とその応用フーリエ変換を用いたテクスチャ解像度推定とその応用
フーリエ変換を用いたテクスチャ解像度推定とその応用
 
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
ドコモオープンイノベーションの取り組みと提供APIのIoT展開についてドコモオープンイノベーションの取り組みと提供APIのIoT展開について
ドコモオープンイノベーションの取り組みと提供APIのIoT展開について
 
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへUXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
 
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイントそれを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
 
【Unite Tokyo 2018】ユニティちゃんトゥーンシェーダー2.0使いこなしスペシャル ~こだわりの活用法を紹介します!~
【Unite Tokyo 2018】ユニティちゃんトゥーンシェーダー2.0使いこなしスペシャル ~こだわりの活用法を紹介します!~【Unite Tokyo 2018】ユニティちゃんトゥーンシェーダー2.0使いこなしスペシャル ~こだわりの活用法を紹介します!~
【Unite Tokyo 2018】ユニティちゃんトゥーンシェーダー2.0使いこなしスペシャル ~こだわりの活用法を紹介します!~
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
 
エスノグラフィック・デザインアプローチ
エスノグラフィック・デザインアプローチエスノグラフィック・デザインアプローチ
エスノグラフィック・デザインアプローチ
 
伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
 

Destaque (6)

コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
 
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
 
SEOに効くコンテンツの作り方 ver1.1
SEOに効くコンテンツの作り方 ver1.1SEOに効くコンテンツの作り方 ver1.1
SEOに効くコンテンツの作り方 ver1.1
 

はじめての欧文書体