排版烂的网站，内容再好也没人看
新乡平原示范区一家做智慧农业的企业，技术实力很强，博客文章写得也扎实。但网站排版一塌糊涂：正文字号14px、行间距几乎为零、段落之间没间距、手机上看着像一堵字墙。结果博客跳出率82%，文章再好也白写。
排版就是内容的包装。你内容是金子，排版是盒子，盒子太丑人家根本不想打开。下面7个规则是网页排版的底线，做到这些，网站专业感立马上一个台阶。
规则一：字号层级清晰
一个网页最多4级字号：H1标题32-40px、H2副标题24-28px、H3小标题18-20px、正文16px。别搞出七八级标题来，又不是写论文。
正文字16px是底线。新乡很多企业网站正文用14px甚至12px，老板觉得“显得精致”，实际上40岁以上的人看着费劲。你的客户群体里有多少是四五十岁的企业老板？别因为字号丢客户。
规则二：行高1.6-1.8倍
行高就是每行文字之间的间距。正文字号16px的情况下，行高设为26-29px最舒服。CSS里写line-height: 1.7就行。
这个数值有科学依据。眼球从一行末尾跳到下一行开头，需要短暂的视觉定位时间，行高太紧眼睛找不到下一行，行高太松阅读节奏断裂。1.7倍是经过大量眼动实验验证的最佳值，不是拍脑袋定的。
规则三：段落间距大于行间距
很多人分不清行间距和段落间距。行间距是同一段落内行与行的距离，段落间距是段落之间的距离。两者不能一样——段落间距必须明显大于行间距，否则段落之间没有视觉分隔。
简单公式：段落间距 = 行间距 × 1.5。如果行高26px，段落上下margin至少20px。手机端更要拉开，建议段落间距30px以上。
规则四：最大行宽限制
一行字太长，阅读体验直线下降。中文字符一行35-45个字最合适，换算成像素大概是600-700px。超宽屏上别让正文撑满1200px，看着累。
做法很简单：正文容器设max-width: 680px，居中。新乡牧野区一家做B2B批发的市场网站，原来正文满屏铺开，后来加了行宽限制，用户平均阅读时长从47秒涨到了1分35秒。就改了一个CSS属性。
规则五：移动端单独调排版
PC端排版和移动端不是一回事。同样的16px正文，在手机上可能偏小，因为手机观看距离更近、屏幕更小。移动端正文字号建议17-18px，标题相应缩小。
移动端的行高也要调大一点，1.75-1.8倍比PC端的1.7倍更合适。另外手机上段落要更短——PC端一段4-5行没问题，手机上一段别超过3行，不然就是字墙。
新乡这边的企业网站，移动端流量占比普遍超过70%。PC端做得再好看，手机上一塌糊涂，等于丢了七成客户。踩过坑的人都知道这个痛。
规则六：对齐方式有讲究
中文正文左对齐，不要两端对齐。两端对齐在英文里好看，在中文里会因为字间距不均匀出现“鬼影”，某些行的字间距特别大，特别难看。
标题可以居中对齐（在封面、Banner区域），也可以左对齐（在正文区域）。全站统一就行。别一个页面标题居中，下一个页面标题左对齐，显得乱。
规则七：颜色对比度够用
正文文字和背景的对比度，WCAG标准要求至少4.5:1。简单判断方法：把网页截图转成灰度模式，如果文字和背景灰度值接近，对比度就不够。
常见问题：浅灰文字配白底。#999999灰配白底，对比度只有2.8:1，不达标。改成#666666灰配白底，对比度5.7:1，过关。获嘉一家精细化工企业的官网，联系页面的地址信息用了浅灰色，结果好几个客户说找不到联系方式。改成深灰之后，问题解决。
排版规范不是条条框框，是用户体验的基本保障。建站的时候跟设计师确认这7条都做到了，后期省心很多。