SlideShare a Scribd company logo
1 of 86
Download to read offline
1/85
word
and
image
嫕彿髦㜎㛀旝叄戹棧暚
彿髦勢姌鮪㜎㛀鳘躅
What are we talking about
when we talk about typography
2/85
word and image word is image image as word word-image
1 字与形 2 字是形 3 形即字 4 字形
3/85
word and image
1 字与形
Of all the achievements of
the human mind, the birth
of the alphabet is the most
momentous.
在人类思想的成就中,以字母之诞生最为惊天动地。
Frederic Goudy
弗雷德里克·高迪
*Frederic W. Goudy (1865Ⅹ1947) 曧銊豜叄鉢㛄㚧壎嶗㛄㚧斊鑇咲、
骼曧銊蹺訅醑䗮鲲艊叄鉢㛄㚧壎䯖酽羠㬬叄 122 潎、魳謖艊藥愥醮骼讜謖艊
Goudy Old Style 飨倀 Copperplate Gothic、1920Ⅹ1947 妘䄄䯖骼惔麇
賣昤䎑鯆鄐駡誒 (Lanston Monotype) 艊頯梮岄苳、
謾傿謖踵 Bertha䯖曧酽瀕戹叄墡、跏鳏鑇桹酽厸䯖謖踵 Frederic T. Goudy、
4/85
word and image
1 字与形
图形三角
熱靕 Scott McCloud 忞魳 Understanding Comics、
5/85
word and image
1 字与形
图形三角
熱靕 Scott McCloud 忞魳 Understanding Comics、
惉㝧  蹕嫮
鏖莏  蹕嫮 惉㝧  嶯躏
6/85
word and image
1 字与形
鮪銊蹺櫇墡陣悅惤艊翄嬁穼〔敜佮梽誤䄯〕跤䯖昤鈷蹉 · 郿錪㬖啔䒅甡
偔踽㓕馾鵙踃厸、
女
woman
鏖莏  蹕嫮 鏖莏  蹕嫮 惉㝧  蹕嫮 䰅跤旝䰇濱姪鏖莏  嶯躏
䰅餚旝䰇惉㝧  嶯躏
7/85
word and image
1 字与形
鮪銊蹺櫇墡陣悅惤艊翄嬁穼〔敜佮梽誤䄯〕跤䯖昤鈷蹉 · 郿錪㬖啔䒅甡
偔踽㓕馾鵙踃厸、
女
woman
鏖莏  蹕嫮 鏖莏  蹕嫮 㚶宎⺸鉝 䰅跤旝䰇濱姪鏖莏  嶯躏
䰅餚旝䰇惉㝧  嶯躏
8/85
word and image
1 字与形
女
woman
㚶宎⺸鉝 濱姪鏖莏  嶯躏
惉㝧  嶯躏
9/85
word and image
1 字与形
女
woman
㚶宎⺸鉝 濱姪鏖莏  嶯躏
惉㝧  嶯躏
10/85
word and image
1 字与形
女+子=
woman
㚶宎⺸鉝 濱姪鏖莏  嶯躏
惉㝧  嶯躏
11/85
word and image
1 字与形
女+子=
woman
㚶宎⺸鉝 濱姪鏖莏  嶯躏
惉㝧  嶯躏
做爱
12/85
word and image
1 字与形
女+子=
woman
㚶宎⺸鉝 濱姪鏖莏  嶯躏
惉㝧  嶯躏
怖谕
好
惉㝧  嶯躏
13/85
word and image
1 字与形
女+子=
woman + like = womanlike
㚶宎⺸鉝 濱姪鏖莏  嶯躏
惉㝧  嶯躏
怖谕
好
惉㝧  嶯躏
惉㝧  嶯躏
14/85
word and image
1 字与形
象形 指事 会意 形声 转注 假借
六书造字法
15/85
word and image
1 字与形
象形 指事 会意 形声 转注 假借
六书造字法
日 山 上 下 酒 功 趾 漠 考 老 来 麦
16/85
word is image
2 字是形
17/85
word is image
2 字是形
象形 指事 会意 形声 转注 假借
六书造字法
18/85
word is image
2 字是形
象形 指事 会意 形声 转注 假借
六书造字法
19/85
word is image
2 字是形
隶变
20/85
word is image
2 字是形
汉字的隶变
梪蹕熱靕魹啢賠〔烲䇇醮啢謓艊椨矇瀷㪏〕、
21/85
word is image
2 字是形
啢謓
22/85
word is image
2 字是形
啢謓 䇇霎
• 㫩鑨嗎霎囑賒
• 霎釀㬫姪黌寚
• 悎婮㬬叄絔懪
• 黌踵 䌄〓魯
• 㚸烢霎熴嫮尓
23/85
word is image
2 字是形
——我认为最重要的是骨头3 3
跟肉,还有空间分布。骨头
就是笔画的曲度和每一条笔
画分布在哪个位置……
曾国榕
* 桪蹺汎曧䇇嘄詬瑌 Justfont 艊跤旝叄鉢㛄㚧壎、
詬瑌斊鑇俋叧銊梮跀瀸趵謚頌嬔暀梪叧雳㛄㚧䯖梕䄄唻叄鉢㛄㚧嗴粷
蠻㢩䯖㫧鍖頌嬔鲷㰊㫧㜁㛄㚧蔠裮忞、瀸趵謚㫠螻詬瑌、鮪 Justfont
訅酽潎僨壉艊叄鉢曧鞯鲋暺梒鉢醮䧸鉢躐䄄艊㳟鬽、
24/85
word is image
2 字是形
25/85
word is image
2 字是形
26/85
word is image
2 字是形
27/85
word is image
2 字是形
Image © 㚾眓旝
28/85
word is image
2 字是形
hamburgerfonstivLucida Blackletter
Carolingian Minuscule 䯙則鈵楁啢釀鉢
29/85
word is image
2 字是形
约翰福音开场白
熱靕驅賣鄽 (Book of Kells)䯖粷鶜俋餚蹕霎䒛、
惛酾囑旝
In principio erat 
Verbum, et Verbum 
erat apud Deum, et 
Deus erat Verbum.
跤旝㛗旝
俒設桹㭠䯖  
㭠醮蜶讜鮪䯖  
道就是神、
餚旝㛗旝
In the beginning was 
the Word, and the 
Word was with God, 
and the Word was God.
30/85
word is image
2 字是形
hamburgerfonstivMVB Verdigris Big
Renaissance Roman 䯙旝頯侟蠻鈵䖂鉢
31/85
word is image
2 字是形
双语圣咏集
梪霎彾鲋 1642Ⅹ1643 妘䯖藥塒惛酾旝嶗熴旝䯖踵熴蹺艎謚鍖壽、
鮒嶁䇗 (Psalter) 曧敒嫚▕萒斊㡤銊㛝 (Psalms) 艊㛝䇗䯖貶鲱藥塒暀㜄 。
鮒鳏艊蝜㛓嶗鮒潣訵䯖嫮媀㪏踵靕羾䯖曧跫隊鳏佖㫧 蝜鶯牆誤艊㳛㒄旝梪、
呅髦侸羾棈哱躐鳏䇘墡鷹。釀鄽鳏嶗抴翍壎壽慘䯖羮旿倹雲䯖⺸䒅赗銊、
32/85
word is image
2 字是形
nn1
1
2
3
4
旝頯侟蠻頌艊則鈵楁啢釀鉢
詵飨酽觠釀呝䯖襹觠賛鍖蓪䯖霎釀䇏姪濱
旝頯侟蠻暚梕艊昦鈵䖂鉢
䰅 鄡䰇䈑㒄詆鎢䯖襹觠鄫鍖䂏䯖霎釀䇏姪䗮
33/85
word is image
2 字是形
o1
34/85
word is image
2 字是形
o1 2
35/85
word is image
2 字是形
x抽呱悯查书写的幻像x抽呱悯查x抽呱悯查
36/85
image as word
3 形即字
37/85
image as word
3 形即字
好 好
鏖莏  蹕嫮 惉㝧  蹕嫮 㚶宎⺸鉝
䇇呯
薶呯叄醮嫮艊唻襫
叄醮䖾楯 叄曧嫮
n n
霎熴
38/85
image as word
3 形即字
图拉真石刻文
鮪鈵䖂艊蹕惛莏槉 (Trajan Column) 醢艊蓴贖惛酾旝叄、
澑踵 E.M. Catich 鮪 1930Ⅹ1960 妘魍侟釀艊穼梪、
1
I2
I3
39/85
image as word
3 形即字
Romain du Roi
羾㣵曀鴛蠐跫醣魑。羾熴蹺蟨叧䅳鲋 1692 妘㛄㚧艊酽倧
叄鉢、㛄㚧跤㳕羮鑫裶頌跛哣艊鈫樴跀酛䯖槪宺菑㫓珆梕
䏣樴叄鉢 (Transitional) 艊㛤羠、
☞  Romain du Roi 艊䗮唻瀷嶗睏茻䏣樴嬁閼鑫 :
Pierre Simon Fournier (1712Ⅹ1768)䯖熴蹺䀇叄壎、
魍 慘曧飨骼僠炐噯謖艊 Fournier、骼䒫攝鑫砎壽
(Points) 㳝姪跀酛、
William Caslon (1692/93Ⅹ1766)䯖餚蹺叄鉢㛄㚧壎、
魍 慘曧飨骼僠炐噯謖艊 Caslon、
John Baskerville (1706Ⅹ1775)䯖餚蹺叄鉢㛄㚧壎、
魍 慘曧飨骼僠炐噯謖艊 Baskerville、
40/85
image as word
3 形即字
字 形
41/85
image as word
3 形即字
字 形
42/85
image as word
3 形即字
We cannot alter the essential shape of a
single letter without at the same time
destroying the familiar printed face of our
language, and thereby rendering it useless.
如果改变一个字母的基础形态,我们语言的印刷样貌就将
必然改变,那这个字母就没用了。
Jan Tschichold
扬·奇肖尔德
*Jan Tschichold (1902Ⅹ1974) 曧孭蹺叄鉢㛄㚧壎。霎豜㛄㚧壎嶗㛄㚧斊鑇咲、
骼鲋 1923 妘鎢駱粷魍踽躏㛄㚧艊䅅鬫䯖妛僨 魳謖艊〔昦叄鉢戹棧〕(Die Neue 
Typographie) 酽霎、謾跤篞砮恊繩䅵鑫晹 鄡叄鉢侳艊謾骼叄鉢蟢貙䯖妛鞏啂
䉯唻蠙穼䉳㛄㚧、㛫霎讜暚䒫漛薶襫飨醭讜叄誑。叄㳛棾婠襫㓉㓌嗃漛艊會熴、
1933 妘 3 桸㭺鄐贙苼跫俒墮恜咲䯖妘姌晑張㬏嬔緤佖、
躐謚骼㚪踵粷魍踽躏㛄㚧俒㫓発㫧䯖桪敒螻荁饅㔃㛀妛㡽羮 鄡鉢、鮪 1947Ⅹ
1949 妘踽慁㛄㚧 500 侸梪麟䥢霎豜䯖穼媀熕羮靧鞔、骼艊 酛 鄡鉢 Sabon 曧
啨桹艊镾侽讜暚悶咷 Linotype 嶗鯆鄐䀇戹梽跏倧跀酛艊叄鉢、
43/85
image as word
3 形即字
anqh䅄嫮
Counter
44/85
image as word
3 形即字
䅄嫮
Counter
45/85
image as word
3 形即字
46/85
image as word
3 形即字
耀 耀 耀 耀誖鉢跤旝釀熴 逫鉢跤旝釀熴 暀㛳烲叄釀熴 䋺㛳烲叄釀熴
㓄粀襫聶〔㜎䇦穼棧獸唻棧獸鉢艊嬁閼〕、
47/85
image as word
3 形即字
48/85
image as word
3 形即字
49/85
image as word
3 形即字
50/85
image as word
3 形即字
We cannot alter the essential shape of a
single letter without at the same time
destroying the familiar printed face of our
language, and thereby rendering it useless.
如果改变一个字母的基础形态,我们语言的印刷样貌就将
必然改变,那这个字母就没用了。
Jan Tschichold
扬·奇肖尔德
51/85
image as word
3 形即字
田扩呱悯查田扩呱悯查田扩呱悯查
52/85
word-image
4 字形
53/85
word-image
4 字形
Letters are things, not pictures
of things […] It’s clear that for any
letter there’s some sort of norm.
字母是东西,不是东西的图像……显而易见,
每一个字母都有它的某种规范。
Eric Gill
埃里克·吉尔
*Eric Gill (1882Ⅹ1940) 曧餚豜叄鉢㛄㚧壎。贖蓴鷹嶗䇦贖咲、
骼壎鞲 Edward Johnston䯒愛斣鰱㿐叄鉢 Johnston 艊㛄㚧鍎䯓彾踵叄鉢
㛄㚧壎、䅵澑躐侳㫤翽醣俋㳝蓴贖。犛䇦嶗䇦贖慘閔、骼艊魳謖叄鉢藥愥
Perpetua。Gill Sans 嶗 Joanna䯖謚鍎飨骼艊偔簍噯謖、魳桹〔㛀旝叄戹棧〕 
(An Essay on Typography)、
Gill敡犗彾屟䯖桪僨羠凗侳嵔䯖醮骼艊僜傼。跏跣梥彾妘偔簍嶗筯僨羠㫓屟饅跀、
54/85
word-image
4 字形
Letters are things, not pictures
of things […] It’s clear that for any
letter there’s some sort of norm.
字母是东西,不是东西的图像……显而易见,
每一个字母都有它的某种规范。
Eric Gill
埃里克·吉尔
*Eric Gill (1882Ⅹ1940) 曧餚豜叄鉢㛄㚧壎。贖蓴鷹嶗䇦贖咲、
骼壎鞲 Edward Johnston䯒愛斣鰱㿐叄鉢 Johnston 艊㛄㚧鍎䯓彾踵叄鉢
㛄㚧壎、䅵澑躐侳㫤翽醣俋㳝蓴贖。犛䇦嶗䇦贖慘閔、骼艊魳謖叄鉢藥愥
Perpetua。Gill Sans 嶗 Joanna䯖謚鍎飨骼艊偔簍噯謖、魳桹〔㛀旝叄戹棧〕 
(An Essay on Typography)、
Gill敡犗彾屟䯖桪僨羠凗侳嵔䯖醮骼艊僜傼。跏跣梥彾妘偔簍嶗筯僨羠㫓屟饅跀、
55/85
word-image
4 字形
Massimo Vignelli
Massimo Vignelli (1931Ⅹ2014) 曧嶯俋濕䯗銊豜㛄㚧壎䯖
粷魍踽躏䏣樴艊鱧呯㬉䆠鍎、
Image © John Madere
56/85
word-image
4 字形
Design should be
semantically correct,
syntactically consistent, and
pragmatically understandable.
设计应该是语义上正确、语法上连贯,以及在实际应用中
容易理解的。
Massimo Vignelli
1
2
3
57/85
word-image
4 字形
什么鬼?
58/85
word-image
4 字形
Semantics
㛳躏
59/85
word-image
4 字形
+ =
= 做爱
Syntactics
㛳熴
60/85
word-image
4 字形
好Pragmatics
㛳羮
61/85
word-image
4 字形
Letters are things, not pictures
of things […] It’s clear that for any
letter there’s some sort of norm.
字母是东西,不是东西的图像……显而易见,
每一个字母都有它的某种规范。
Eric Gill
埃里克·吉尔
62/85
word-image
4 字形
Letters are things, not pictures
of things […] It’s clear that for any
letter there’s some sort of norm.pictorial
图形的规范。
63/85
word-image
4 字形
Typography is writing with
prefabricated letters.
文字排印是在用预先制好的字母书写。
Gerrit Noordzij
伽利特·诺基
*Gerrit Noordzij (1931Ⅹ) 曧駻賣豜叄鉢㛄㚧壎。霎豜㛄㚧壎嶗㛄㚧慘咲、
鮪慘踵霎豜㛄㚧壎墡慘鑫酽瀇暚䄄謚䯖鮪 1960Ⅹ1990 妘鲋駻賣犦窛艎咲
銊䅳(Royal Academy of Art at the Hague, KABK)斊戦叄鉢嶗妕䉳㛄㚧、
1982 妘熱穼〔觠艊觠陝〕(The Stroke of the Pen)䯖薶襫骼鮪叄鉢㛄㚧
跤艊絔㛀鉢跀、醮 酛鰓貙熴醭讜䯖Noordzij 艊鉢跀啔叄鉢飨#麉愐艊霎釀¥
踵▕蕬陝鰓、㫥倧鉢跀彾踵嫕魍叄鉢㛄㚧跤抴過㚧誽叄㳛 (font weight 
interpolation) 艊▕蕬、
踵 嫿唻旝叄㛄㚧桹㠧篻艊鳏䯖犦窛艎咲銊䅳㛄襫 Gerrit Noordzij 値䯖
骼曧訅酽瀕嬱値鍎、Erik Spiekermann 嶗 Tobias Frere-Jones 㰊桪嬱値、
64/85
word-image
4 字形
There are no images in digital
fonts, only instructions which are
dependent on, or interpreted by,
rendering devices.
在数码字体里没有形,只有电脑指令。这些指令
依赖于渲染器,或者说是渲染器在解读它们。
Nick Shinn
*Nick Shinn (1952Ⅹ) 曧餚蹺䯗鎢愽俋豜叄鉢㛄㚧壎、
叄鉢慘閔桪鮪 FontShop 僨綈、1999 妘㛄襫靕墰艊叄鉢駡誒 ShinnType、
65/85
word-image
4 字形
↑ 㫤囑霎釀 → 暚䄄
a a a aa aBlackletter Garalde Transitional / Modern Grotesk Neo-Grotesk Humanist
66/85
word-image
4 字形
semantically correct1
legible1
语义上正确的 可读的
syntactically consistent
语法上连贯的
purposeful
目的明确的
pragmatically
understandable
driven by
consensus
实际应用中容易理解的 符合大众共识的
2
3
2
3
DESIGN TYPOGRAPHY
67/85
word-image
4 字形
Snow Forest
68/85
word-image
4 字形
The author of this
message feels very
happy.
㫥賒惡峗艊慘鍎䉯夠婩宆、
69/85
word-image
4 字形
南鷹 南鷹暀梪㭠㣵駡筧  䗮㬫駡㣵叄鉢 Hiragino Kaku Gothic
70/85
word-image
4 字形
What should typography be?  √
旝叄戹棧姉㛫曧鳘躅樭艊䯩
71/85
word-image
4 字形
What should typography be?  √
What is typography about?
旝叄戹棧姉㛫曧鳘躅樭艊䯩
旝叄戹棧曧饅鲋鳘躅艊䯩
72/85
Image © Marcin Wichary
73/85
word-image
4 字形
TYPOGRAPHYU+0074 U+0079 U+0070 U+006F U+0067 U+0072 U+0061 U+0070 U+0068 U+0079
74/85
word-image
4 字形
#㩻鬣¥䯒Software䯓鮪俍╙旝䯒Telugu䯓跤艊 蛵
75/85
word-image
4 字形
Typography
is about
image-making 造形
76/85
word-image
4 字形
Typography
is about
legible
image-making 造形
可读的
77/85
word-image
4 字形
Typography
is about
legible
purposeful
image-making 造形
可读的
目的明确的
78/85
word-image
4 字形
Typography
is about
legible
purposeful
consensus-driven
image-making. 造形
可读的
目的明确的
符合大众共识的
79/85
word-image
4 字形
Beatrice Warde
碧亚翠丝 · 沃德
*Beatrice Warde (1900Ⅹ1969) 曧銊豜叄嫮叧鍎。㛄㚧壎。霎熴咲。
釆㪝嶗㛄㚧斊鑇咲、
偝鴛酽噉暚張 粷熱唻霎熴艊牰驟蠻㢩䯖俋叧瀸趵謚鎢駱 ATF 叄鉢駡
誒 (American Type Founders)、1925 妘呝彾 The Fleuron 酽旝䯖唻
Garamond 跀叄鉢艊證諍㡽瑧㫧 鑫獿贖艊蔠裮䯖妛飨翇屟誼謖 Paul 
Beaujon 僨 、鎢駱鯆鄐駡誒謚偔屟㦳麋柟䉃䯖暚鳏晹醭謁嵚、
Warde 桭魳謖艊慘閔曧斞旝䇗〔烐杫䗮閳椊〕(The Crystal Goblet)䯖
謾跤鞏啂旝叄戹棧姉嫕䆡嫮䯖㚯瀕酓忞棧艊廟咷、詆桹啢旝〔㫥曧酽䄄
棧獸忞〕(This is a Printing Office)䯖踵嫕暚鯆鄐駡誒艊叄鉢樭媑鍖慘、
澑旝⺖㛗彾侸蹺㛳㔃䯖桖⺖䀇彾㿫穼慂鮪銊蹺敤姛熱穼蛼艊䃸訥、
80/85
word-image
4 字形
字 形This is a message. This is a message.
This is a message.
This is a message.
This is a message.
thisisamessage.
81/85
word-image
4 字形
“Less is more.”
Ludwig Mies van der Rohe
㣵孭醎樴 · 哣昤 · 欽孭鈵
82/85
word-image
4 字形
“Less is more bore.”
Ludwig Mies van der Rohe
㣵孭醎樴 · 哣昤 · 欽孭鈵
83/85
word-image
4 字形
It’s almost impossible to
look and read at the same
time: they are different
actions.
同时观看和阅读是不可能的——它们是不同的行为。
Gerard Unger
*Gerard Unger (1942Ⅹ) 曧駻賣豜叄鉢㛄㚧壎嶗妕䉳㛄㚧壎、
鮪 1967 妘俋叧瀸趵謚㫧駱 Total Design䯖㩸靧 Enschedé 霎嗙墡慘䯖謚彾
踵靕羾㛄㚧壎、骼踽㒄踵熱穼窹㛄㚧呺羮廟旝叄鉢䯖妛鮪侸忞俋叧斊戦旝叄
㛄㚧、魳謖叄鉢藥愥 Gulliver 嶗 Coranto、
魍 魳慘踵〔鮪鄴䄕㜁暚〕(While You Are Reading)䯖餚㛗鮪 2006 妘羾
Mark Batty Publisher 熱穼、
吉拉德·安葛
84/85
word-image
4 字形
When we talk about typography,
we are talking about what?
当我们在讨论文字排印时,我们
在讨论的是什么?
85/85
word-image
4 字形
When we talk about typography,
we are talking about legible,
purposeful, consensus-driven
word-images that interact with
and thus flavor meaning.
当我们在讨论文字排印时,我们
在讨论的是可读的、目的明确的、
符合大众共识的字形4 4
。它与意义
互动,进而赋意义以风味。
86/85
谢谢。
㜳煟磢
Peiran Tan
雲茊䎑俋叧  㓉㓌 㫊㛄㚧跀
UW School of Design, VCD

