设计系统
规模化的排版体系——构建字体系统、令牌架构、响应式策略与跨平台一致性。
设计系统
设计系统的排版测试与 QA
如何在浏览器、设备和屏幕尺寸间测试排版——截断、溢出、多语言以及视觉回归测试。
设计系统
垂直韵律:将文本对齐到基线网格
垂直韵律通过将所有文本和间距对齐到一致的基线网格来营造视觉和谐——在网页上具有挑战性,但可以实现。
设计系统
为你的设计系统选择主字体
你的主字体是设计系统中最显眼的设计决策。如何为系统字体评估字符集、字重、可变轴和授权。
设计系统
顶级设计系统如何处理排版
分析 Apple HIG、Material Design、IBM Carbon、Shopify Polaris 等如何处理排版——字体选择、字号体系与规范。
设计系统
设计系统中的响应式排版
跨断点的排版缩放——响应式字号体系、使用 clamp() 的流式字号,以及从移动端到桌面端维持层次结构。
设计系统
排版设计令牌:从 Figma 到 CSS
设计令牌连接设计与开发——将字体家族、字号、字重、行高和间距作为结构化、跨平台的取值。
设计系统
为你的设计系统构建字号体系
定义良好的字号体系是一致设计的基础。学习如何选择比例、定义级别,并跨平台实现。