联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

怎么设计网页的字体大小,最适合用户长时间阅读

Time: 2020-01-07


现在很多人都喜欢通过手机上的网页来查看自己想看的新闻或者是咨询,这时候网页上面字体的大小会影响用户看网页的时间,今天就一起来看看,怎么设计网页的字体大小。

可读性是一件大事,平时上网看书时,可能觉得网页中的字体太小,看久了眼睛会很不舒服,你为什么设计一个用户难以阅读的网站?诀窍是创建一个适合阅读的刻度。你要处理的文字尺寸越多,这就越重要。在逐行阅读时,太宽的字体让人难以集中精力; 太拥挤导致阅读时眼睛移动太快,没有一个很好的节奏。


怎么设计网页的字体大小

  网页也叫做超级文本,既然是超级文本,就会涉及到文字,图片的排版,而文字作为信息呈现的主体,甚是重要。现在很多设计师最开始做的是APP设计,最后应工作需要会做些网页相关的页面,直接采用APP图文的排版规则套用在网站上,因为终端设备,使用场景发生变化,会显得很不合适。其实这里面就是几个规则的事,今天就给大家分享,记住这几个规则,即使你之前连简单网页设计都没有做过,也照样能做出符合业界规范,排版好看的网站了。


adobe-fonts-social.jpg

(图片来自网络)


怎么设计网页的字体大小行间距

  1倍 1.2倍 1.5倍 1.8倍 2倍

  这是一个经验值,我个人最长采用的行间距是1.5倍,不同的产品对这个值要求可能不同,比如正文字号是16px,间距是24px

  对于中文来说,常用的字体大小12px、14px、16px、18px等偶数大小,在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

  在这里我加入了1倍间距,做设计的同学会感到奇怪,其实这个间距是针对word上面的正文排版,常用的是1倍-1.2倍。过大就不方便阅读。这是跟网页中行距的区别。

  段间距:行间距是段落间距的50%或者75%

  比如行间距采用32px,那么段落间距可以采用64px,或者43px


1.jpg

(图片来自网络)


  怎么设计网页的字体大小字号

  正文:

  10px-18px之间比较合适(中英文皆可,一般情况英文要比中文略小些)

  10px对于一些字体会显得过小,但是还是会有个别处选择用10px

  12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。

  在Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。

  标题:

  文字字号,18px,20px,24px,28px,32px,根据内容需要选用就好,并不是单数字号不可选,而是我个人喜好双数哈哈。为了让网页排版更好看,这里有个技巧,增加字号对比,在app界面设计中,标题与正文的文字差不会过大,以iPhone7尺寸为例,标题36号,文章正文可选34px,32px,30px。而在网页上极差关系可以做的更大,更夸张,标题30px正文12px,这种做法可以让网页众多的文字信息,分清层级主次,用户更有视觉焦点。这一原则,不适用在移动端。移动端我们可以通过颜色,字重,等其他方式来做极差关系。

2.jpg

(图片来自网络)


  网页的字体太大的话,一页可以显示的文字就会变少,但是字体太小的话,又会觉得眼睛很疲劳不愿意看。以上就是关于怎么设计网页的字体大小的相关内容。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开