好的网站不在于网页的眩目多彩,而在于信息的流量和浏览者的视觉感受。小小的文字在不同的设计师手中会演绎成不同的艺术乐章。作为网页设计师,必须下工夫做好网页文本的排版设计,希望下面介绍的网页文本编排秘招能给大家一点启示。
示例图片
本文主要介绍在网站设计过程中文本排版应注意的基本问题和常规解决方法。
不合理的网页文本排版会对浏览者的视力产生消极的影响,不亚于庸俗的网页内容对于浏览者心灵的毒害。设计师要避免这样的问题出现,其实也很简单,记住5要素:字体大小、字间距离、行内字数、行间距离和段落距离。
1.字体大小标准正文字体大小一般为9pt(点数)或12px(像素)。由于显示器屏幕越来越大,同一字体大小设置会比以前显示得小,现在有些网页正文字体大小设计趋向增大,可以在这个基础上增加2个单位,但不能超过16像素,否则就会觉得太大,显得版面内容太空。
在网页正文中适合视觉阅读的字体大小为12pt,但由于在一个页面中需要安排的内容较多,通常采用9pt,所以建议根据个人网页内容而设定。
较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字体容易产生整体感和精致感,但可读性较差。
2.字间距离正文字距一般保持正常即可,即为0em(字体高度),不要超过1em,否则就显得不连贯。
3.行内字数行内字数一般根据版面大小而定,建议正字数保持在40个字左右为宜。
4.行间距离正文行距一般设为1.6em(字体高度)左右,正常范围为1.2-2em(字体高度)。不宜太小,否则会挤在一起,无法识别;太大就容易产生断行现象。
行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。这主要是因为适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。
除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独具匠心。
5.段落距离正文段距一般可设为1em(字体高度),即相当于空一行,由于在CSS样式表中没有直接的段距设置,可通过设置margin(边距)、padding(填充)属性来实现。
1.阅后如果喜欢,不妨点赞、评论和关注一下。
2.如果喜欢玩软件,请关注本头条号阅读相关文章。
3.在学习中有什么问题,欢迎与我沟通交流,今日头条号搜索:微课传媒,我在这里等你哟!
,