前端最佳实践:字体

字体单位

px 依旧是最全面的选择,尤其是重交互的网站:

  1. 能够做到设计稿的像素级还原。
  2. 用户体验统一,变量少,可控。
  3. 方便配合 JS 动态计算布局,JS 接口通常只能获取像素为单位的尺寸和位置。
  4. icon,图片和 border 通常都是使用像素尺寸,字体采用像素单位更容易配合。

rem 在文字内容型网站上更加灵活,适合新闻,博客等:

  1. 自适应不同设备,不同用户偏好,获得最佳阅读体验。
  2. 无需手写繁复的 media query。

有些创意内容网站使用 vw 尺寸系统,字体和图片总是同窗口比例缩放,以实现类似海报布局的整体感,但也仅限于这一类型的网站。

em 和 % 会用在局部使用,但存在嵌套后尺寸不容易控制的问题,极少在项目中大范围使用。

pt 是印刷常用单位,不适合现如今的 Web 环境,且和 px 对应关系复杂,应该避免。

正文字体大小

12px 是 Chrome 浏览器默认支持显示的最小字体。即使 CSS 设置了 9px,最终用户看到的仍然是 12px 字体。因此在设计中使用小于 12px 的字体是一个严重的错误。12px 的英文字体可读性尚可,但是中文可读性比较差。建议作为次要文本字体的尺寸。

13px 是信息密度较高,中文可读性尚可的选择。比如 Facebook 和百度用的就是 13px。

14px 是信息密度和中文可读性的一个比较好的平衡点,适合界面复杂且空间比较紧张的网站的正文字体大小。比如

16px 是大部分浏览器的默认字体大小,可读性好,但是信息密度不高,适合一般网站。

18px 以上通常只有在创意营销网站上才会作为正文字体大小使用。

一个比较通用的策略是:

  • 12px:次要文字,页脚链接,标签分类,面包屑,输入框提示,小按钮,小输入框
  • 14px:普通文字,正文,输入框,按钮
  • 16px:突出文字,卡片标题,大按钮,搜索栏

标题层级字体大小

HTML 支持 H1 到 H6 共六级标题。但实际应用中,我们应当控制标题的层级数量,层级越多,使用体验会越差。

功能为主的网站对标题依赖比较小,更多是靠 Card 和 Tab 等容器进行界面层级管理。

内容型网站对标题层级的需求会更高一些,但也尽量不超过三级。

H1 字体大小取决于网站类型对信息密度的要求。以功能为主的系统通常 H1 会比较小,不会超过 40px。

H1, H2, H3 之间应当有 30% 左右的递减,视觉上差异才够显著。比如:

  • H1, 36px:页面标题
  • H2, 24px:章节标题
  • H3, 16px:子章节标题,卡片标题,弹窗标题

字重

最早字体只支持两种字重,正常(normal, 400)和粗体(bold, 700)。现代 Web 字体的字重支持 100 到 900 等 9 种字重,100 最细,900 最粗。但是系统字体支持的字重数量通常较少。

Windows 默认中文字体“雅黑”支持 300, 400 和 700 三种字重。macOS 和 iOS 默认中文字体“苹方”支持 100/200/300/400/500/600 六种字重(苹果更喜欢使用较细的字体设计)。也就是说“苹方”的粗体,会比“雅黑”要细一些。Android 系统默认字体 Noto Sans CJK 支持 200/300/400/500/700/900 六种字重,最为全面。部分 Android 系统,比如魅族 Flyme 和小米 MIUI,甚至搞出了字重的无极调节。

由于中文字体体量巨大,通常网站不会加载远端中文字体,而是使用系统字体。因此,在使用字重的时候,就需要考虑系统字体的字重支持。综合主流操作系统,得出兼容性最好的字重集合:细体 300,正常 400,粗体 700/600


📅

📁

🏷️

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据