网站首页
手机版

如何让网页设计中的字体跟图片搭配的更好看

更新时间:2022-04-01 13:58:11作者:佚名

如何让网页设计中的字体跟图片搭配的更好看

  有人说,中文网页的设计其实没有字体设计这一环节,因为在网页中能用到的中文字体非常有限,能用的也只有黑体、宋体、微软雅黑等,这给中文网页的美感带来了折损。相比英文对字体的斟酌,网页上的中文字体显得太随意。

  

  当然,这种说法有一定的正确性,但我们应该换个角度看。中文的网页中的字体的确是局限在这几款字体中,但不代表中文网页就没有字体设计这一环节。

  

  认识网页设计中的“字”

  

  首先,我们简单将网页里的文字分为可替换和不可替换两个部分。

  

  可替换的文字也就是能通过后台管理进行编辑的文字,例如博客文章、产品说明等。不可替换的文字是在网页制作过程中所定下的,后台管理并不提供文字的编辑条件,通过网页代码才能修改,例如导航、Banner等。不可替换的文字并非完全不能修改,只是修改一次会耗费一定的成本,因此修改的间隔时长,比如导航的修改需要经过代码,而Banner里的文字的修改也需要重新设计Banner 图片。

  

  可替换的文字只能使用网页所允许给定的字体,因此中文字体的选择面较窄。但不可替换的文字则可以通过图片等方式展示,将其制作成透明背景的图片,这时,字体的使用和排版都是灵活的,设计师就会有足够的创作自由度。

  

  字形的观察

  

  字体首先是一种图形,然后再是可承载信息的文字,因此,当你挑选一款字体来搭配图片的时候,你需要集中去观察文字的形态特征是否和图片协调。

  

  在挑选字体之前,首先观察图片里的形态特征。如果配图是以插画的方式呈现,那么插画里的风格细节,以及此类风格所表达出的年代感和空间氛围,都提供给你挑选与其所搭配字体的依据。比如英文中的无衬线体通常较为现代,而衬线体较为古典。

  

  字体还可以经过一定的设计,在原有的字体基础上进行一定的“变形”,这当然就更不能频繁更换。根据主题而进行一定的“微调”,让氛围表达得更加丰满立体。

  

  如将圆圆的字母中空的部分填实增加了可爱感,与配图的角色形象也非常搭配。

  

  字距和行距

  

  观察字形,用你敏锐的设计师的眼光来区别不同字体的特征,这是挑选比较大的字体时需要具备的能力。因此,非常适合用在首图、Banner等需要将文字做成图片所展示的情况下。而我们的字体还有形成段落进行展示的时候。这时,形的特征逐渐隐去,我们更多关注字与字之间的关系,即字距。

  

  一般情况下,字距的选择总是根据字体本身以及其和空间的关系来决定,当字距较小时,传递出一种紧凑感,而字距宽松又能表达出一种轻松感。

  

  比如大型展示字体的距离总是以相互靠近为佳,因为字体本身已经占据了足够的空间,如果再在字体间增加空间就会让整个空间被填满。因此,我们也可以说,字距根据整个空间进行调整确定。与此同时,配图也是以较为集中感的方式展示,所有箭头真是“万夫所指”,因此字距缩小,略有集中感。

  

  而相对较小的字体,略带轻松和闲适,与此搭配的图片也是一堆木材,联想到木匠的自然惬意感。

  

  在中文的世界里同样适用,然而不同的是,中文字体的距离应该更加远一点,以保持单个字体的独特展示度。因为中文的每个单字都可以看成一幅图画,拥有一定的意境,因此,保持字距是中文展示能保持美感的一个关键。

  

  当字体变为垂直展示时,更应该拉宽上下字距。这是由于我们人眼并不熟悉上下顺序的阅读习惯,如果字距较近则容易形成字与字的视觉粘连。

  

  而行距则不同,当你考察行距时,这时字体已经变成了段落,成片出现的字体则是段落,你要关注的就应该是整个段落的灰度值。所谓灰度值就是字体的疏密。

  

  较大的行距和较大的字距一样都能传递出紧凑和轻松的不同之感,同时,行距也关联着字体本身的色彩、字距以及字体大小以及字体最终的形态。英文的行距可以以1.5倍作为标准尺度,然而一切规则都是依靠条件而存在,如果在特殊的场合,依然可以选用更大或更小的行距展示。

  

  后记

  

  厘清字体的字距所创造的疏密,行距带来段落的灰度几何,配合字体本身的展示形态,你才能更好的选择与此相称的配图。多了解字体,对不同风格的字体的形态有大致的了解,在使用时才不会手忙脚乱去盲目找寻适合的字体,平时对字形的积累极为重要。记得为自己建立一个字库,才会在图文搭配时得心应手。


本文标签: 网页设计  建站  百科  好看  

为您推荐

word如何进行全文分栏和某段落分栏 word如何进行全文分栏和某段落分栏的区别

word如何进行全文分栏和某段落分栏 在Word2003中,我们可以对一篇文章进行分栏设置,分两栏,分三栏都可以自己设置.像我们平常看到的报纸.公告.卡片.海报

2024-09-12 00:09

word2010大纲怎么显示(word文档显示大纲从哪里按出来)

word2010大纲怎么显示(word2010如何使用大纲视图) 有些时候我们在网上下载的一些word文档太长了,我们其实可以显示大纲,看清楚每一节是否有自己需

2024-09-12 00:08

七种常见的Word打印设置技巧 七种常见的word打印设置技巧视频

七种常见的Word打印设置技巧 七种常见的Word打印设置技巧 1.打印指定页码 有些时候,我们只希望打印文档中的某些页码,只要点击菜单命令"文件→打印",在打

2024-09-12 00:08

四种方框内打钩符号的简易方法 四种方框内打钩符号的简易方法是什么

四种方框内打钩符号的简易方法 如何在Word方框里打钩? 四种方框内打钩符号的简易方法   如何在Word方框里打钩? 一.在方框里打钩的方法一 利用带圈数字来

2024-09-12 00:08

Word文档中对表格中数据进行计算的方法

Word文档中对表格中数据进行计算的方法 Word文档中对表格中数据进行计算的方法 1.在表格的最后一个单元格中单击放置插入点光标,然后在"表格工具-布局"选项

2024-09-12 00:07

怎么关闭Word文档中自动添加项目编号(怎么关闭word文档中自动添加项目编号显示)

怎么关闭Word文档中自动添加项目编号 怎么关闭Word文档中自动添加项目编号 1.启动Word 2013,打开"Word选项"对话框,在左侧选择"校对"选项,

2024-09-12 00:07