网页设计必备-常用到的字体规范

网页也叫做超级文本,既然是超级文本,就会涉及到文字,图片的排版,而文字作为信息呈现的主体,甚是重要。今天就给大家分享几个字体规范,即使你从来没做过网页设计,也会做出符合业界规范,排版好看的网站。

1.行间距

1倍    1.2倍     1.5倍    1.8倍   2倍

这是一个经验值,我最常采用的行间距是1.5倍,不同的产品对这个值要求可能不同。

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

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

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

2.字体

第一类:系统默认字体

不同的浏览器,会有不同的默认字体,当然也可以在网站中我们自己去设置,不过要考虑的一个问题是,你选择的字体,你的用户电脑中是否安装,如果没有,那么就会浏览器换成默认字体。常用默认字体有哪些呢?

中文:宋体,微软雅黑,华文黑体 黑体(无状态)

宋体:

Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。

微软雅黑:

Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。

华文细黑:

Mac下的默认中文。

英文:helvetica  arial

Helvetica: 

被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。

Arial: 

Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常。

以上这些作为系统字体,可以应用在网站中标题,正文需要呈现大量信息的地方

第二类:图片字体

图片字体是网站中,一些banner,海报上面呈现信息内容的字体,取决于视觉设计师做的效果图,可以理解为一张图片,不受浏览器默认字体影响,唯一要注意的就是,字体的气质和文案内容是否吻合,是否美观,是否收费。

3.字号

正文:

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

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

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

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

标题:

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

文字边缘    锐利?浑厚?无?平滑?这些怎么选择

首先要知道一点,“无,锐利,犀利、浑厚、平滑”,都是指文字边缘的处理。

说白了这种形式就是为了在视觉上产生良好体验,加了“羽化”效果。

具体在设计中,我们应该如何做出选择?简单的来说12px以下,18px以上可以选择锐利或者平滑这样没有锯齿,其余可以选择无。微软雅黑 字体边缘选择window或者window LCD 其他字体的话基本上用window或者window LCD没什么问题。

分享到: 新浪微博 微信 QQ好友 QQ空间 豆瓣

相关新闻

联系我们

155-0755-1234

在线咨询:点击这里给我发消息

邮件:b@xshd.net

工作时间:周一至周五,9:30-18:30,节假日休息