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
330
攻城狮眼中的字体和设计
Cee
January 29, 2015
Tweet
Share
More Decks by Cee
See All by Cee
CryptoBay
cee
1
58
How to make a Touch Bar app
cee
0
110
How to make an incredible speech
cee
1
91
From an idea to a product
cee
1
230
「SwiftGG Show」第六期 - Swift Notification Center【100mango】
cee
0
240
「SwiftGG Show」第二期 - Something you don’t know on Mac OS X【Cee】
cee
1
180
關於排版.pdf
cee
1
370
「SwiftGG Show」第一期 - Xcode Tips & Tricks【星夜暮晨】
cee
1
480
What Knowledge Is Important to a Software Professional?
cee
1
150
Other Decks in Design
See All in Design
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
640
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
portfolio2025_kanakoohata
kanako106
0
670
発表資料テンプレート / My slide template
thatblue
0
200
Personal Story Sequence - Vendetta(WIP)
elrns88
0
410
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
840
LLMによるRAG評価用合成テストデータの生成
licux
6
680
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
560
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
Side Projects
sachag
452
42k
Designing for Performance
lara
604
68k
Done Done
chrislema
182
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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