## 概念 一个好的界面设计，一定会有定义清晰的字体规范。 ### Overline / eyebrow An overline is a very short, relatively small piece of text that is placed over a header or a subheader. Before we continue with the explanation, here’s an example, since we know that the term “overline” isn’t very well known so you might have no idea what we’re talking about. ![CleanShot 2023-10-17 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-17%20at%[email protected]) ### 为什么要有字体规范？ 字体比例是一个界面中使用的所有字体尺寸的集合。你可以把任何一个用户界面拿出来，收集其屏幕上使用的所有尺寸，然后你就会得到一个字体比例。也就是说，它应该在你的设计项目开始之前创建，所以我们不是从一个完整的界面中 "提取 "尺寸，而是用字体比例来创建它。 为什么呢？简而言之，它可以节省大量的时间，并使应用不同字体风格的过程更加精简和直接。如果你看到自己问 "我应该为这个标题使用 32 px 还是 34 px？"，这意味着你需要掌握创建字体比例的艺术。继续阅读以了解更多。 < [https://www.figma.com/file/iVYLbuVj4XFs2zIjdUoC4k/RM---Module-1---Typography?node-id=1591%3A1971>](https://www.figma.com/file/iVYLbuVj4XFs2zIjdUoC4k/RM---Module-1---Typography?node-id=1591%3A1971>)  ## 常见字体梯度 [[字体梯度和命名的草稿.excalidraw]] ### Apple - 参考 [Typography - Visual Design - macOS - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/typography/) - Large title - Title 1 - Title 2 - Title 3 - Headline - Body - Callout - Subheadline - Footnote - Caption1 - Caption2 从 2023 iOS 官方源文件记录的。  ### Figma 官方 [[Figma 官方 Design System 教程画布.canvas]]  ## 最佳实践 ### DO - 优先用字重构建视觉层级？ Use font weights to establish hierarchy - 左边的例子不一定是 “错误的”。用户将首先阅读标题，然后阅读正文，就像我们想要的那样。然而，我们可以做同样的事情，**使用更高的权重（如粗体或半粗体）在屏幕上占用更少的空间。**  - Align different text sizes to the baseline -  - Avoid Rags -  - 西文排版时， **The optimal line length** for your body text is considered to be 50 to 60 characters in a line. Using less or more can impact readability.  - 标题，When to change **letter spacing?** - 如果标题文字过大，可以适当调小 Letterr spacing。 - 一般情况下，标题的行高会比正文的行高要小。例如正文是 1.5 倍，标题是 1.25~1.3 倍。 - 在 CLoudspace 这个设计系统里也有相关的设计支持。 < [https://cloudscape.design/foundation/visual-foundation/typography/#type-styles>](https://cloudscape.design/foundation/visual-foundation/typography/#type-styles>) - 在一些国外的设计教材中，也有相关案例。 - 字号大小一定要克制，大部分页面 2 – 3 种基本就够了。 - 例如 12、14、16，能应付大多数 B 端产品了。 - **如何利用工具创建更好的 Scale 比例？** - 用 #Figma插件 Typescales - 还有 Textyles (不是很实用的样子) ### Don't - 字重不要太轻，很难阅读。 -  ## 资源 - [Vol 7 应用市场规则大更新、UI基础第一篇-字体系统 (hsxg.ghost.io)](https://hsxg.ghost.io/vol7/) 这篇文章描述了，如何优化一个旧的设计，重新梳理字号，间距，减少零乱的字体效果，提升设计效率与开发效率。 ### 其他 - [细数 Pingfang SC 的七宗罪 · 李瑞东 LRD.IM](https://lrd.im/blog/2022-01-17-8a5738fc2340.html) 感觉写的有点水平。 - [有字库-首页-全球第一中文web font（在线字体）服务平台、web font、webfont、在线字体、网络字体](https://www.webfont.com/) 可以引用原字体。 - [Web 中文字体应用指南 · Ruby China](https://ruby-china.org/topics/14005)  - 来自 FIgma 群友 - [[VariableFont 和 Static有什么区别？]]