Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
攻城狮眼中的字体和设计
Search
Cee
January 29, 2015
Design
3
370
攻城狮眼中的字体和设计
Cee
January 29, 2015
Tweet
Share
More Decks by Cee
See All by Cee
CryptoBay
cee
1
68
How to make a Touch Bar app
cee
0
120
How to make an incredible speech
cee
1
93
From an idea to a product
cee
1
250
「SwiftGG Show」第六期 - Swift Notification Center【100mango】
cee
0
270
「SwiftGG Show」第二期 - Something you don’t know on Mac OS X【Cee】
cee
1
200
關於排版.pdf
cee
1
400
「SwiftGG Show」第一期 - Xcode Tips & Tricks【星夜暮晨】
cee
1
520
What Knowledge Is Important to a Software Professional?
cee
1
170
Other Decks in Design
See All in Design
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
480
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
500
decksh object reference
ajstarks
2
1.3k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
harutaka Vision Deck
zenkigenforrecruit
0
200
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
300
株式会社バクタム 会社説明資料
bactum
0
300
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Done Done
chrislema
185
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
Why Our Code Smells
bkeepers
PRO
339
57k
KATA
mclloyd
32
14k
Building Adaptive Systems
keathley
43
2.7k
Designing for humans not robots
tammielis
253
25k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Transcript
攻城狮眼中的字体和设计 @Ceecirno 2015.01.29
关于字体
看 ‣ 浏览网页 ‣ 设计稿 ‣ 微博 ‣ 博客
用 ‣ 管理字体 ‣ 找字体 ‣ 浏览字体
学 ‣ 字体的形成、来由和用途 ‣ 字体、字型的知识 ‣ 选择字体 Times New Roman
的重心线(axis):从左上到右 下,符合阅读时的「视觉重力方向」;在造型上也有巴 洛克与新古典主义字体的风格痕迹。
做 ‣ 和设计师打交道 ‣ 实践:排版 Elements of Typographic Style:一本专门系统化整 理西方字型理论的专著。
做 ‣ 和设计师打交道 ‣ 实践:排版 ‣ 字本身的设计 宋体磨损效果模拟。 明度和亮度的考虑,有时甚至考虑渲染。
做 ‣ 和设计师打交道 ‣ 实践:排版 ‣ 字本身的设计 ‣ 字母之间的距离
做 ‣ 和设计师打交道 ‣ 实践:排版 ‣ 字本身的设计 ‣ 字母之间的距离 ‣
单字之间的距离 理想状况下,字距在 M/5,但是因为左右对齐的限制 比较多,所以理想范围可以扩大到 M/4 或者更宽。
做 ‣ 和设计师打交道 ‣ 实践:排版 ‣ 字本身的设计 ‣ 字母之间的距离 ‣
单字之间的距离 ‣ 每一行之间的距离
更多 ‣ Doodles ‣ And more… Google Doodles
关于设计
今天我们只谈「排版」
排版风格 ‣ 空格的使用 ‣ 标点相关 ‣ 段落 ‣ 对第三方内容的引用 (参考:https://github.com/sparanoid/chinese-copywriting-guidelines)
有研究顯示,打字的時候不喜歡在中文和英文之間加空格的人, 感情路都走得很辛苦,有七成的比例會在 34 歲的時候跟自己不 愛的人結婚,而其餘三成的人最後只能把遺產留給自己的貓。畢 竟愛情跟書寫都需要適時地留白。 — vinta/paranoid-auto-spacing
空格的使用 ‣ 中英文之间需要增加空格 ‣ 中文与数字之间需要增加空格 ‣ 数字与单位之间需要增加空格 ‣ 全角标点与其他字符之间不加空格 在
LeanCloud 上,數據存儲是圍繞 AVObject 進⾏行的。 在LeanCloud上,數據存儲是圍繞AVObject進⾏行的。 今天出去買菜花了 5000 元。 今天出去買菜花了5000元。 我家的寬帶有 1 Gbps,硬盤⼀一共有 10 TB。 我家的寬帶有 1Gbps,硬盤⼀一共有 10TB。 剛剛買了⼀一部 iPhone,好開⼼心! 剛剛買了⼀一部 iPhone ,好開⼼心!
标点相关 ‣ 不重复使用标点符号 ‣ 全角和半角 ‣ 数字使用半角 ‣ 英文大小写 德國隊竟然戰勝了巴⻄西隊!
德國隊竟然戰勝了巴⻄西隊!!!!!!!! 嗨!你知道嘛?今天前台的⼩小妹跟我說「喵」了哎! 嗨! 你知道嘛? 今天前台的⼩小妹跟我說 "喵" 了哎! 核磁共振成像(NMRI)是什麼原理? 核磁共振成像 (NMRI) 是什麼原理? 這件蛋糕只賣 1000 元。 這件蛋糕只賣 1000 元。 GitHub Github
段落 ‣ 段落间距 ‣ 段落开头
对第三方内容的引用 ‣ 部分引用 ‣ 全文引用
• http://blog.justfont.com/2013/05/popular-tyography-1/ • http://blog.justfont.com/2013/05/popular-typography-2/ • http://www.typeisbeautiful.com/2009/02/964/ • http://blog.justfont.com/page/8/ • http://open.leancloud.cn/copywriting-style-guide.html
参考
• http://blog.justfont.com/ • 《西文字体》 推荐阅读
The End