让网页设计中字体和图片搭配得更好看的技巧

有人说中文网页的设计没有字体设计，因为网页中可以使用的中文字体非常有限，只能使用黑体、宋体、微软雅黑等，这损害了中文网页的美感。与英语对字体的考虑相比，网页上的中文字体太随意了。当然，这种说法是正确的，但我们应该从另一个角度来看。中文网页中的字体确实局限于这些字体，但这并不意味着中文网页没有字体设计。

有人说中文网页的设计没有字体设计，因为网页中可以使用的中文字体非常有限，只能使用黑体、宋体、微软雅黑等，这损害了中文网页的美感。与英文对字体的考虑相比，网页上的中文字体太随意了。

当然，这种说法是正确的，但我们应该从另一个角度来看。中文网页中的字体确实局限于这些字体，但这并不意味着中文网页没有字体设计。

了解网页设计中的“字”

首先，我们简单地将网页中的文本分为两部分：可替换和不可替换。

可替代的文本是可以通过后台管理编辑的文本，如博客文章、产品描述等。不可替代的文本是在网页制作过程中设置的。后台管理不提供文本编辑条件，只能通过导航、banner等网页代码进行修改。不可替代的文本并非完全不可修改，但一次修改将花费一定的成本。因此，修改间隔时间，如导航修改需要代码，banner中的文本修改也需要重新设计bannner 图片。

可替代文本只能使用网页允许的给定字体，因此中文字体的选择面较窄。但是，不可替代的文本可以通过图片和其他方式显示，并将其制作成透明背景的图片。此时，字体的使用和排版是灵活的，设计师将有足够的创作自由。

在下面的设计中使用的字体经过了一定的设计，字体更换不是很容易。

这里所谓的图片搭配，也是指这种可以设计的文字。

字形的观察

字体首先是一个图形，然后是一个可以携带信息的文本。因此，当你选择一个字体来匹配图片时，你需要关注文本的形式特征是否与图片协调。

在选择字体之前，首先观察图片中的形式特征。如果图片以插图的形式呈现，那么插图中的风格细节，以及这种风格所表达的时代感和空间氛围，都为您提供了选择匹配字体的基础。例如，英语中的无衬线通常更现代，而衬线更古典。

下面页面中的图片是曲线形状的。因此，匹配的文本采用Adele无衬线体，可以看出字体中的弧处理与图片中曲线的流通形状相呼应。

下面设计中的图片都是分散的矩形，所以相应使用的字体是graphik，它也显示出非常清晰的几何边缘。

上述字体带来的形态特征与图片相呼应，是实现图片和文本完美匹配的方式之一。此外，我们知道一些特殊的风格字体也可以表达一种特殊的氛围。

例如，下图中的机器在20世纪80年代看起来非常机械，这种形状在技术世界中也创造了一种怀旧感，所以像素文本最适合搭配。

从这些英文字体的例子中，我们需要具备观察和解构“形状”的能力。同时，还需要对字体所承载的风格特征进行一定的分类。不仅英语需要仔细选择，中文也需要仔细考虑，而不是期待遇到一个好的字体，为了设计好，最终的结果是失败。

字体也可以在原始字体的基础上进行一定的“变形”，当然不能经常更换。根据主题进行一定的“微调”，使氛围更加丰满和三维。

例如，填充圆形字母的中空部分增加了可爱感，这也与图片中的角色形象非常匹配。

字距和行距

观察字体形状，用你敏锐的设计师的眼光来区分不同字体的特征，这是选择较大字体所需要的能力。因此，它非常适合在第一张图片、Banner和其他需要将文本制作成图片的情况下使用。当我们的字体形成段落时。此时，形状的特征逐渐消失，我们更加关注单词之间的关系，即字距。

一般来说，字距的选择总是根据字体本身及其与空间的关系来决定的。当字距较小时，它会传达一种紧凑感，而松散的字距可以表达一种放松感。

例如，大型显示字体之间的距离总是相互靠近，因为字体本身占据了足够的空间，如果在字体之间增加空间，整个空间就会被填满。因此，我们也可以说，字距是根据整个空间来调整和确定的。同时，图片也以更集中的方式显示，所有的箭头都是“人们指出的”，所以字距缩小，有点集中。

字体相对较小，略显放松和休闲，图片也是一堆木材，与木匠的自然舒适感有关。

它也适用于中国世界。然而，不同之处在于，中文字体的距离应该更远，以保持单个字体的独特显示。因为中文中的每一个单词都可以被视为一幅具有一定意境的图画，所以保持字距是保持中文展示美的关键。

当字体垂直显示时，应加宽上下字距。这是因为我们的眼睛不熟悉上下顺序的阅读习惯。如果字距较近，很容易形成单词之间的视觉粘连。

行距不同。当你检查行距时，字体已经变成段落，出现的字体是段落。你应该注意的是整个段落的灰度值。所谓灰度值，就是字体的密度。

同时，行距也与字体本身的颜色、字距、字体大小和字体的最终形式有关。英语行距可以是标准尺度的1.5倍，但所有的规则都依赖于条件，如果在特殊场合，仍然可以选择更大或更小的行距。

本段的字体安排与图片中传达的儿童教育成长主题相匹配，选择更圆形的字体，字距更宽松，反映了一种轻松的氛围。字体本身使用与标志相同的颜色，比黑色字体更有趣。

后记

澄清字体字距创造的密度，行距带来段落的灰度几何，结合字体本身的显示形式，您可以更好地选择相应的图片匹配。了解更多的字体，对不同风格的字体形式有一个大致的了解，在使用时不会匆忙盲目地找到合适的字体，通常字体的积累是非常重要的。记住为自己建立一个字体库，这样你就可以很容易地匹配图片和文本。