一、字体选择
选用清晰易读的无衬线字体,确保在不同设备上的良好显示效果。优先使用系统默认字体,加载速度快,兼容性最好。
中文字体栈
佗芝林中医院 - 传承国粹 精研医术
PingFang SC / Microsoft YaHei / Helvetica Neue / sans-serif
英文字体栈
Tuozhilin TCM Hospital
-apple-system / BlinkMacSystemFont / Segoe UI / Roboto / sans-serif
二、字号规范(适老化大字号)
针对中老年用户群体,全面提升字号大小。基础字号从常规的14px提升至18px,确保清晰阅读。
| 用途 | 字号 | 行高 | 示例 |
|---|---|---|---|
| 页面主标题 | 32px | 1.3 | 佗芝林中医院 |
| 板块标题 | 26px | 1.4 | 名医风采 |
| 卡片标题 | 22px | 1.4 | 中医养生好物 |
| 正文内容 | 18px | 1.6 | 为您的健康保驾护航 |
| 辅助文字 | 16px | 1.5 | 点击查看详情 |
| 按钮文字 | 18px | 1 | 立即预约 |
| 标签文字 | 14px | 1.4 | 热门推荐 |
三、字重规范
字重对比
细体 Light - 传承国粹
常规 Regular - 传承国粹
中等 Medium - 传承国粹
半粗 SemiBold - 传承国粹
粗体 Bold - 传承国粹
建议使用: 400(正文)、600(标题)、700(强调)
四、行高与间距
增大行高和字间距,提升文字可读性。段落间距大于行高,便于识别段落结构。
推荐行高比例
行高1.3 - 紧凑阅读(用于标题)
行高1.5 - 标准阅读(用于辅助文字)
行高1.7 - 舒适阅读(用于正文内容)
行高1.9 - 轻松阅读(推荐中老年用户)
间距系统
xs - 4px
sm - 8px
md - 16px
lg - 24px
xl - 32px
五、适老化排版原则
字号足够大
正文不小于 18px,标题不小于 22px。用户可放大但不能缩小。
行宽控制
每行文字控制在 20-30个字符 之内(移动端),过长的行会增加阅读难度。
段落分明
段落之间保持足够间距(至少 1.5倍行高),首行无需缩进。
避免花哨
不采用斜体、下划线过多装饰。不使用装饰性字体,保持简洁清晰。
文字可复制
重要信息(如电话号码、地址)提供 一键复制 功能,减少用户记忆负担。
六、文字颜色规范
主文字
主要文字
#2C2416
用于:标题、重要信息
次文字
次要文字
#5C5146
用于:正文内容
辅文字
辅助文字
#8C8076
用于:提示、占位符
禁用
禁用文字
#B5A9A0
用于:禁用状态