相关 - [[中文排版]] - [[UI设计字体系统]] - [[Design/经验杂谈/字体设计（视觉向）]] ## 概念 - **Typeface vs. Font, what’s the difference?** Typeface 是 type 的合集，用图举个例子。 ### 斜体 - 社会科学领域的主流学术写作规范、美国心理学会格式 APA style 也 [建议](https://apastyle.apa.org/style-grammar-guidelines/italics-quotations/italics#italics-for-emphasis)，==只应在标明术语、标题、变量、外来语等场合使用斜体，以示区分。==至于强调，则建议通过改写句子的方式（例如调整词序、拆分长句）表达，而避免使用斜体。 ### 衬线体 Serif typefaces Top 5 serif typefaces - Garamond - [[Georgia]] - Times New Roman - Bodoni - Caslon - Merriweather（开源） ### 非衬线体 Sans serif typefaces Top 7 sans serif typefaces  - Helvetica - Avenir - Futura - Univers - Din - Arial - Gil Sans ## 实战注意事项： - 在段落中邮件后面需要有一个句号，例如 **bin. Chi@renren-inc. Com. Follow up content** 是美国那边提出来的 - 不要全部大写，否则阅读将十分难受，只有某些庄重和正式的场合会这么使用 - 段落首字母大写以及一些专有名词 - 有些大写字母不需要很突出，还可以用[小型大写字母 (Small Caps) ](https://bk.tw.lvfukeji.com/wiki/Wikipedia:%E9%A6%96%E9%A1%B5)  - 需要突出的文字可以用 Bold 来加重它 - 首字母下沉 (Drop Cap) - “/”后不需要空格 - “@”后也不需要空格 ### Make your acronyms fit in with small caps This is the same as tip number five above but for letters. Or more precisely, acronyms. Let’s try something out, I’ll write CIA here to prove my point. I’m 100% sure that you noticed the “CIA” sometime when you started reading this paragraph (maybe you didn’t notice it but your eyes surely drifted to it for a fraction of a second).  ### Use ligatures to improve the aesthetics and readability of your text  ### Whenever you’re picking fonts, type “TyHMAVA” to check the kerning Whenever you’re picking fonts, type “TyHMAVA” to check the kerning. Fonts with poor kerning will have weird-looking spaces between “T” and “y,” and “A” and “V.” Fonts with really poor kerning will have weird spacing between “H” and “M” too. Take a look at an example of poor kerning below (left example in **Fig 5**) and a font with normal kerning on the right.  ## 标点符号 ### [引号 Quotes](https://bk.tw.lvfukeji.com/wiki/%E5%BC%95%E5%8F%B7) 在非代码环境下，英文引号应该使用弯引号——也就是能让人明显看出来前后方向的引号（按英文习惯，引号的「前、后」也常被称作「开、闭」），通常前引号会长得像阿拉伯数字 “6”，而后引号则像被旋转 180° 后的 “9”，这样的目的是在遇到后引号与前引号相隔更近的时候不会让人误以为它们中间的文字才是被引号包裹起来的内容。 ### [连接符号 Dashes](https://bk.tw.lvfukeji.com/wiki/%E8%BF%9E%E6%8E%A5%E5%8F%B7)  **Hyphen：** 用于表示**合成词**，也在应用齐头尾 (Justify) 的段落对齐方式时按音节折行过长的单词以保证两端对齐的效果。 一般合成词不需要有空格 有空格情况的记录（毕竟这里不是合成词，视觉上有空格会舒服一些。） ![[Pasted image 20210103100710.png]] **En Dash：** 用于表示**范围**，也就是从什么到什么。 Using an En Dash with Number and Date Ranges 前后不需要有空格！[Should I use spaces around an en-dash? - The Grammar Guide](https://prowritingaid.com/grammar/1000067/Should-I-use-spaces-around-an-en-dash?sscid=c1k6_a96uy&#:~:text=In%20US%20English%2C%20you%20should,e.g.%20See%20chapters%2010%E2%80%9312.)  **Em Dash**：用于表示语气的转折，用法类似于中文的破折号，不过它也正是中文破折号的来源。 链接的 2 个单词需要空格 ![[Pasted image 20210103100312.png]] Apple 官网 标准的用法 在 mac 上的输入方法： > Hyphen (-)：数字 0 键右侧的 ”-” > En Dash (–)：option+- > Em Dash (—)：option+shift+- ### [分号 Semicolon](https://bk.tw.lvfukeji.com/wiki/%EF%BC%9B) ### 逗号 英文的逗号和句号，后面需要空格。视觉上也是如此，不然太拥挤了。 ### & 号 前后需要有空格（此建议来自 renren 的文案审核专员） BACK TO REVIEW & PAY ### $ 美元 - 曾经问 GPT，与数字之间是否需要空格，待验证。 - 一般来说，美元符号和数字之间不需要空格，直接写成 "$200.00" 即可。但是在某些情况下，也可以按照自己的要求添加空格。在一些国家/地区，例如法国和加拿大，有时会在货币符号和金额之间添加一个空格。但是在美国，通常不会在美元符号和金额之间添加空格。 ## 无序列表 Bullet - 每个列表项目的第一个单词的第一个字母大写。 - 无需列表的句子需要句号 [^1] [^1]: [(12 封私信 / 4 条消息) 英文多项列表里面每项如果都是短句，最后要加句号么？ - 知乎](https://www.zhihu.com/question/19585725) ## 操作技巧 ### Emoji 如何在 Mac 上打出各种特殊符号和 Emoji 表情？ 快捷键是 **control**+**command**+**space**。 ### 版权、商标符号和其他 常用的版权和商标符号（`©`、`®`、`™`）在 macOS 上可以分别通过 Option + `g` / `r` / `2` 输入。Word 的自动纠正则会将 `(c)`、`(r)` 和 `(tm)` 替换为对应的符号形态。与它们有关的常见误用有两种：一是用成了中文输入法所提示的 emoji 版本；二是手动输入 TM 字样，然后改成上标。 事实上，macOS 几乎为每个 Option + 字母/数字键的组合都 [安排](https://forlang.wsu.edu/help-pages/help-pages-keyboards-os-x/ "安排") 了一个特殊符号，如果再加按 Shift 键，则可以直接输入的字符还有更多。读者如果有兴趣不妨依次试一遍，并挑一些自己用得到的专门记忆。 ## 资源 - [Typography – Cloudscape Design System](https://cloudscape.design/foundation/visual-foundation/typography/) - [视觉动物｜字体之外的西文排版](https://mp.weixin.qq.com/s/6TK8OxiPUxvOTQ7g3OheaQ) 来自 Frog - [Medium – Where good ideas find you.](https://medium.com/) Medium 这个网站英文排版优秀 - [Improve your designs with these typography tips | by Monica Galvan | UX Collective](https://uxdesign.cc/improve-your-designs-with-these-typography-tips-eeacc8fb81ff) 用这些排版技巧改善你的设计 - [别再用「六个点」当省略号了，这些标点都有更规范的输入方式 1. 少数派](https://sspai.com/post/45516) - [不要大喊大叫——小议标点和格式在表达强调中的滥用 - 少数派](https://sspai.com/post/65492) - [网站字体排版的节奏 | Better Web Type](https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/) - [[字体设计垂直方向的节奏感工具]]