设计师

海报和主视觉怎么挑中文字体

适合谁看:做海报、活动主视觉、封面、包装的设计师。

按这个顺序挑

  1. 先看许可。 商业项目只在许可清楚的字里挑(开源商用、免费商用,或已购买授权),省得做完再换。见《这款字能不能商用:五步自查》。
  2. 再看用途。 远看还是近看?印刷还是屏幕?大字少字,还是还有小字说明?
  3. 然后看气质。 主题是庄重、活泼、科技、复古还是文艺?
  4. 最后看字重和字符。 标题要的粗细在不在;文案里的字全不全。

字体气质速查

类型 常见气质 适合
黑体(无衬线) 现代、干净、有力 科技、商业、信息为主的海报
宋体、明朝体 正式、文雅、有书卷气 文化、出版、高端品牌
仿宋 古朴、公文感 文化活动、复古主题
楷体 亲切、手写感 教育、生活、温和的主题
圆体 柔和、可爱 亲子、食品、轻松的活动
书法、手写体 个性强 只做标题或少量大字
像素体 游戏、复古数码 游戏、潮流主题
窄体、斜体、美术字 动感、张扬 大标题、促销

实用技巧

交付前

接下来读什么

中文字体怎么搭配:标题、正文和中西文混排

适合谁看:要在一个版面里同时用几款字,或者中英文混排的设计师。

少即是多

一个项目通常两款字就够:一款做标题,一款做正文。再加,就用同一款字的不同字重来拉层次,而不是再加一款新字。

标题和正文怎么配

思路 例子 效果
对比:一款有性格,一款很安静 标题用书法体或美术字,正文用宋体或黑体 有重点,不打架
同族:同一家族的不同字重 标题用粗黑体,正文用常规黑体 统一、稳妥
同源:衬线配衬线 标题用粗宋体,正文用细宋体 文雅、正式

避免两款风格接近却又不一样的字放在一起,比如两款不同的黑体,读者会觉得「哪里不对」。

中西文混排

中文字体里自带的英文字母和数字,有的设计得很好,有的只是凑数。混排前先看看:

在网页和软件里,常见做法是把英文字体写在前面、中文字体写在后面,让英文字母用英文字体显示,汉字落到中文字体上。网页写法见《在 CSS 里使用:字体名、备用字体和多字重》。

中英文之间的空格和标点

W3C 的《中文排版需求》对中西文混排、标点有更完整的说明。

参考资料

接下来读什么

正文用字:字号、行距和字重

适合谁看:要排大段中文的设计师和编辑,比如文章页、电子书、手册、长图。

选什么字

正文要的是好读、不累:

行长和行距

W3C《中文排版需求》给出的参考:

具体取多少,看字号、字体和阅读环境,用真实内容试排确认。

屏幕和印刷的差别

屏幕 印刷
字号 手机正文一般比印刷品的正文字号看起来更大 按成品尺寸和阅读距离定
细笔画 低分辨率屏幕上容易发虚,选笔画不太细的字 细笔画能印清楚,但要注意纸张和印刷方式
字体文件 网页上要用网页字体,见《网页字体引用与 CDN 接入》 交付前转曲或嵌入,见《交付印刷:转曲、嵌入字体和 PDF/X》

其他小细节

参考资料

接下来读什么

交付印刷:转曲、嵌入字体和 PDF/X

适合谁看:要把设计稿交给印刷厂、或者交付给客户归档的设计师。

印刷厂的电脑上不一定装着你用的字。交付前要么把字转曲(变成图形),要么把字体嵌入 PDF。

转曲和嵌入有什么不同

转曲(创建轮廓) 嵌入字体
做法 把文字变成矢量图形 把字体数据放进 PDF
之后还能改字吗 不能,文字已经变成图形 PDF 一般只做小改;嵌入的通常是用到的那部分字
文件里还能搜到文字吗 不能 能
适合 标志、少量大字、印刷厂要求转曲的 书刊、手册等文字多的文件

字体本身的嵌入权限可能禁止嵌入。遇到软件提示不能嵌入,就改为转曲,或换一款允许嵌入的字。

在 Illustrator 里转曲

  1. 先另存一份可编辑的源文件(转曲后改不回来)。
  2. 选中文字,选择「文字 > 创建轮廓」(Windows 快捷键 Shift+Ctrl+O,Mac 上是 Shift+Command+O)。
  3. 用「文字 > 查找/替换字体」检查,文档里不应再列出字体。

点阵字体和受轮廓保护的字体不能转曲。

导出 PDF/X

