10 个改善网页可读性的实用排版技巧
最编程
2024-08-14 10:23:39
...
网页的排版问题常常被忽视。这挺遗憾的，如果你能改进你的网页排版，那么设计和可读性也就随之改进。在这篇文章中，介绍了10个非常有用的排版技巧，可以使你的网站看起来更好。
1. 设置正确的行高
最常见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度，所以它必须要根据字体大小进行设置。
2. 设置正确的标题间空白
另一个常见的错误是标题周围的空白。标题是与它下面的段落相关联的，它不是两个段落之间的分隔符。这就是为什么一个标题的上边缘空白应该比下边缘的空白宽。
3. 不要使用太多不同的字体
为了保证网页的可读性和专业性，你不应该使用超过3种不同的字体。使用太多的字体会给读者带来困扰，也会使你的页面看起来杂乱。
另一方面，使用更少的字体，使你的页面看起来整洁和易读。你可以让标题使用一种字体，正文使用一种字体，标语和副标题使用另一种字体。
4. 使用等宽字体来显示代码段
如果你是一个开发人员，你可能想把一些代码片段放在你的博客上。如果是这样，请使用等宽字体显示你的代码片段。那么，什么是等宽字体？这个字体的字母和每个字符占有相同数量的水平空间。
那么，在一个网站上应该用什么字体显示代码片段呢？Courier字体是目前最流行的，但是为什么不尝试使用目前最新的字体，如Consolas 或者 Monaco？如果你想选择更多的字体，你一定要看看 这里 。
5. 注意对比度
如果你的网站排版很好，那么另外一点要考虑的就是对比度。如果你的页面背景是灰色（#999999），那么不要使用深灰色的文本（#333333），否则你的内容可能难以辨认，尤其是老年人或者视力不好的人。
一般来说，如果你的网站是与黑客、黑帽SEO或哥特摇滚等有关，你应该使用浅色背景和深色的字体形成鲜明的对比，增强你的网站的可读性。
6. 保证有划线的文本可以链接
自从我12年前使用互联网开始，浏览器的默认链接格式是一个带下划线的蓝色字体文本。尽管蓝色常常会改变为其他颜色，下划线一直是公认的链接格式。这就是为什么有下划线的文本通常被认为是可以链接的，而不是其他的意思。否则，这将会给你的读者带来很大的困扰。
7. 创建一个样式库
让你的网站给读者带来视觉震撼的一个简单而有效的方法是为特定的用户创建特定的风格。例如，创建.warning CSS类向读者显示警告信息。
8. 标题和文本有层次感
为了提高网页的可读性，给标题、简介、段落和正文创建出层次感是非常重要的，这样你的文章非常形象的呈现给读者，他们会迅速找到感兴趣的部分。
9. 不要担忧页面有空白部分
我所知道的最好的排版建议之一是：“不要害怕页面有空白部分”。它可以使你的页面看上去整洁和专业。很多人都喜欢苹果的网站风格，原因是：网页虽然复杂精细，但页面简单并有大量的空白区域。
10. 使用正确的符号
1. 设置正确的行高
最常见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度，所以它必须要根据字体大小进行设置。
一般来说，当我设置文本行的高度时我总是再给字体大小增加7个像素的行间距（字体大小为12至15个像素）。
1 |
BODY { |
2 |
字体大小：14px;
|
3 |
行高：21px; / * 14px + 7px * /
|
4 |
} |
另一个常见的错误是标题周围的空白。标题是与它下面的段落相关联的，它不是两个段落之间的分隔符。这就是为什么一个标题的上边缘空白应该比下边缘的空白宽。
3. 不要使用太多不同的字体
为了保证网页的可读性和专业性，你不应该使用超过3种不同的字体。使用太多的字体会给读者带来困扰，也会使你的页面看起来杂乱。
另一方面，使用更少的字体，使你的页面看起来整洁和易读。你可以让标题使用一种字体，正文使用一种字体，标语和副标题使用另一种字体。
4. 使用等宽字体来显示代码段
如果你是一个开发人员，你可能想把一些代码片段放在你的博客上。如果是这样，请使用等宽字体显示你的代码片段。那么，什么是等宽字体？这个字体的字母和每个字符占有相同数量的水平空间。
那么，在一个网站上应该用什么字体显示代码片段呢？Courier字体是目前最流行的，但是为什么不尝试使用目前最新的字体，如Consolas 或者 Monaco？如果你想选择更多的字体，你一定要看看 这里 。
5. 注意对比度
如果你的网站排版很好，那么另外一点要考虑的就是对比度。如果你的页面背景是灰色（#999999），那么不要使用深灰色的文本（#333333），否则你的内容可能难以辨认，尤其是老年人或者视力不好的人。
一般来说，如果你的网站是与黑客、黑帽SEO或哥特摇滚等有关，你应该使用浅色背景和深色的字体形成鲜明的对比，增强你的网站的可读性。
6. 保证有划线的文本可以链接
自从我12年前使用互联网开始，浏览器的默认链接格式是一个带下划线的蓝色字体文本。尽管蓝色常常会改变为其他颜色，下划线一直是公认的链接格式。这就是为什么有下划线的文本通常被认为是可以链接的，而不是其他的意思。否则，这将会给你的读者带来很大的困扰。
7. 创建一个样式库
让你的网站给读者带来视觉震撼的一个简单而有效的方法是为特定的用户创建特定的风格。例如，创建.warning CSS类向读者显示警告信息。
8. 标题和文本有层次感
为了提高网页的可读性，给标题、简介、段落和正文创建出层次感是非常重要的，这样你的文章非常形象的呈现给读者，他们会迅速找到感兴趣的部分。
9. 不要担忧页面有空白部分
我所知道的最好的排版建议之一是：“不要害怕页面有空白部分”。它可以使你的页面看上去整洁和专业。很多人都喜欢苹果的网站风格，原因是：网页虽然复杂精细，但页面简单并有大量的空白区域。
10. 使用正确的符号
如果你正在寻找方法改善你的排版，很重要的一点是使用正确的符号。例如，可以使用双引号（“”）来代替角秒符号（""）。或者你也可以试试HTML字符编码 &s;ldquo; „ 。
英文原文：10 useful typography tips to improve your website readability
上一篇： 首位国际用户已成功登陆我的出海网站！