基础字体大小
移动端的基础字体大小建议:正文文本至少16px(这是iOS防止自动缩放表单的最小值,也是保证可读性的最小值);标题大小根据层级递减(H1: 28-32px, H2: 24-28px, H3: 20-24px);辅助文本不小于14px(如注释、元信息);按钮文字至少16px。使用rem单位定义字体大小,以根元素(html)的字体大小为基准。
响应式字体
响应式字体可以根据屏幕大小自动调整:使用CSS clamp()函数(font-size: clamp(16px, 4vw, 20px)),设置最小值、首选值和最大值;使用媒体查询针对不同断点设置不同字体大小;避免使用固定像素值,特别是在嵌套元素中(em单位会叠加导致字体过大或过小)。流畅的排版(Fluid Typography)是现代响应式设计的重要特征。
行高和间距
行高和间距对移动端阅读体验至关重要:正文的line-height建议1.5-1.8(移动设备需要更大的行高提高可读性);段落间距至少为1em;标题与正文的间距应大于段落间距;列表项之间应有足够的间距;文本块的最大宽度建议30-35个汉字/行(英文约60-75个字符),过长的行会降低阅读效率。
字体选择
移动端字体选择要点:优先使用系统字体(-apple-system、BlinkMacSystemFont、Segoe UI、Roboto),加载速度快且与操作系统风格一致;如需使用自定义字体,限制字体数量(最多2种,一种标题一种正文);只加载需要的字重(Regular和Bold通常足够);使用font-display: swap避免FOIT(Flash of Invisible Text);中文字体文件较大,使用子集化或系统字体回退。
可读性优化
提升移动端文本可读性的技巧:保持足够的颜色对比度(WCAG AA标准,正文对比度至少4.5:1);避免使用过细的字体(font-weight不小于400);避免在正文使用全大写(全大写降低阅读速度);重要文本加粗或使用颜色突出;长文本使用短段落(每段不超过3-4行);适当使用列表和标题分隔长文本;避免文本重叠在复杂背景图片上。
表单字体
表单字段的字体设置尤其重要:输入框字体大小至少16px(小于16px会导致iOS自动缩放页面);标签字体大小14-16px;placeholder颜色不要太浅(至少#767676);错误提示使用红色加图标;下拉菜单字体与输入框一致。良好的表单字体设置不仅影响美观,还直接关系到表单完成率。