很多印刷厂要求 PDF/X 格式的文件。以 InDesign 为例:

  1. 选择「文件 > 导出」,格式选 Adobe PDF(打印)。
  2. 在预设里选印刷厂要求的 PDF/X 标准(例如 PDF/X-1a、PDF/X-4)。PDF/X-1a 要求嵌入全部字体。
  3. 按印刷厂的要求设好输出意图(色彩配置)。

只有字体厂商允许嵌入的字体才能嵌进 PDF,否则 InDesign 可能替换字体,导出后一定要检查。

发出去之前检查

打包源文件时注意许可

InDesign 的「文件 > 打包」会把用到的字体文件一起复制出来(Adobe Fonts 的字体除外)。把这个包交给印刷厂或客户之前,先确认字体许可允许再分发字体文件;不允许的,就只交 PDF,或请对方自己取得授权。

参考资料

接下来读什么

在 Figma 里用文风字体

适合谁看:用 Figma 做设计,想用文风字体库里的字的设计师和团队。

Figma 默认只带 Google 字体和部分 Apple 字体。要用文风收录的字,得先把字体装在自己电脑上。

第 1 步:下载并安装字体

  1. 到 wenfeng.org 的字体条目下载原件(标「本站下载」的),或者按条目里的链接去作者、厂商官网下载。见《下载原件和切片:什么能下、怎么用》。
  2. Figma 支持 .ttf 和 .otf。下载的压缩包里常有好几个字重,按需安装。
  3. 安装方法见《在 Windows 10 和 11 上安装和删除字体》、《在 macOS 上安装、删除和恢复字体》。

注意:网页字体用的 woff2 切片不能装进 Figma,要用原件。

第 2 步:让 Figma 读到本地字体

Linux 和 ChromeOS 上的 Figma 不支持本地字体。

第 3 步:在文件里找到字体

选中文字图层,打开右侧的字体菜单,在筛选里选「Installed by you」,再搜字体名。中文字体可能要用英文名搜,例如霞鹜文楷搜「LXGW WenKai」。英文名可以在文风字体页上看到。

团队协作的坑

参考资料

接下来读什么

在 Photoshop、Illustrator、InDesign 里用文风字体

适合谁看:用 Adobe 软件做设计,想用文风字体库里的字的设计师。

安装

Adobe 软件使用电脑上已安装的字体。先下载原件并装好:

  1. 到 wenfeng.org 的字体条目下载原件,或按条目链接去作者、厂商官网下载。见《下载原件和切片:什么能下、怎么用》。
  2. 安装后重启 Adobe 软件。装好却找不到,按《装好的字体在设计软件里找不到怎么办》 排查。

中文字体在字体菜单里可能显示英文名,可以用英文名搜,例如思源黑体搜「Source Han Sans」。

打开别人的文件提示缺字体

交付前

参考资料

接下来读什么

给客户做项目:字体许可谁负责、交付时附什么

适合谁看:接外包、在设计公司或代理商工作,要把设计成果交给客户的设计师和项目经理。

本页是一般性的做法建议,不构成法律意见。 责任怎么分,以你和客户签的合同为准;合同里没写清的,请咨询律师。文风不对具体项目的责任划分作出承诺。

先在合同里写清楚

字体许可最容易在交付后才出问题。签约时把这几件事写进合同或报价单:

要写清的事 说明
字体由谁选、谁买 设计方推荐,客户确认;需要付费授权的,写明由谁购买、授权主体是谁
授权主体 商业字体的授权通常要以实际使用方(往往是客户)的名义购买
用途范围 网页、印刷、视频、App、商品包装、商标……用途不同,许可要求不同
交付内容 交 PDF、交源文件,还是连字体文件一起交
后续使用 客户以后自己改稿、加印、做延伸物料时,字体怎么办

开源字体最省心

采用标准开源协议(OFL、Apache、MIT 等)的字体,客户一般可以直接按协议使用,不必另签授权。即便这样,也建议交付时附上许可材料。

交付时附一份「字体清单」

字体 用在哪 许可 许可原文 文件来源 证明编号(如有)
思源黑体 正文 OFL-1.1 https://wenfeng.org/license/syhtsc/ wenfeng.org (申请后填写)

再附上:

持证单位能不能写客户的名字

可以把客户写成持证单位,但要知道:持证单位只表示这份证明副本存在哪家单位的档案里,不等于被授权人。证明也不是授权书,见《证明不是什么》。

字体文件能不能交给客户

接下来读什么

改字和做字标:开源许可允许什么

适合谁看:想用开源字体做标志、字标,或者想改动字形、补字后再发布的设计师。

