网页字体要同时满足品牌表达与实际阅读。选择时不只看一行大标题，还要检查中文长段落、数字、英文和按钮文字，在不同屏幕与备用字体下是否仍然清楚。
在考虑字体前，先明确两个“名词解释”。
字体（Font）vs 字型（Typeface）
Typeface通常指一套具有共同造型特征的字形设计，Font在数字环境中常指具体字体文件或样式。中文语境常统称“字体”，实际交付时明确字族名称、字重和使用文件，比强行逐字对应术语更重要。衬线、无衬线和装饰类只是常见风格划分。
例如，同一字族可能提供常规、加粗等不同字重；字号是排版参数，不代表每个字号都对应一份独立字体文件。
在选择字体时，需要考虑很多，包括你的品牌个性、产品服务以及受众。以下是找到合适网页字体的关键要点。
选字体时可以先在Pixso的文字与页面设计中比较真实内容的层级和换行，再把字族、字重、行高与回退规则交给开发，避免只交付一张静态效果图。
1. 寻找灵感
如果你是一位经验丰富的UI设计师，那么你或许已有几种偏爱的字体样式。但目前我们处在互联网时代，很多品牌如雨后春笋般的涌现出来，需要通过一些变化多端的字体设计来迎合消费者，从而衍生出很多风格差异化很大的设计传播方式，这对设计者的要求就越来越高。庆幸的是，不少网站都有大量字体的资源，Pixso提供字体选择与本地字体使用入口；正式发布前仍需按具体字体核对授权范围，不能把能在设计工具中使用等同于已获得所有商业用途授权。
2. 反思个性、语气和品牌
字体的风格能反映一个品牌的个性，如，美妆品牌往往采用有点曲线的衬线类字体，当我们接到一个网站设计项目时，可能会在设计工作展开之前，陷入字体选择困难，不妨先问问自己这4个问题：
a. 你希望用户初次浏览你的网站后有什么感受？
b. 你想营造什么样的气氛？
c. 你期望的网站是高端的、热情的、有趣的还是严肃的？
d. 你的网站以视觉驱动（图片、动画和视频等图形）为主，还是文本驱动？
一旦你在心里对这些问题有了明确的答案后，你的字体选择范围就大大缩小了，也更容易判断哪一种字体与你的产品定位相对应。
3. 少即是多
或许你会觉得在网站中使用很多字体会很炫酷，但这也可能导致界面过于庞大和凌乱。我们建议从同一系列的字体开始（也就是单一字体），坚持使用一种字体可以使你的界面更具凝聚力和辨识度。
4. 评估文字可读性
选择正文与辅助字体时，应检查实际字号、字重、行距和显示环境。宋体等衬线风格与无衬线风格都可能适合阅读，不能仅按类别判定谁一定更清晰。用真实段落比较生僻字、标点和连续阅读，比只看字母样张更可靠。
5. 检查字体在不同尺寸下的可读性
字体轮廓可以缩放，不代表在所有尺寸下都同样易读。细笔画或过度装饰的字形在小字号下可能难以辨认；应在实际设备上检查正文、注释和按钮文字，而不只放大查看标题。
6. 注意字体加载时间
许多设计师经常忽略的一件事是：选择对网络浏览器友好的字体。用户通常会因为页面加载缓慢而关闭网站，缓慢的加载时间甚至会损害你网站的用户体验。
先检查中文、英文和数字是否来自合适的字族
一个标题同时包含“设计评审记录”、Design Review和123.45时，部分字体可能只覆盖拉丁字符，中文会由备用字体显示。两种字体的字面大小、基线和数字宽度不同，可能让同一行看起来参差不齐。不要只在电脑上安装了某字体就假定所有访问者也有它。
MDN的font-family说明解释了按顺序选择可用字体的机制。交付时可记录首选字族、备用字族和通用类别，并用团队实际支持的设备检查；不能只写“和设计稿一致”。字体名称之外，字重、字号、行高和字间距也要一并明确。这些文字参数可以纳入Web页面的设计与交付规范，与布局、状态和验收规则一并记录。
字体加载前后，都要让内容读得下去
网页字体尚未加载时，浏览器可能显示备用字体；加载完成后字宽变化又可能改变换行。font-display说明给出了相关显示策略，但具体采用哪一种，应结合字体体积、品牌要求和阅读任务，不是一律隐藏文字等到下载完成。
检查标题多一行是否压住按钮、表格数字是否被截断、弹窗高度是否仍够用。文件列表中的长名称另有识别需求，可以继续阅读长文件名的省略与完整读取，不要把省略号当成所有长文字的默认答案。
在 Pixso 中保留同一段真实文案，复制出宽屏、窄屏和备用字体三个画板。比较标题是否多出一行、按钮是否被撑开、数字是否挤在一起，再与开发确认哪些规则需要响应式实现。文字换行后，再按容器内边距与元素间距检查卡片和按钮是否仍留有空间。
本地字体助手可从Pixso下载页获取。设计工具里的字体显示与网站最终使用的字体文件、授权和浏览器渲染是不同环节，交付时应分别核对。
7. 选择最佳UI设计工具
互联网上有许多字体资源，例如专业的在线UI/UX设计工具——Pixso，不仅内置丰富字体设计资源，还支持导出多倍率尺寸，高保真导出设计切图，是UI设计师进行网页、APP设计的绝佳协作工具。
需要使用电脑上已安装的字体时，可通过Pixso本地字体助手连接；字体授权与文件分享给他人后的可用性仍需分别核对。
1、进入文件编辑器后，选中需要更换字体的文本；
2、查看本地字体入口；需要安装时，从Pixso官网下载与你的系统对应的本地字体助手；
3、安装并启动字体助手后，回到编辑器刷新字体列表，检查目标字体是否已可用。
在UI设计中，网页的字体的设置和设计对UI界面的成功与否有着很大的关系，贴合产品个性、具有差异化风格的网页设计，能帮助我们在传播过程中快速占领用户心智，产生无形的品牌价值。
