10个排版技巧可以提高网站的可读性
10个排版技巧可以提高网站的可读性
操作方法
- 01
1、改正行高 最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须遵守文本字体大小来设定行高。一般来说,在设置文本行高的时辰,我经常在字体大小的根蒂根基上加上7个像素(对12-17像素的字体而言)body{font-size:14px;line-height:21px; /* 14px + 7px */}
- 02
2、改正题目margin值 另一个常见的错误是题目四周不正确的margin值。题目其实是与它下面的段落是相接洽关系的,而不仅仅是两个段落的分割符。这就是为什么题目标margin-top比margin-bottom要宽。
- 03
3、不要应用过多的字体 为了确保可读性和专业性,你的网页上不该应用跨越3种字体。应用过多的字体会干扰你的用户并且让你的网站看起来很乱。相反,较少的字体让你的网站显得干净易读。你可以题目应用一种字体,正文应用一种字体,最后 logo或副题目应用别的的字体。
- 04
4、代码项目组应用等宽字体 若是你是一位开辟者(就像大项目组读这篇博客的人)你可能想贴一些代码在你的博客里。若是这样,请应用等宽字体。那么,什么是等宽字体?它就是字母和字符占雷同程度宽度的字体。
- 05
5、只给链接的文本加下划线 浏览器用在链接的默认样式一向是蓝色文本加下划线。固然这个蓝色经常被改成别的的色彩,但下划线一向被当做是链接的常规样式。这就是为什么除了链接你不要给其他的器材加下划线的原因。不然,这可能对你的用户造成很大的困惑。
- 06
6、存眷对比 即使你的网站有很好的排版了,另一个须要重视的是对比。若是你的页面背景是中灰色,那么不要应用深灰色的文本,不然你的内容很丢脸的,尤其是对一些年数大的或视力差的人。总之,除非你的网站是关于黑客、黑帽搜刮引擎优化或哥特摇滚的,不然你应当应用淡色背景和深色字体,清楚的对比度增长你网站的可读性。
- 07
7、创建样式库 让你的网站产生视觉震动的一个简单高效的办法是给特别的页面创建特别的样式。例如,创建一个.warning的CSS类来向 你的用户显示“警告”。
- 08
8、大胆留白 我认为最重要的排版技巧之一是“大胆留白”。留白是指空白区或没有应用的空间,它会使你的设计整洁而专业。很多人喜好苹果网站的原因是:它尽管简单但很精细,并且有很多留白。
- 09
9、按级别来分列题目和文本 为了增长可读性,给题目、介绍段落和常规文本创建标签层级是很重要的,也许你的用户可以看清你的文章布局并能很快的找到他们感爱好的项目组。
- 10
10、正确应用标点符号 若是你想提拔你的排版程度不容忽视的一点是正确应用标点符号。例如,引号经常用双撇符号代替。