本页以最常见的 SIL 开放字体许可证(OFL)为例。其他协议请读各自原文。本页是操作说明,不构成法律意见。

用 OFL 字体做标志和字标

OFL 官方常见问题说明:可以用 OFL 字体做标志、图形、招牌等作品,作品归你,不需要另外取得许可或署名。

做法上:

改字体本身再发布

这是在做「派生字体」,规则更严格:

要求 说明
不能用保留字体名 原字体声明了保留字体名(Reserved Font Name)的,改过的版本不能再用这些名字,除非权利人书面同意
仍用 OFL 改过的字体也必须按 OFL 发布
保留版权声明和许可 发布时附上原来的版权声明和许可文本
不能单独出售 OFL 字体,改过的也一样,不能单独卖字体文件

保留字体名在哪里看:到 https://wenfeng.org/license/{目录名}/,页面上会写「有保留名」,并列出具体名字。例如霞鹜文楷的保留名包括「霞鹜」「LXGW」等。

常见误区

参考资料

接下来读什么

多字重家族和可变字体怎么挑

适合谁看:要给品牌、产品界面或出版物选一整套字体的设计师。

字重是什么

字重就是笔画粗细的档位,常见的名字从细到粗是 Thin、ExtraLight、Light、Regular、Medium、SemiBold、Bold、ExtraBold、Heavy、Black。不同字体的命名不完全一样,以字体页「字重」一栏为准。

要几档才够

场景 建议
海报、单页 两三档就够:标题粗、正文常规
品牌系统、产品界面 至少 Regular、Medium、Bold;有细体更好
书刊、长文档 正文一档加一档加粗用于强调

挑多字重家族的好处是风格统一,不用在不同字体之间凑。中文开源字体里,思源黑体、思源宋体这类家族的字重较全。

可变字体

可变字体把多个字重(有时还有宽度等变化)放在一个文件里,可以在两档之间连续调节。

挑选步骤

  1. 在字体页看「字重」有几档,逐档看样张。
  2. 用同一段文字比较相邻两档,粗细差别要明显。
  3. 确认每一档都覆盖你要用的字(「查字」)。
  4. 网页项目:问前端每多一档会多加载多少,见《性能:子集、字体显示策略和预连接》。

接下来读什么

像素字、手写体和书法体的使用边界

适合谁看:喜欢用有个性的字体,想知道它们适合用在哪里、不适合用在哪里的设计师。

展示用和正文用

字体大致可以分成两类:

把展示字体用在大段正文上,读者会很累;把正文字体用在主视觉上,画面可能缺少个性。

各类字体的边界

类型 适合 不适合 要注意
像素字 游戏界面、复古数码风格、标题 大段正文、需要正式感的场合 像素字通常在特定字号(设计格子的整数倍)上最清楚,缩放到其他尺寸可能发糊
手写体 标题、引语、手账风格、短句 合同、说明书等需要准确阅读的文字 手写体常缺字,先「查字」
书法体 标题、节庆、文化主题 小字号、长段落 笔画粗细变化大,缩小后细笔画容易看不清
美术字、窄体 促销、大标题 正文 字间距、行距常常要手动调

实际使用的建议

可以先试的几款

见《文风精选:按场景挑字》 里「标题与展示」「书法与像素」两节。

品牌方不等于制作方:别拿一款字的许可推断另一款

适合谁看:看到「某某厂商的字都能免费商用」这类说法,想弄清楚的设计师和采购。

三个容易混的角色

角色 是谁 例子
品牌方(出资方) 出钱请人做字、拥有版权的公司 某互联网公司发布自己的品牌字体
制作方(受托方) 受委托做字的字库厂商 字库厂商为品牌代工
发布方 把字体放出来给大家用的一方 可能是品牌方,也可能是作者本人

为什么不能互相推断

在文风上怎么看归属

一条规则

每款字单独查原文。 不要因为「同一家」「同一个作者」「长得像」就套用另一款字的许可。

接下来读什么

从设计稿到上线:怎么和前端对接字体

适合谁看:做网页、小程序、App 界面的设计师,以及接设计稿的前端。

设计稿里的字,到了网页上经常「长得不一样」。原因大多是交接时信息没给全。

设计师交接时给这几项

项目 例子 为什么需要
字体名和目录名 霞鹜文楷,目录名 xwwk 前端据此拼出网页字体地址
用到的字重 Regular、Bold 每档字重要单独加载
用在哪里 标题用 A,正文用 B 只给需要的地方加载
文字量 只有几个固定标题,还是用户输入的任意文字 决定子集怎么选
备用字体 字体没加载出来时用系统黑体 写进 font-family 的备用顺序
许可 开源商用,许可原文链接 上线前留存

