电子邮箱

密码

安全问题

注册 忘记密码?
威景文化公众号
用排版技巧提升你网站的可读性
来源: | 作者:sfeweb | 发布时间: 2010-07-28 | 9920 次浏览 | 分享到:
用排版技巧可以使得页面看起来更美观,更简洁,更有条例,视觉享受会好很多自然愿意读下去的人就多了。
用排版技巧可以使得页面看起来更美观,更简洁,更有条例,视觉享受会好很多自然愿意读下去的人就多了。

1、纠正行高
最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须按照文本字体大小来设定行高。

一般来说,在设置文本行高的时候,我经常在字体大小的基础上加上7个像素(对12-17像素的字体而言)

body{

font-size:14px;

line-height:21px; /* 14px + 7px */

}

排版在网页设计中经常被忽略。其实这是很傻逼的,因为注重网页排版确实可以提高你的网页设计水平和可读性。下面,我列出了10个非常有用的排版技巧让你的网站看起来更好。


2、纠正标题margin值

另外一个常见的错误是标题周围不正确的margin值。标题其实是与它下面的段落是相关联的,而不仅仅是两个段落的分 割符。这就是为什么标题的margin-top比margin-bottom要宽。


3、不要使用过多的字体

为了确保可读性和专业性,你的网页上不应该使用超过3种字体。使用过多的字体会干扰你的用户而且让你的网站看起 来很乱。相反,较少的字体让你的网站显得干净易读。你可以标题使用一种字体,正文使用一种字体,最后 logo或副标题使用另外的字体。威景文化的宗旨是发扬传统文化,所以选择了宋体。当然我们并不封闭,也会传播西方文化,所以有些地方用了微软雅黑字体。


4、代码部分使用等宽字体

如果你是一位开发者(就像大部分读这篇博客的人)你可能想贴一些代码在你的博客里。如果是这样,请使用等宽字体。 那么,什么是等宽字体?它就是字母和字符占相同水平宽度的字体。

那么在网站的代码段你应该使用哪种字体呢? 到目前为止 Courier字体是最流行的,那么尝试一下最新的一些字体像 Consolas或 Monaco怎么样呢?那你一定要看看这里咯。这里


5、关注对比

即使你的网站有很好的排版了,另一个需要注意的是对比。如果你的页面背景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,否则你的内容很难看清,尤其是对一些年纪比较大的或视力差的人。

总之,除非你的网站是关于黑客、黑帽seo或哥特摇滚的,不然你应该使用浅色背景和深色字体来保证清晰的对比度增加你网站的可读性。


6、只给链接的文本加下划线

在我上网的12年中,浏览器用在链接的默认样式一直是蓝色文本加下划线。虽然这个蓝色经常被改成另外的颜色,但下划线一直被当做是链接的常规样式。这就是为什么除了链接你不要给其他的东西加上下划线的原因。否则,这可能对你的用户造成很大的困惑。