首页 > 网页教程 > 设计分享 > 网页排版设计如何才能让页面文字阅读更舒适?

网页排版设计如何才能让页面文字阅读更舒适?

时间:2013-07-16    来源:百度MUX

上网在线阅读,是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面,有没有人抱怨过:“这样的页面还需要出效果图啊?”作为网页设计师的你是怎样处理这样的界面的?

如何改善页面设计,让文字阅读更舒适

  • 是习惯性的使用宋体字或者微软雅黑?
  • 是直接设为12px或者14px的字号?
  • 你有想过为什么要使用这种字体、字号吗?
  • 你有考虑过文字排布与阅读效率的关系吗?
  • 你的页面背景会影响到用户的浏览舒适度吗?

让我们从以下5个元素具体分析。

如何改善页面设计,让文字阅读更舒适

字体、字号

字体和字号这两个元素必须捏在一起说。

字体分为衬线体(serif)与非衬线体(sans serif)。简单的说,衬线体(serif)就是带有衬线的字体,笔画粗细不同并带有额外的装饰,开始和结尾有明显的笔触(如下图)。常用的英文衬线体有Times New Roman和Georgia,中文即是我们在windows下最常见的中易宋体。

与衬线体相反,无衬线装饰,笔画粗细无明显查差异的字体就是非衬线体(sans serif)。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体,中文有微软雅黑和mac下默认的中文-华文细黑。

如何改善页面设计,让文字阅读更舒适

在过去,普遍认为有笔触装饰的衬线体,可提高辨识度和阅读效率,更适合做为阅读的字体。多用于报纸、书籍等印刷品的正文。非衬线体饱满醒目,常用做标题或者用于较短的段落。

很长一段时间里,在互联网上我们会注意这样的一个现象,国外网站大部分以非衬线体为主,而中文网站基本就是宋体。其实不难理解,衬线字体笔画有粗细之分,很小字的情况下细笔画就被弱化,受限于电脑的分辨率,10-12px的衬线字体在显示器上是相当难辨认的(见下图);同字号的非衬线体笔画简洁而饱满,更适于做网页字体。windows下,中文宋体小字点阵的特性,12px、14px的字号显示仍然相当清晰美观,便于阅读。这也就是为什么大多网页设计制作人员容易机械性的选用特定字号或英文或中文的字体。

如今随着显示器越来越大,分辨率越来越高,经常会觉得看12px的文字有点吃力,做为设计师也会不自觉的开始大量使用14px的字体,而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用,对英文字体来讲,衬线体的高辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时,单线条大字总是看上去有些单薄不那么协调,特别是这款点阵字在ClearType(http://baike.baidu.com/view/755822.htm) 强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

让我们分别对比下中英文的衬线体与非衬线体在不同字号时的显示效果。

英文以Times和Verdanad为例,中文以宋体和微软雅黑为例。

如何改善页面设计,让文字阅读更舒适

相关推荐
二十款网页图文混排设计样式欣赏
如何掌握网页广告字体设计的技巧
网站的旗帜(Banner)广告条字体设计简析
移动终端全新界面设计语言“Metro”简析
85个优秀的超大字体网页设计欣赏
30款超棒的Photoshop文字特效制作图文教程
30个超炫的Photoshop字体创意设计教程
24个很漂亮用CSS3实现的文本效果演示及教程推荐
10个基于HTML5技术的字体设计应用演示网站
20款漂亮的欧美风格免费创意卷曲字体欣赏(附下载)
网站设计中BANNER(广告条)中的字体结构分析
无线移动终端APP的文字阅读体验设计分享
20个视觉效果令人惊叹Photoshop文字特效教程
15个运用创意印刷字体的网站欣赏
38个创意出彩的网页字体设计案例赏析
再也不怕选字体了!超全面的英文字体小结
字体设计教程:字体还能这么玩 聊聊文字的“性取向”
界面设计必备:全方位科普常用的字体规范
PS字体教程:教你打造闪闪发光的钻石字效
网站策划:Web的英文字体该如何选择?
网站字体设计教程:29个纤细字体的网站排版设计案例推荐
PS字体教程:创建一个极具个性化的人物文字特效
网页设计教程:用合适字号提升用户体验
UI设计字体与排版指南
16个简单实用的英文字体排版小TIPS分享
CSS酷站网页水平条经典设计欣赏
35套精美绚丽的创意酷站设计欣赏
30款富有表现力的网页图表设计欣赏
19楼UED分享专题第一屏的设计经验
网页设计中的构图技巧分享
让用户感觉很糟糕的网页设计之十大原因
圆形元素在网页设计中如何应用的25个案例
2011年网站设计的新趋势
8款效果超酷的jQuery动态Web布局以及制作方法
18个高光强质感风格网页欣赏及其表现手法总结

精彩推荐

热门教程