官网字体和配色怎么定，才和品牌手册对得上

很多企业的品牌手册做得很完整：标准色、标准字体、标志的使用范围，一页页写得清楚。可是官网上线之后，常见这样的情况：主色比手册里的偏暗，标题用了手册里没有的字体，各栏目的灰色深浅不一。手册没有错，问题出在手册是为印刷品和展板写的，搬到官网要经过一次「翻译」。

这篇讲怎么把手册里的字体和配色，定成官网能用、各页一致的规范。

一、先弄清手册里有什么，缺什么

拿出品牌手册，先列一张清单：标志的使用规范、标准色、辅助色、标准字体、图形元素。再标出缺的部分。常见的缺口有三处：只有印刷用的色值，没有屏幕用的色值；只有一款中文字体，没有英文和数字的搭配；没写这些字体能不能用在网页上。

缺口要在设计开始之前补齐，而不是留给每个设计稿各自发挥。材料怎么交给设计方，可以参考品牌官网改版，甲方要交给设计方哪些材料：标志源文件、标准色、字体和图片版权，都在那份清单里。

二、颜色：写清色值、比例和用法

屏幕和印刷的显色方式不同，手册里的印刷色放到屏幕上，看起来会有偏差。做法是以手册为准，在屏幕上找出视觉上很接近的一组色值，定下来写进规范，之后所有页面都用这一组，而不是各人凭眼睛调。

颜色规范至少写四件事：

• 色值：主色、辅助色和中性色（灰）各是哪几个。
• 使用比例：主色用在哪些位置，比如标题、按钮、重点标记；大面积的背景用什么色。
• 功能色：链接、提示、错误提示各用什么色，避免随手另选一个。
• 文字与背景的对比：正文和底色要有足够的反差。浅灰色的字放在白底上，在手机和室外光线下很容易看不清。

三、字体：先确认能不能在网页上用

字体要先看授权。手册里的字体，有的只买了印刷和设计软件里的使用权，放到网页上展示需要另外取得授权。没有授权，就要换成可以使用的字体，并尽量让字形的气质接近。这件事要在设计前确认，不要等到上线才发现。

确认之后，字体规范写四项：

• 搭配：中文字体和英文、数字字体怎么配。
• 字号层级：一级标题、二级标题、正文、说明文字各用多大，行距多少。
• 字重：哪些位置用粗体，避免整页都是粗体。
• 备用字体：访客设备上没有指定字体时，退回到哪一款，字形和宽度尽量接近。

手机上的正文字号单独定一档，以在手机上不用放大就能读为准。

四、把它们写成一页，大家共用

规范写成一页，放在设计、开发和内容团队都找得到的地方：色值表、字体与字号层级表，再加几个正例和常见的错误用法。设计师照它出稿，开发照它实现，内容编辑照它排文章，各栏目才能保持一致。品牌手册更新时，同步更新这一页。

官网和小程序共用同一套规范更省事。品牌表达和购买转化怎么在视觉里兼顾，可以看品牌零售小程序：品牌表达和购买转化怎么兼顾。

五、上线前并排对照

验收时，把品牌手册和上线后的页面并排放在一起，核对五类页面：首页首屏、栏目页、文章页、表单页，以及手机端首页。看颜色是不是同一组，标题字体和字号层级是不是一致，浅色文字看不看得清。至少在一台手机和一台电脑上各看一遍，因为同一个色值在不同的屏幕上，显示会有差别。

小结

官网的字体和配色要和品牌手册对得上，办法是把手册「翻译」成网页规范：先补齐缺口；颜色写清色值、比例和用法；字体先确认授权，再定搭配和层级；写成一页让各团队共用；上线前并排对照。

飞沐的数字体验服务包括品牌视觉：版式、字体、色彩与图像规范，从品牌识别延展到每一块屏幕。