Webデザイナーのためのタイポグラフィ入門2

Typography : A Manual of Design Copyright (C) Akio Yonekura
タイポグラフィ
Typography:
A Manual of Design
Vol.02
Akio Yonekura

1.　欧文書体の基礎
2.　サンセリフ体
3.　21世紀のサンセリフ体
4.　UIデザインのタイポグラフィ/ Webフォント

欧文書体の基礎

n
Ln
Ce
A
O
i
U
Q
N
部位の名称
セリフ
ステムバードットテール
カウンターアクシスヘアラインストローク

83
Univers
73
Univers
53
Univers
63
Univers
75
Univers
55
Univers
45
Univers
35
Univers
65
Univers
76
Univers
56
Univers
46
Univers
36
Univers
66
Univers
57
Univers
47
Univers
37
Univers
67
Univers
58
Univers
48
Univers
38
Univers
68
Univers
ファミリー
Thin
Light
Roman
(Reguler/Medium)
Bold
Heavy
Black
Extended Basic
Italic/
Oblique Condensed
Condensed
Oblique

サンセリフ体

Sans Serif
サンセリフ体
サンセリフ体　Sans Serif
セリフ（Serif）のない書体。
1920年代以降、バウハウスやロシア構造主義など伝統的な枠組にとらわれない
芸術運動が広まった（モダニズム）。
タイポグラフィでも伝統的なセリフ体から、中性的なサンセリフ体が使われる様になった。

サンセリフ体
モダニズム
20世紀におこった近代主義としての芸術運動。
小説、演劇、美術、音楽、建築などの分野において展開された。
19世紀までの伝統的な様式を排する理念を持つ。
Le Corbusier Villa Savoye
Pablo Picasso Les_Demoiselles_d'Avignon
1920's 〜　モダニズム 1980's〜　ポストモダン 2000〜

サンセリフ体
スイス・スタイル
1950年代から1960年代にスイスで発展したデザインスタイル
モダニズムを継承し、合理的・機能的な要素配置を取る
数理的なグリッドに基づいた非対称な構成サンセリフ体の使用が特徴
Neue grafik Emil Ruder Armin Hofmann

サンセリフ体
スイスのグラフィックデザイナー
「スイス・スタイル」の代表的なデザイナー。
タイポグラフィを素材として活用し、グリッド(格子)を
活用するグリッドシステムを確立した。
ヨゼフ・ミューラー = ブロックマン
Josef Muller-Brockmann 1914 - 1996
KeyPerson

サンセリフ体
サンセリフ体　Sans Serif　初期
1896年ドイツのベルトルド活字鋳造所で制作された活字書体
サンセリフの中でも力強いストロークが特長で、格調の高さを感じさせる
Helveticaの原型とも言われる
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Akzidenz Grotesk

サンセリフ体
Braun:Dieter Rams Josef Müller-Brockmann
Akzidentz-Grotesk

サンセリフ体
サンセリフ体　Sans Serif　後期
1957年スイスのハース活字鋳造所で、マックス・ミーティンガーを中心に作られたサン・セリフ体。
無機質で中立的。世界で最も使われている人気書体。
Helvetica

サンセリフ体
American ApparelLufthansa
Helvetica

サンセリフ体
Helvetica film
2007年公開されたドキュメンタリー映画。監督はゲイリー・ハストウィット。
Helveticaの誕生秘話、欧米の街並みで使用されている例、
著名なデザイナーのHelveticaに対する意見がまとめられている。
http://www.hustwit.com/category/helvetica/
“ 2007年にApple社のデザインチームからの依頼で
Helveticaを社内上映したジョナサン・アイブと
Helveticaについて議論した
”

サンセリフ体
1957年にアドリアン・フルティガーがデザインしたサンセリフ体。
15世紀のニコラ・ジェンソンがデザインした有機的な書体に影響を受けて
多言語での使用を目的とした書体、アセンダーとディセンダーの高さが同じ
Univers

サンセリフ体
Deutsche Bank
Univers

サンセリフ体
Deutsche Industrienorm（German Industrial Standard）、ドイツ工業規格用書体。
ドイツの工業製品の型番や高速道路などで使われている。
DIN

サンセリフ体
adidas uniqlo
DIN

2000年代のサンセリフ

aenUnivers
Helvetica
Akzidendz-Grotesk
DIN
aenaen
aen
サンセリフ体
サンセリフ体の違い

Akkurat - 2004
タイプフェイス・デザイナーはLaurenz Brunner。
2004にスイスのタイプファウンドリー Lineto から発売した書体。
Akkurat

Akkurat - 2004
nestbankpension

Replica - 2008
スイスのデザインファーム Norm がデザイン。
2008年にスイスのタイプファウンドリー Lineto からリリース。

Replica - 2008
アルドノア・ゼロ Mesa de Acción

Maison Neue - 2012
タイプフェイス・デザイナーはTimo Gaessner。
2012にドイツのタイプファウンドリー Milieu Grotesque から発売した書体。
Maison Neue

Maison Neue - 2012
Gary Hustwit DAZED MAGAZINE

UIデザインのタイポグラフィ

iOS / Mac OSX
AppleのiOS7 / MacOS X YosemiteからHelveticaが採用。
Apple iOS7 Apple Mac OS X Yosemite

Apple Watch
Apple Watch から Apple社が独自に開発した『San Francisco』を採用。
iOSやMacOSもHelveticaからの移行が予想されている。
Apple Watch

Helvetica
Univers Akzidenz-Grotesk
DIN
abceghRG
abceghRGabceghRG
abceghRG
San Francisco

Android - Material Design
Google I/O 2014で発表されたGoogleのデザインガイドライン。
Androidアプリをはじめ、Webサイトも移行を進めている。

Android - Material Design
ABCDEFGHIJKLMN
abcdefghijklmnopq
あいうえおかきくけこ
Noto Sans Japanese
Roboto
美しい日本語

Webフォント

https://www.google.com/fonts/specimen/Roboto
Webフォント
Webフォントの使用例
ABCDEFGHIJKLMN
abcdefghijklmnopq
Robot
Nexus 6

https://www.google.com/fonts/specimen/Open+Sans
Webフォント
ABCDEFGHIJKLMN
abcdefghijklmnopq
OpenSans
ALDNOAH.ZERO

https://www.google.com/fonts/specimen/Lato
Webフォント
ABCDEFGHIJKLMN
abcdefghijklmnopq
Lato
Visually

https://www.google.com/fonts/specimen/Quattrocento+Sans
Webフォント
ABCDEFGHIJKLMN
abcdefghijklmnopq
Quattrocento Sans
Peek Calendar

https://typekit.com/fonts/brandon-grotesque
Webフォント
ABCDEFGHIJKLMN
abcdefghijklmnopq
BrandonGrotesque
InVison

参考文献
- 組版工学研究会『欧文書体百花事典』朗文堂（発行年：2003）
- ゲイリー・ハストウィット『ヘルベチカ～世界を魅了する書体～』角川エンタテインメント（発行年：2008）
- THINK IT 連載：タイポグラフィを学ぶ第3回世界中で愛される書体、ヘルベチカとは http://thinkit.co.jp/article/727/1
- iOSヒューマンインターフェイスガイドライン
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html
- Material design - Google design guidelines http://www.google.com/design/

Webデザイナーのためのタイポグラフィ入門2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from Akio Yonekura

More from Akio Yonekura (6)

Webデザイナーのためのタイポグラフィ入門2