您现在的位置:首页 > 资讯中心>网站建设知识 >

网站建设时字体编排的技巧

发表于:2018-10-24 阅读:5582 关键词: 网站建设 字体

  在网站建设中,字体的处理其实和图形、版式、颜色的处理一样。字体的编排合理、漂亮,可以给人以赏心悦目的感觉,为网站做到画龙点睛的作用。字体编排合理,也会吸引读者在网站阅读更多的内容。深圳网站建设公司万狼科技小编来给大家介绍下网站建设中字体的编排技巧。


  1.文字图形化

  文字图形化就是将文字用图片的形式来表现,这种形式在页面的子栏目里面最为常用,因为它具有突出,同时又美化了页面,使页面更加人性化加强了视觉效果,这是文字无法达到的。对于通用性的网站弊端就是扩展性不强。

图形化的文字

  2.强调文字

  如果将个别文字作为页面的诉求重点,则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果,使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下也可以使用文字图形化。

  3.合理设置行文本的长度

  我们随手拿起一本书或者一份报纸,数一数每行的文字,一般情况下都不会超过40个汉字。据国外研究所调查表明:当行文本太短时,用户眼睛回转的频率增大了,阅读节奏容易被打破。而当行文本太长时,又容易引起用户阅读疲劳(专注力下降),从而导致其丧失阅读欲望。

  因此,如果想要给用户一个良好的阅读体验,网页中的行文本长度最好控制在60个字符(约30个汉字)左右,这可以提高文本的可读性。另外,如果是移动设备的话,行文本长度则以30-40个字符为最佳。

设置文本长度

  4.合理的文字间距

  通过设置间距,我们就可以控制文字的密度。如果每行间距太小,与文字过长一样,读者浏览文章时也容易串行;如果行距过宽,阅读时就会感觉文章不够连贯。

  间距没有固定的值,通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示,不管是中文网站还是英文网站,大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例,字号16px的字,行距就是25.6px。

  1.5-1.8em的行距的确是非常适于阅读的文字密度。

  关于段距,我们要考虑一下具体实际情况。比如文章篇幅较短,就不需要很宽的段距;如果文章篇幅很长,特别是那些偏学术的比较枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘息和思考的机会,且使文章更有层次和可读性。

  5.使用标准字体

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

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

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

  另外,由于浏览器的“限制”,不是所有的字体都能与所有浏览器“兼容”,即有些能在Google Chrome中显示的字体,也许到了火狐上就会显示出错,这样容易影响到用户的阅读体验。最保守的做法就是采用系统默认字体:比如 Arial、Calibri、Trebuchet等。

标准字体示例

  6.使用一种字体

  正常情况下,页面中采用一种字体就好了,因为当一个页面中使用的字体超过3 种时,会给用户带来“不专业”、“没有权威性”、“没有层次结构”之类的感觉。如果需要选用两种字体的话,但也应该尽量把字体间的差异性降到最低,在视觉体验上尽量和谐。

  7.字体大小的选择

  网站建设中字体大小的选择是用户体验中的一个重要部分,过大过小都会影响用户体验。在制作网页的时候,我们可以根据文字在网页中的不同位置和不同等级来分别使用不同大小的字体。相对来说,内容标题可以使用较大的字体,而内容小标题可以采用次一号的字体,而内容正文则可以采用正常大小的字体。

  对于不同的分辨率,不同的显示器尺寸,不同的DPI,乃至不同的浏览器设置,都会对最终在浏览器上展现出来的文字大小带来影响。最好的方式还是在网页制作时根据用户的分辨率给用户一个比较美观的默认字体大小。大多数专业的网站建设人员,都会习惯性的使用某一字体大小,比如14px或12px,因为12px和14px基本已经成了大多数网站字体的标准大小,而11px、13px、15px等大小则涉及到一个锯齿的问题,特别是在早期的显示器中,往往不能很好的处理文字的锯齿问题,使用单数的像素,极有可能造成锯齿,所以通常采用偶数的大小。

字体大小对照表

  万狼科技是一家技术开发型的网站建设公司,致力于商城网站建设、高端品牌网站建设、营销型网站建设、APP开发、微信公众平台开发等各种建站、开发领域,为企业在互联网的发展提供强大的建站、开发技术支持以及优质的服务。