前端拿到后

  1. 按《网页字体地址规则》 拼出 CSS 地址,在浏览器里打开确认能访问。
  2. 从 CSS 里抄出声明的字体名,写进样式,后面加上备用字体,见《在 CSS 里使用:字体名、备用字体和多字重》。
  3. 保留授权注释,见《保留授权注释》。
  4. 在手机和电脑上各看一遍,对照设计稿。

常见的对不上

现象 常见原因
粗细和设计稿不一样 没加载对应的字重;或者浏览器把常规体「假加粗」了
个别字换了字体 网页字体子集里没有这个字,或者字体本身缺字
首屏先闪一下系统字体 字体还在下载,属于正常现象,可以用 font-display 控制,见《性能:子集、字体显示策略和预连接》
设计稿里的字距、行距对不上 设计软件和网页的行高算法不同,要按网页实际效果调

接下来读什么

文风精选:按场景挑字

适合谁看:不知道从哪款字开始挑的设计师和普通用户。

下面的字都在文风字体库上架,目前标为「开源商用」,在 wenfeng.org 有归档的许可原文。名单只是起点,用之前仍请读一遍许可原文,并确认你的用法在许可范围内。

每款字给两个链接:「字体页」看样张、字重和查字;「许可原文」看归档的协议全文和保留字体名。

正文阅读(文章、电子书、讲义)

字体 类型 协议 说明 链接
思源宋体 宋体 OFL-1.1 字重齐全,从细到粗多档,印刷和屏幕正文都常用 字体页 · 许可原文
霞鹜文楷 楷体 OFL-1.1 笔画柔和,适合屏幕阅读和文艺类正文;有保留字体名 字体页 · 许可原文
霞鹜铭心宋 宋体 OFL-1.1 单字重,适合正文和小标题;有保留字体名 字体页 · 许可原文
朱雀仿宋 仿宋 OFL-1.1 仿宋风格,适合正式文本和文化类内容 字体页 · 许可原文
寒蝉活仿宋 仿宋 OFL-1.1 带活字印刷味道的仿宋;有保留字体名 字体页 · 许可原文

界面和说明文字(网页、App、表格)

字体 类型 协议 说明 链接
思源黑体 黑体 OFL-1.1 字重齐全,最常用的开源中文黑体之一 字体页 · 许可原文
更纱黑体 黑体 OFL-1.1 适合界面、正文,也常用于写代码的环境;有保留字体名 字体页 · 许可原文
IBM Plex 无衬线简体中文 黑体 OFL-1.1 和 IBM Plex 英文家族风格一致,适合中英文混排的产品界面 字体页 · 许可原文
霞鹜新晰黑 黑体 IPA 单字重,字形清楚,适合屏幕阅读和办公文档 字体页 · 许可原文
寒蝉云墨黑 黑体 OFL-1.1 四档字重,可做正文和标题 字体页 · 许可原文

标题与展示(海报、封面、短视频)

字体 类型 协议 说明 链接
得意黑 斜体窄黑 OFL-1.1 只有一档斜体,适合醒目的标题和字幕 字体页 · 许可原文
站酷快乐体 美术字 OFL-1.1 活泼,适合促销、标题 字体页 · 许可原文
猫啃什锦黑 粗黑 OFL-1.1 只有粗体,适合标题和字幕 字体页 · 许可原文
荆南麦圆 圆体 OFL-1.1 圆润,适合包装、品牌标题 字体页 · 许可原文

书法与像素

字体 类型 协议 说明 链接
马善政楷书 书法楷书 OFL-1.1 毛笔楷书,适合标题和文化主题 字体页 · 许可原文
缝合像素 像素 MIT 像素风格,适合游戏和复古数码主题,按设计格子的整数倍字号使用最清楚 字体页 · 许可原文

免费商用的厂商字体

阿里巴巴普惠体(字体页)是厂商免费商用字体,字重多,常用于电商和品牌设计。它不是开源协议:原件要到阿里巴巴字体官网下载,不允许单独再分发字体文件,文风也不为它出证明。用之前请到厂商官网读授权协议原文。

用前再确认三件事

  1. 字重够不够。 有几款只有一档字重,做层次要另配一款字。
  2. 字全不全。 在字体页「查字」里输入你的文案,尤其是人名、地名和繁体字。
  3. 保留字体名。 标了「有保留名」的字,改过后不能再用原名发布,见《改字和做字标:开源许可允许什么》。

接下来读什么