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
360
攻城狮眼中的字体和设计
Cee
January 29, 2015
Tweet
Share
More Decks by Cee
See All by Cee
CryptoBay
cee
1
64
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
240
「SwiftGG Show」第六期 - Swift Notification Center【100mango】
cee
0
260
「SwiftGG Show」第二期 - Something you don’t know on Mac OS X【Cee】
cee
1
190
關於排版.pdf
cee
1
390
「SwiftGG Show」第一期 - Xcode Tips & Tricks【星夜暮晨】
cee
1
510
What Knowledge Is Important to a Software Professional?
cee
1
160
Other Decks in Design
See All in Design
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
470
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
ポートフォリオ_webデザイナー
nami_webdesigner
0
110
私とデザインの10年
iflection
0
160
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Storyboard Honey
rocioparronrubio
0
280
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
The Spectacular Lies of Maps
axbom
PRO
0
110
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
720
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
AI動画生成ガチャ紹介
piyo7
1
130
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
What's in a price? How to price your products and services
michaelherold
246
12k
Being A Developer After 40
akosma
90
590k
Adopting Sorbet at Scale
ufuk
77
9.5k
Speed Design
sergeychernyshev
32
1k
Balancing Empowerment & Direction
lara
1
440
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Automating Front-end Workflow
addyosmani
1370
200k
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