有一次帮朋友看他的个人博客，内容写得挺好，但我读了不到两分钟就想关掉。

说不清哪里不对，就是眼睛累。后来仔细分析，发现问题全在排版上：字体是默认的宋体，字号只有12px，行间距几乎贴在一起，段落之间没有留白，一屏密密麻麻全是字。

内容再好，读者看不下去，也等于零。

在网页设计中，文字是信息传递的核心载体。但太多人只关注“写什么”，忽略了“怎么呈现”。殊不知，呈现方式直接影响读者接收信息的意愿和能力。

字体选择：不只是“好看”

很多人选字体只看“好不好看”，但专业的字体选择要考虑更多因素。

首先是系统兼容性。不同操作系统内置的字体不同，需要通过font-family设置“字体栈”来保障兼容性。例如：

css
body{
 font-family:"SegoeUI",Roboto,"HelveticaNeue",Arial,sans-serif;
}
这段代码的意思是：优先使用Windows的SegoeUI，次选Android的Roboto，再不行用HelveticaNeue，最后回退到任何无衬线字体。

其次是字体类型的选择。衬线体（如宋体、TimesNewRoman）有传统的“脚”，适合长篇阅读，能引导视线流动；无衬线体（如黑体、微软雅黑、Helvetica）简洁现代，适合标题和短文本。2026年的极简主义2.0趋势中，衬线体正在回归，用于大标题增加人文气息。

第三是自定义字体的使用。如果需要独特的品牌字体，可以用@font-face引入，但要注意字体文件大小和加载速度。WOFF2格式是现代浏览器中压缩率最高的，优先使用。

字号与行高：决定阅读舒适度

字号大小直接影响阅读体验。正文字号建议在14-16px之间，太小了眼睛累，太大了显得笨拙。标题可以适当放大，但也要考虑移动端的展示。

行高（line-height）是另一个关键因素。行高太小，文字挤在一起难以辨认；行高太大，又显得松散。建议使用无单位数值（如1.5），实现相对于当前字体尺寸的缩放。

段落之间的间距也很重要。没有足够的留白，大段文字会显得像一堵密不透风的墙，让读者望而生畏。

字间距与词间距：微妙但重要

letter-spacing（字间距）和word-spacing（词间距）是容易被忽视的细节。

在标题设计中，适当增加字间距可以增强视觉冲击力，让文字看起来更大气。但正文中的字间距应该保持默认，过宽或过窄都会影响阅读流畅度。

英文中，词间距也很重要。默认设置通常是合理的，但某些字体可能需要微调。

文本对齐与溢出处理

text-align不仅支持left/center/right，justify值可实现两端对齐，但需注意配合text-optimize优化间距，避免出现“单词间有大空隙”的问题。

对于长文本，溢出处理也是常见需求。当文字超出容器宽度时，可以用省略号优雅截断：

css
.ellipsis{
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 max-width:200px;
}
响应式文本：一个尺寸不能适应所有

不同屏幕尺寸下，同样的字号可能过大或过小。响应式设计必须考虑文本的适配。

使用视口单位（vw）可以实现字体随屏幕宽度缩放：

css
h1{
 font-size:calc[24px+2vw];
}
这段代码让标题在24px的基础上，随着视口宽度增加而增加，既保证了基础可读性，又实现了动态适配。

媒体查询也是常用手段：

css
@media[max-width:768px]{
 body{
  font-size:16px;
  line-height:1.6;
 }
}
在移动端，字体应稍大一些（16px），行距更宽松一些（1.6），以适应手持设备较近的阅读距离。

动态文本效果：增加趣味但不过度

CSS还提供了丰富的动态文本效果：

transform可以实现文字旋转、倾斜，结合transition实现平滑动画；text-shadow可以添加多层阴影，制造浮雕效果；@keyframes动画可以模拟打字机效果。

但要注意：动态效果应该服务于内容，而不是干扰内容。适度的趣味可以提升体验，过度的炫技只会让人烦躁。

可读性是底线

无论设计多精美，效果多炫酷，有一条底线不能突破：文本必须可读。

WCAG标准要求文字和背景的对比度至少达到4.5:1。灰色文字配浅色背景可能很好看，但如果对比度不足，视力不佳的用户就看不清楚。

字体加载也要考虑性能。使用font-display:swap可以避免FOIT（不可见文本闪烁），让文字在自定义字体加载完成前先用后备字体显示。

结语

朋友听完我分析他博客的排版问题，回去改了一通：字体换成14px的思源黑体，行高设1.6，段落之间加了间距，标题适当放大并加了字间距。

一周后他发来消息：“阅读时长提升了将近一倍，还有人留言说读我的文章不累了。”

文字的力量，不仅在于你写了什么，更在于读者能不能舒服地读完。而那些让阅读更舒服的细节，往往就藏在排版里。