字体规范

Typography System

一、字体选择

选用清晰易读的无衬线字体,确保在不同设备上的良好显示效果。优先使用系统默认字体,加载速度快,兼容性最好。

中文字体栈

佗芝林中医院 - 传承国粹 精研医术
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
用于:禁用状态