logo

Vue for DTC

1.0

字体组件

Anker design适配网页端的组件库,适合在 React/Next技术栈项目中使用。

字体


用户通过文字来理解内容和完成工作,科学的字体系统应该具有良好的可读性。无衬线体更加亲和,现代,清晰便于阅读,为网页中常用的字体类型,因此 Mont for Anker 优先使用各个系统中默认的无衬线字体。
MAC OS-systemWindow-system
英文字体Mont For AnkerMont For Anker
数学字体Mont For AnkerMont For Anker

字号


文字的大小,层级,对比度等都是影响视觉可读性和阅读效率的重要因素,为保障文本的易读性,界面文字需满足以下要求: 最小可识别文字尺寸:12px

PC/Regular

字号使用场景示意
t0_14px最小文本Power for every moment,@123
t1_16px辅助说明Power for every moment,@123
t2_18px补充文本Power for every moment,@123
t2_20px正文Power for every moment,@123
t3_24px三级标题Power for every moment,@123
t5_32px二级标题Power for every moment,@123
t4_40px一级标题Power for every moment,@123
t5_56px特大标题Power for every moment,@123

PC/Semibold

字号使用场景示意
t0_14px最小文本Power for every moment,@123
t1_16px辅助说明Power for every moment,@123
t2_18px补充文本Power for every moment,@123
t2_20px正文Power for every moment,@123
t3_24px三级标题Power for every moment,@123
t5_32px二级标题Power for every moment,@123
t4_40px一级标题Power for every moment,@123
t5_56px特大标题Power for every moment,@123

PC/Bold

字号使用场景示意
t0_14px最小文本Power for every moment,@123
t1_16px辅助说明Power for every moment,@123
t2_18px补充文本Power for every moment,@123
t2_20px正文Power for every moment,@123
t3_24px三级标题Power for every moment,@123
t5_32px二级标题Power for every moment,@123
t4_40px一级标题Power for every moment,@123
t5_56px特大标题Power for every moment,@123

MO/Regular

字号使用场景示意
t0_12px标签,最小文本Power for every moment,@123
t0_14px辅助说明Power for every moment,@123
t1_16px征文Power for every moment,@123
t2_20px二级标题Power for every moment,@123
t3_24px一级标题Power for every moment,@123
t5_32px特大标题Power for every moment,@123

MO/Semibold

字号使用场景示意
t0_12px标签,最小文本Power for every moment,@123
t0_14px辅助说明Power for every moment,@123
t1_16px征文Power for every moment,@123
t2_20px二级标题Power for every moment,@123
t3_24px一级标题Power for every moment,@123
t5_32px特大标题Power for every moment,@123

MO/Bold

字号使用场景示意
t0_12px标签,最小文本Power for every moment,@123
t0_14px辅助说明Power for every moment,@123
t1_16px征文Power for every moment,@123
t2_20px二级标题Power for every moment,@123
t3_24px一级标题Power for every moment,@123
t5_32px特大标题Power for every moment,@123

字阶与行高


字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
img

在 Anker 视觉体系中,我们建议 PC 端主要字体为 20,与之对应的行高为 28;移动端主要字体为 16,与之对应的行高为 24。

Font Size1214161820243240485668...
Line Height2022242628283644526072...

字重


字重的选择同样基于秩序、稳定、克制的原则。多数情况下,只出现 regular 以及 medium 的两种字体重量,分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量,对应代码中的 600。
AnkerRegular 400
AnkerMedium 500
AnkerBold 600