网页设计的字体和字号(网页设计字体设计原则)

平时逛淘宝的时候，是不是觉得一些大牌的海报或者店铺装修很大气，文字排版看着给人很舒服的感觉。比如下面这张

文字排版给人感觉是不是干净利落，简单明了？

而大多数像我这样的新手美工工作中做出来的文字排版往往是这样的

下面会从几个方面来和大家分享一下电商设计中的字体排版问题。

字体风格确定

字体也是有性格特征的，每一种字体都有其独特的风格特性。

比如楷体会比较复古一点，黑体会显得现代一点；

粗体字显得男性化，有力量一点，细体字会显得女性化柔美一点等等。

这个需要大家自己去总结发现。做任何图片之前，先想一下自己大概想要做成什么感觉的？是可爱一点的还是阳刚一点的？是复古一点的还是时尚一点的？要学会根据产品身上特有的气质或者海报所要体现的风格类型来来选择相应的字体。

比如做童装类目，就可以选择稍微可爱一点的字体，做女装类目，就可以选择相对纤细柔美一点的字体，等等

字体选择不超过3种

一般来说，同一张海报或者同一个详情页面中字体的种类不要超过3种，不然给人感觉就很糟糕

2种字体，标题用的一种字体，正文部份用的同一种字体，给人感觉就很干净大气

字间距大小要合适

一般来说字间距越大，给人感觉越轻松越有呼吸感；字间距越小给人感觉越有力量感

黄色大标题部份，字间距是不是很紧凑，给人的感觉就很有力道，促销的感觉就有了。上面的小文字部份只是起个装饰作用，字间距刻意设置得很大，营造了一种轻松透气的感觉。

但这里要说明的是，平常做详情时正文部份的内容，字间距不宜设置得过大，不然会不利于阅读，特别是当行间距也很大的时候。

行间距大小要适中

合适的字间距很重要，合适的行间距更为重要，一般来说行间距略大于字间距会更便于阅读一些。

行间距和字间距差不多，所以阅读起来还是有些困难的，

把行间距稍微拉大一些，阅读起来是不是轻松多了。

字号选择、倍率关系

字号也就是字体大小，这个也很重要，一般做电商设计的话字号大小的选择还要分手机端和电脑端。

如果说手机详情不单独做，直接用电脑端的详情来生成的话，字号最小要选22点。我一般选的24点，这样生成手机端的详情字体才不会太小。

但相同字号的不同字体，它大小也是不一样的，具体设置的话要根据实际情况做适当调整。

另外要提醒大家的是详情页中的所有标题栏字号最好都设成一致的，正文部份的字号也设成一致的，标题字号和正文的字号都不要忽大忽小！不然就会不耐看了，给人不整，很LOW的感觉！

字体的主次关系

同一种字体怎样区分主次呢？可以从大小，粗细，颜色，虚实，等等方面来体现，而这几种还可以混搭，同一种字体，粗细不同，颜色也不同；同一种字体粗细桢，大小不同.......，可以说是能组合出N种拉开字体主次关系的方法！

大家能区分出上图中4组文字的主次关系吗？！不但要能区分出来，平时工作中字体排版时也要运用起来，文字的层次关系出来了，海报的档次又会上升一个层级！

哪个是主，哪个是次？又分别是怎么体现的，怎么拉开层次的？是不是很明了了！如果上图中的文字都用的相同的字号，相同的颜色，相同的字间距，字体的倍率关系也没有考虑进来，还会有这么耐看吗？肯定不会，比如下面这种字体排版就很平淡无奇了，一眼看过去没有重点！

当然一眼看过去全是重点肯定也不行，重点只能有一个，次重点也只能有一个，其它的装饰性的文字都可以弱化掉！