欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

网页设计中,如何让字体和图片搭配得更加好看

发布时间:2017:10:04 14:04:12 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1459个文字,预计阅读时间4分钟
导语
网页设计中,如何让字体和图片搭配得更加好看,海淘科技:有人说,中文网页的设计其实没有字体设计这一环节,因为在网页中能用到的中文字体非常有限,能用的也只有黑体、

网页设计中,如何让字体和图片搭配得更加好看,广州智唯网络:有人说,中文网页的设计其实没有字体设计这一环节,因为在网页中能用到的中文字体非常有限,能用的也只有黑体、宋体、微软雅黑等,这给中文网页的美感带来了折损。相比英文对字体的斟酌,网页上的中文字体显得太随意。

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

认识网页设计中的“字”

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

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

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

下面这个设计中所使用的字体就经过了一定的设计,字体更换并不十分容易。新手可以来这篇文章学一下基础技巧:《创意字体有妙招!教你四招晋级字体达人》


网页设计中,如何让字体和图片搭配得更加好看

这里所谓的与图片的搭配,也是指的这类可以经过设计的文字。

字形的观察

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

在挑选字体之前,首先观察图片里的形态特征。如果配图是以插画的方式呈现,那么插画里的风格细节,以及此类风格所表达出的年代感和空间氛围,都提供给你挑选与其所搭配字体的依据。比如英文中的无衬线体通常较为现代,而衬线体较为古典。下面的页面中的配图经过曲线造型,因此,与此搭配的文字采用了Adelle无衬线体,可以看出字体中的圆弧处理和配图中曲线的流转造型相呼应。


网页设计中,如何让字体和图片搭配得更加好看

如下设计里的配图都是零散的矩形,因此与此相应采用的字体为graphik,这个字体的特点也是表现出非常清晰的几何边缘。


网页设计中,如何让字体和图片搭配得更加好看

以上的字形所带来的形态特征与配图相呼应即是一个能让图文实现完美搭配的方式之一,此外,我们知道一些特殊的风格化字体也能表达出特别的氛围。例如下图中的机器看上去非常有80年代的机械感,而这种造型也营造一种技术世界里的怀旧感,因此像素文字最适合与此相搭配。


网页设计中,如何让字体和图片搭配得更加好看

从这几款英文字体的实例图文配中,我们需要配以对“形”的观察解构能力。也同时需要对字体所承载的风格特征作出一定的归类。非但英文需要精挑细选,中文也需要认真的斟酌,而不能以期待偶遇一款好看的字体,以好看为目的进行设计,最终结果都是失败之作。字体还可以经过一定的设计,,在原有的字体基础上进行一定的“变形”,这当然就更不能频繁更换。根据主题而进行一定的“微调”,让氛围表达得更加丰满立体。

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


网页设计中,如何让字体和图片搭配得更加好看

字距和行距

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

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:【2016年最好的网页设计之字体排版和简约风格】

下一篇:HTML5 动效的常见制作方法

  • 18886 文章总数
  • 2256486访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信