不少模板是照英文站的结构做的,套在中文内容上读起来特别累:字太小、行太挤、一段长得看不到头。
字号和行高
正文桌面端用 16 到 18 像素,手机上别小于 15 像素。行高设成字号的 1.6 到 1.8 倍,中文笔画密,行距一紧就糊成一片。
段落之间留出明显间距,宁可多空一点,也别让两段粘在一起。中文没有词间空格,段落间距几乎是唯一的分隔信号。
字体栈怎么写
中文网页字体文件动辄几 MB,全量加载不现实。常规做法是不指定具体字体,交给系统:正文用系统默认的中文黑体,标题略作区分即可。
字体栈的顺序是"先试用户机器上有的",逐级降级。英文字体要放在中文字体前面,这样英文部分先匹配到英文字体,中文再落到中文字体上。
别为了好看去加载整套中文字体,那是几百 KB 到几 MB 的代价,换来的观感提升还不如先把行高调对。
行宽和对齐
一行太长,眼睛回扫会串行。正文宽度控制在每行三十到四十个汉字比较舒服,宽屏上别把内容拉满。
中文段落建议左对齐。两端对齐容易在标点和数字之间拉出难看的空隙。
对比度
浅灰字配白底看着"高级",实际在户外或者老显示器上根本看不清。正文的对比度要够,浅灰留给辅助信息。
排版的目标不是漂亮,是让人读完。字号、行高、行宽这三件事调好,比换十套字体都有用。