More Related Content

Featured

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 

Word and Image / 字与形

  • 2. 2/85 word and image word is image image as word word-image 1 字与形 2 字是形 3 形即字 4 字形
  • 3. 3/85 word and image 1 字与形 Of all the achievements of the human mind, the birth of the alphabet is the most momentous. 在人类思想的成就中,以字母之诞生最为惊天动地。 Frederic Goudy 弗雷德里克·高迪 *Frederic W. Goudy (1865Ⅹ1947) 曧銊豜叄鉢㛄㚧壎嶗㛄㚧斊鑇咲、 骼曧銊蹺訅醑䗮鲲艊叄鉢㛄㚧壎䯖酽羠㬬叄 122 潎、魳謖艊藥愥醮骼讜謖艊 Goudy Old Style 飨倀 Copperplate Gothic、1920Ⅹ1947 妘䄄䯖骼惔麇 賣昤䎑鯆鄐駡誒 (Lanston Monotype) 艊頯梮岄苳、 謾傿謖踵 Bertha䯖曧酽瀕戹叄墡、跏鳏鑇桹酽厸䯖謖踵 Frederic T. Goudy、
  • 4. 4/85 word and image 1 字与形 图形三角 熱靕 Scott McCloud 忞魳 Understanding Comics、
  • 5. 5/85 word and image 1 字与形 图形三角 熱靕 Scott McCloud 忞魳 Understanding Comics、 惉㝧  蹕嫮 鏖莏  蹕嫮 惉㝧  嶯躏
  • 6. 6/85 word and image 1 字与形 鮪銊蹺櫇墡陣悅惤艊翄嬁穼〔敜佮梽誤䄯〕跤䯖昤鈷蹉 · 郿錪㬖啔䒅甡 偔踽㓕馾鵙踃厸、 女 woman 鏖莏  蹕嫮 鏖莏  蹕嫮 惉㝧  蹕嫮 䰅跤旝䰇濱姪鏖莏  嶯躏 䰅餚旝䰇惉㝧  嶯躏
  • 7. 7/85 word and image 1 字与形 鮪銊蹺櫇墡陣悅惤艊翄嬁穼〔敜佮梽誤䄯〕跤䯖昤鈷蹉 · 郿錪㬖啔䒅甡 偔踽㓕馾鵙踃厸、 女 woman 鏖莏  蹕嫮 鏖莏  蹕嫮 㚶宎⺸鉝 䰅跤旝䰇濱姪鏖莏  嶯躏 䰅餚旝䰇惉㝧  嶯躏
  • 8. 8/85 word and image 1 字与形 女 woman 㚶宎⺸鉝 濱姪鏖莏  嶯躏 惉㝧  嶯躏
  • 9. 9/85 word and image 1 字与形 女 woman 㚶宎⺸鉝 濱姪鏖莏  嶯躏 惉㝧  嶯躏
  • 10. 10/85 word and image 1 字与形 女+子= woman 㚶宎⺸鉝 濱姪鏖莏  嶯躏 惉㝧  嶯躏
  • 11. 11/85 word and image 1 字与形 女+子= woman 㚶宎⺸鉝 濱姪鏖莏  嶯躏 惉㝧  嶯躏 做爱
  • 12. 12/85 word and image 1 字与形 女+子= woman 㚶宎⺸鉝 濱姪鏖莏  嶯躏 惉㝧  嶯躏 怖谕 好 惉㝧  嶯躏
  • 13. 13/85 word and image 1 字与形 女+子= woman + like = womanlike 㚶宎⺸鉝 濱姪鏖莏  嶯躏 惉㝧  嶯躏 怖谕 好 惉㝧  嶯躏 惉㝧  嶯躏
  • 14. 14/85 word and image 1 字与形 象形 指事 会意 形声 转注 假借 六书造字法
  • 15. 15/85 word and image 1 字与形 象形 指事 会意 形声 转注 假借 六书造字法 日 山 上 下 酒 功 趾 漠 考 老 来 麦
  • 17. 17/85 word is image 2 字是形 象形 指事 会意 形声 转注 假借 六书造字法
  • 18. 18/85 word is image 2 字是形 象形 指事 会意 形声 转注 假借 六书造字法
  • 19. 19/85 word is image 2 字是形 隶变
  • 20. 20/85 word is image 2 字是形 汉字的隶变 梪蹕熱靕魹啢賠〔烲䇇醮啢謓艊椨矇瀷㪏〕、
  • 21. 21/85 word is image 2 字是形 啢謓
  • 22. 22/85 word is image 2 字是形 啢謓 䇇霎 • 㫩鑨嗎霎囑賒 • 霎釀㬫姪黌寚 • 悎婮㬬叄絔懪 • 黌踵 䌄〓魯 • 㚸烢霎熴嫮尓
  • 23. 23/85 word is image 2 字是形 ——我认为最重要的是骨头3 3 跟肉,还有空间分布。骨头 就是笔画的曲度和每一条笔 画分布在哪个位置…… 曾国榕 * 桪蹺汎曧䇇嘄詬瑌 Justfont 艊跤旝叄鉢㛄㚧壎、 詬瑌斊鑇俋叧銊梮跀瀸趵謚頌嬔暀梪叧雳㛄㚧䯖梕䄄唻叄鉢㛄㚧嗴粷 蠻㢩䯖㫧鍖頌嬔鲷㰊㫧㜁㛄㚧蔠裮忞、瀸趵謚㫠螻詬瑌、鮪 Justfont 訅酽潎僨壉艊叄鉢曧鞯鲋暺梒鉢醮䧸鉢躐䄄艊㳟鬽、
  • 27. 27/85 word is image 2 字是形 Image © 㚾眓旝
  • 28. 28/85 word is image 2 字是形 hamburgerfonstivLucida Blackletter Carolingian Minuscule 䯙則鈵楁啢釀鉢
  • 29. 29/85 word is image 2 字是形 约翰福音开场白 熱靕驅賣鄽 (Book of Kells)䯖粷鶜俋餚蹕霎䒛、 惛酾囑旝 In principio erat  Verbum, et Verbum  erat apud Deum, et  Deus erat Verbum. 跤旝㛗旝 俒設桹㭠䯖   㭠醮蜶讜鮪䯖   道就是神、 餚旝㛗旝 In the beginning was  the Word, and the  Word was with God,  and the Word was God.
  • 30. 30/85 word is image 2 字是形 hamburgerfonstivMVB Verdigris Big Renaissance Roman 䯙旝頯侟蠻鈵䖂鉢
  • 31. 31/85 word is image 2 字是形 双语圣咏集 梪霎彾鲋 1642Ⅹ1643 妘䯖藥塒惛酾旝嶗熴旝䯖踵熴蹺艎謚鍖壽、 鮒嶁䇗 (Psalter) 曧敒嫚▕萒斊㡤銊㛝 (Psalms) 艊㛝䇗䯖貶鲱藥塒暀㜄 。 鮒鳏艊蝜㛓嶗鮒潣訵䯖嫮媀㪏踵靕羾䯖曧跫隊鳏佖㫧 蝜鶯牆誤艊㳛㒄旝梪、 呅髦侸羾棈哱躐鳏䇘墡鷹。釀鄽鳏嶗抴翍壎壽慘䯖羮旿倹雲䯖⺸䒅赗銊、
  • 32. 32/85 word is image 2 字是形 nn1 1 2 3 4 旝頯侟蠻頌艊則鈵楁啢釀鉢 詵飨酽觠釀呝䯖襹觠賛鍖蓪䯖霎釀䇏姪濱 旝頯侟蠻暚梕艊昦鈵䖂鉢 䰅 鄡䰇䈑㒄詆鎢䯖襹觠鄫鍖䂏䯖霎釀䇏姪䗮
  • 33. 33/85 word is image 2 字是形 o1
  • 34. 34/85 word is image 2 字是形 o1 2
  • 35. 35/85 word is image 2 字是形 x抽呱悯查书写的幻像x抽呱悯查x抽呱悯查
  • 37. 37/85 image as word 3 形即字 好 好 鏖莏  蹕嫮 惉㝧  蹕嫮 㚶宎⺸鉝 䇇呯 薶呯叄醮嫮艊唻襫 叄醮䖾楯 叄曧嫮 n n 霎熴
  • 38. 38/85 image as word 3 形即字 图拉真石刻文 鮪鈵䖂艊蹕惛莏槉 (Trajan Column) 醢艊蓴贖惛酾旝叄、 澑踵 E.M. Catich 鮪 1930Ⅹ1960 妘魍侟釀艊穼梪、 1 I2 I3
  • 39. 39/85 image as word 3 形即字 Romain du Roi 羾㣵曀鴛蠐跫醣魑。羾熴蹺蟨叧䅳鲋 1692 妘㛄㚧艊酽倧 叄鉢、㛄㚧跤㳕羮鑫裶頌跛哣艊鈫樴跀酛䯖槪宺菑㫓珆梕 䏣樴叄鉢 (Transitional) 艊㛤羠、 ☞  Romain du Roi 艊䗮唻瀷嶗睏茻䏣樴嬁閼鑫 : Pierre Simon Fournier (1712Ⅹ1768)䯖熴蹺䀇叄壎、 魍 慘曧飨骼僠炐噯謖艊 Fournier、骼䒫攝鑫砎壽 (Points) 㳝姪跀酛、 William Caslon (1692/93Ⅹ1766)䯖餚蹺叄鉢㛄㚧壎、 魍 慘曧飨骼僠炐噯謖艊 Caslon、 John Baskerville (1706Ⅹ1775)䯖餚蹺叄鉢㛄㚧壎、 魍 慘曧飨骼僠炐噯謖艊 Baskerville、
  • 40. 40/85 image as word 3 形即字 字 形
  • 41. 41/85 image as word 3 形即字 字 形
  • 42. 42/85 image as word 3 形即字 We cannot alter the essential shape of a single letter without at the same time destroying the familiar printed face of our language, and thereby rendering it useless. 如果改变一个字母的基础形态,我们语言的印刷样貌就将 必然改变,那这个字母就没用了。 Jan Tschichold 扬·奇肖尔德 *Jan Tschichold (1902Ⅹ1974) 曧孭蹺叄鉢㛄㚧壎。霎豜㛄㚧壎嶗㛄㚧斊鑇咲、 骼鲋 1923 妘鎢駱粷魍踽躏㛄㚧艊䅅鬫䯖妛僨 魳謖艊〔昦叄鉢戹棧〕(Die Neue  Typographie) 酽霎、謾跤篞砮恊繩䅵鑫晹 鄡叄鉢侳艊謾骼叄鉢蟢貙䯖妛鞏啂 䉯唻蠙穼䉳㛄㚧、㛫霎讜暚䒫漛薶襫飨醭讜叄誑。叄㳛棾婠襫㓉㓌嗃漛艊會熴、 1933 妘 3 桸㭺鄐贙苼跫俒墮恜咲䯖妘姌晑張㬏嬔緤佖、 躐謚骼㚪踵粷魍踽躏㛄㚧俒㫓発㫧䯖桪敒螻荁饅㔃㛀妛㡽羮 鄡鉢、鮪 1947Ⅹ 1949 妘踽慁㛄㚧 500 侸梪麟䥢霎豜䯖穼媀熕羮靧鞔、骼艊 酛 鄡鉢 Sabon 曧 啨桹艊镾侽讜暚悶咷 Linotype 嶗鯆鄐䀇戹梽跏倧跀酛艊叄鉢、
  • 43. 43/85 image as word 3 形即字 anqh䅄嫮 Counter
  • 44. 44/85 image as word 3 形即字 䅄嫮 Counter
  • 46. 46/85 image as word 3 形即字 耀 耀 耀 耀誖鉢跤旝釀熴 逫鉢跤旝釀熴 暀㛳烲叄釀熴 䋺㛳烲叄釀熴 㓄粀襫聶〔㜎䇦穼棧獸唻棧獸鉢艊嬁閼〕、
  • 50. 50/85 image as word 3 形即字 We cannot alter the essential shape of a single letter without at the same time destroying the familiar printed face of our language, and thereby rendering it useless. 如果改变一个字母的基础形态,我们语言的印刷样貌就将 必然改变,那这个字母就没用了。 Jan Tschichold 扬·奇肖尔德
  • 51. 51/85 image as word 3 形即字 田扩呱悯查田扩呱悯查田扩呱悯查
  • 53. 53/85 word-image 4 字形 Letters are things, not pictures of things […] It’s clear that for any letter there’s some sort of norm. 字母是东西,不是东西的图像……显而易见, 每一个字母都有它的某种规范。 Eric Gill 埃里克·吉尔 *Eric Gill (1882Ⅹ1940) 曧餚豜叄鉢㛄㚧壎。贖蓴鷹嶗䇦贖咲、 骼壎鞲 Edward Johnston䯒愛斣鰱㿐叄鉢 Johnston 艊㛄㚧鍎䯓彾踵叄鉢 㛄㚧壎、䅵澑躐侳㫤翽醣俋㳝蓴贖。犛䇦嶗䇦贖慘閔、骼艊魳謖叄鉢藥愥 Perpetua。Gill Sans 嶗 Joanna䯖謚鍎飨骼艊偔簍噯謖、魳桹〔㛀旝叄戹棧〕  (An Essay on Typography)、 Gill敡犗彾屟䯖桪僨羠凗侳嵔䯖醮骼艊僜傼。跏跣梥彾妘偔簍嶗筯僨羠㫓屟饅跀、
  • 54. 54/85 word-image 4 字形 Letters are things, not pictures of things […] It’s clear that for any letter there’s some sort of norm. 字母是东西,不是东西的图像……显而易见, 每一个字母都有它的某种规范。 Eric Gill 埃里克·吉尔 *Eric Gill (1882Ⅹ1940) 曧餚豜叄鉢㛄㚧壎。贖蓴鷹嶗䇦贖咲、 骼壎鞲 Edward Johnston䯒愛斣鰱㿐叄鉢 Johnston 艊㛄㚧鍎䯓彾踵叄鉢 㛄㚧壎、䅵澑躐侳㫤翽醣俋㳝蓴贖。犛䇦嶗䇦贖慘閔、骼艊魳謖叄鉢藥愥 Perpetua。Gill Sans 嶗 Joanna䯖謚鍎飨骼艊偔簍噯謖、魳桹〔㛀旝叄戹棧〕  (An Essay on Typography)、 Gill敡犗彾屟䯖桪僨羠凗侳嵔䯖醮骼艊僜傼。跏跣梥彾妘偔簍嶗筯僨羠㫓屟饅跀、
  • 55. 55/85 word-image 4 字形 Massimo Vignelli Massimo Vignelli (1931Ⅹ2014) 曧嶯俋濕䯗銊豜㛄㚧壎䯖 粷魍踽躏䏣樴艊鱧呯㬉䆠鍎、 Image © John Madere
  • 56. 56/85 word-image 4 字形 Design should be semantically correct, syntactically consistent, and pragmatically understandable. 设计应该是语义上正确、语法上连贯,以及在实际应用中 容易理解的。 Massimo Vignelli 1 2 3
  • 59. 59/85 word-image 4 字形 + = = 做爱 Syntactics 㛳熴
  • 61. 61/85 word-image 4 字形 Letters are things, not pictures of things […] It’s clear that for any letter there’s some sort of norm. 字母是东西,不是东西的图像……显而易见, 每一个字母都有它的某种规范。 Eric Gill 埃里克·吉尔
  • 62. 62/85 word-image 4 字形 Letters are things, not pictures of things […] It’s clear that for any letter there’s some sort of norm.pictorial 图形的规范。
  • 63. 63/85 word-image 4 字形 Typography is writing with prefabricated letters. 文字排印是在用预先制好的字母书写。 Gerrit Noordzij 伽利特·诺基 *Gerrit Noordzij (1931Ⅹ) 曧駻賣豜叄鉢㛄㚧壎。霎豜㛄㚧壎嶗㛄㚧慘咲、 鮪慘踵霎豜㛄㚧壎墡慘鑫酽瀇暚䄄謚䯖鮪 1960Ⅹ1990 妘鲋駻賣犦窛艎咲 銊䅳(Royal Academy of Art at the Hague, KABK)斊戦叄鉢嶗妕䉳㛄㚧、 1982 妘熱穼〔觠艊觠陝〕(The Stroke of the Pen)䯖薶襫骼鮪叄鉢㛄㚧 跤艊絔㛀鉢跀、醮 酛鰓貙熴醭讜䯖Noordzij 艊鉢跀啔叄鉢飨#麉愐艊霎釀¥ 踵▕蕬陝鰓、㫥倧鉢跀彾踵嫕魍叄鉢㛄㚧跤抴過㚧誽叄㳛 (font weight  interpolation) 艊▕蕬、 踵 嫿唻旝叄㛄㚧桹㠧篻艊鳏䯖犦窛艎咲銊䅳㛄襫 Gerrit Noordzij 値䯖 骼曧訅酽瀕嬱値鍎、Erik Spiekermann 嶗 Tobias Frere-Jones 㰊桪嬱値、
  • 64. 64/85 word-image 4 字形 There are no images in digital fonts, only instructions which are dependent on, or interpreted by, rendering devices. 在数码字体里没有形,只有电脑指令。这些指令 依赖于渲染器,或者说是渲染器在解读它们。 Nick Shinn *Nick Shinn (1952Ⅹ) 曧餚蹺䯗鎢愽俋豜叄鉢㛄㚧壎、 叄鉢慘閔桪鮪 FontShop 僨綈、1999 妘㛄襫靕墰艊叄鉢駡誒 ShinnType、
  • 65. 65/85 word-image 4 字形 ↑ 㫤囑霎釀 → 暚䄄 a a a aa aBlackletter Garalde Transitional / Modern Grotesk Neo-Grotesk Humanist
  • 66. 66/85 word-image 4 字形 semantically correct1 legible1 语义上正确的 可读的 syntactically consistent 语法上连贯的 purposeful 目的明确的 pragmatically understandable driven by consensus 实际应用中容易理解的 符合大众共识的 2 3 2 3 DESIGN TYPOGRAPHY
  • 68. 68/85 word-image 4 字形 The author of this message feels very happy. 㫥賒惡峗艊慘鍎䉯夠婩宆、
  • 69. 69/85 word-image 4 字形 南鷹 南鷹暀梪㭠㣵駡筧  䗮㬫駡㣵叄鉢 Hiragino Kaku Gothic
  • 70. 70/85 word-image 4 字形 What should typography be?  √ 旝叄戹棧姉㛫曧鳘躅樭艊䯩
  • 71. 71/85 word-image 4 字形 What should typography be?  √ What is typography about? 旝叄戹棧姉㛫曧鳘躅樭艊䯩 旝叄戹棧曧饅鲋鳘躅艊䯩
  • 73. 73/85 word-image 4 字形 TYPOGRAPHYU+0074 U+0079 U+0070 U+006F U+0067 U+0072 U+0061 U+0070 U+0068 U+0079
  • 79. 79/85 word-image 4 字形 Beatrice Warde 碧亚翠丝 · 沃德 *Beatrice Warde (1900Ⅹ1969) 曧銊豜叄嫮叧鍎。㛄㚧壎。霎熴咲。 釆㪝嶗㛄㚧斊鑇咲、 偝鴛酽噉暚張 粷熱唻霎熴艊牰驟蠻㢩䯖俋叧瀸趵謚鎢駱 ATF 叄鉢駡 誒 (American Type Founders)、1925 妘呝彾 The Fleuron 酽旝䯖唻 Garamond 跀叄鉢艊證諍㡽瑧㫧 鑫獿贖艊蔠裮䯖妛飨翇屟誼謖 Paul  Beaujon 僨 、鎢駱鯆鄐駡誒謚偔屟㦳麋柟䉃䯖暚鳏晹醭謁嵚、 Warde 桭魳謖艊慘閔曧斞旝䇗〔烐杫䗮閳椊〕(The Crystal Goblet)䯖 謾跤鞏啂旝叄戹棧姉嫕䆡嫮䯖㚯瀕酓忞棧艊廟咷、詆桹啢旝〔㫥曧酽䄄 棧獸忞〕(This is a Printing Office)䯖踵嫕暚鯆鄐駡誒艊叄鉢樭媑鍖慘、 澑旝⺖㛗彾侸蹺㛳㔃䯖桖⺖䀇彾㿫穼慂鮪銊蹺敤姛熱穼蛼艊䃸訥、
  • 80. 80/85 word-image 4 字形 字 形This is a message. This is a message. This is a message. This is a message. This is a message. thisisamessage.
  • 81. 81/85 word-image 4 字形 “Less is more.” Ludwig Mies van der Rohe 㣵孭醎樴 · 哣昤 · 欽孭鈵
  • 82. 82/85 word-image 4 字形 “Less is more bore.” Ludwig Mies van der Rohe 㣵孭醎樴 · 哣昤 · 欽孭鈵
  • 83. 83/85 word-image 4 字形 It’s almost impossible to look and read at the same time: they are different actions. 同时观看和阅读是不可能的——它们是不同的行为。 Gerard Unger *Gerard Unger (1942Ⅹ) 曧駻賣豜叄鉢㛄㚧壎嶗妕䉳㛄㚧壎、 鮪 1967 妘俋叧瀸趵謚㫧駱 Total Design䯖㩸靧 Enschedé 霎嗙墡慘䯖謚彾 踵靕羾㛄㚧壎、骼踽㒄踵熱穼窹㛄㚧呺羮廟旝叄鉢䯖妛鮪侸忞俋叧斊戦旝叄 㛄㚧、魳謖叄鉢藥愥 Gulliver 嶗 Coranto、 魍 魳慘踵〔鮪鄴䄕㜁暚〕(While You Are Reading)䯖餚㛗鮪 2006 妘羾 Mark Batty Publisher 熱穼、 吉拉德·安葛
  • 84. 84/85 word-image 4 字形 When we talk about typography, we are talking about what? 当我们在讨论文字排印时,我们 在讨论的是什么?
  • 85. 85/85 word-image 4 字形 When we talk about typography, we are talking about legible, purposeful, consensus-driven word-images that interact with and thus flavor meaning. 当我们在讨论文字排印时,我们 在讨论的是可读的、目的明确的、 符合大众共识的字形4 4 。它与意义 互动,进而赋意义以风味。