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
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
200
Them Middle School Kids Pitch
stevie_vee
0
140
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.4k
佐藤千晶|ポートフォリオ
chimi_chia
0
150
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.4k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
300
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.2k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
Yumika Yamada Portfolio
yumii
0
1.6k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Navigating Team Friction
lara
189
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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