1. 首页
  2. 网页设计
  3. 正文

网页设计中使字体和图片更好匹配的技巧

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

  当然,这种说法在某种程度上是正确的,但我们应该从另一个角度来看。中文网页中的字体确实仅限于这些字体,但并不代表中文网页没有字体设计。

  理解网页设计中的“词”

  首先,我们简单地将网页中的文字划分为可替换和不可替换的部分。

  可替换词是可以通过后台管理进行编辑的词,如博文、产品描述等。网页制作过程中设置了不可替代的字符。后台管理不为字符提供编辑条件,只能通过网页代码进行修改,如导航、Banner等。不可替换的文字完全不能修改,但是修改一次会花费一定的金额,所以修改间隔,比如导航修改,需要经过代码,Banner中文字的修改也需要重新设计Banner图片。

  备选字符只能使用网页允许的给定字体,因此中文字体的选择范围较窄。然而,不可替代的字符可以通过图片等来显示。并制作成透明背景的图片。这时字体的使用和排版都比较灵活,设计师会有足够的创作自由。

  下面设计使用的字体都有一定的设计,字体替换不是很容易。


  这里所谓的带图搭配也是指这种可以设计的人物。

  字形观察

  首先,字体是图形,然后是承载信息的文本。因此,在选择与图片相匹配的字体时,需要重点考虑文字的形态特征是否与图片相协调。

  在选择字体之前,首先要观察图片中的形态特征。如果插图以插图的形式呈现,那么插图中的风格细节,以及这种风格所表达的时空氛围感,都可以为你选择与之搭配的字体提供依据。例如,英语中的无衬线通常更现代,而衬线则更古典。

  下一页的地图是用曲线建模的。因此,匹配文本采用Adelle无衬线字体。可以看出,字体中的弧线处理与地图中的曲线流建模相呼应。


  下面设计的图纸是分散的矩形,所以对应使用的字体是graphik,也显示出非常清晰的几何边缘。


  上述字形带来的形态特征与图片的匹配是使图文完美匹配的途径之一。此外,我们知道一些特殊的风格化字体也可以表达出一种特殊的氛围。

  比如下图中的机器在80年代看起来非常机械,这种造型也营造出了技术世界的怀旧感,所以像素文字最适合与此搭配。


  从这些英文字体的图形匹配的例子来看,我们需要观察和解构“形”的能力。同时,还需要对字体所承载的风格特征进行分类。英语不仅要精挑细选,中文也要慎重考虑,而不是以期待遇到漂亮字体为目的进行设计,最后的结果是失败。

  字体也可以在原有字体的基础上进行设计和“变形”,当然不能频繁改动。根据主题做一些“微调”,让气氛更加饱满立体。

  比如填充圆字母的空心部分,增加了一种可爱感,也非常兼容有图片的角色形象。


  字间距和行距

  用你敏锐的设计师的眼睛观察字形,区分不同字体的特点,是你选择较大字体时需要的能力。所以非常适合第一张图片,Banner等。其中文本需要显示为图片。我们的字体可以显示在段落中。这时,形状的特征逐渐淡化,我们更注重字与字之间的关系,即字间距。

  一般来说,字距的选择总是由字体本身及其与空间的关系决定的。字距较小时,传达出紧凑感,而宽松的字距可以表达出轻松感。

  比如大规模显示字体之间的距离总是很近,因为字体本身已经占据了足够的空间,如果在字体之间增加更多的空间,整个空间就会被填满。所以我们也可以说,字距是根据整个空间来调整确定的。同时画面显示更加集中,所有箭头真的是“千夫所指”,字间距缩小,有轻微的集中感。


  相对较小的字体略显轻松闲适,与之相匹配的画面也是一堆木头,与木匠的自然舒适相联系。


  它也适用于汉语世界。但不同的是,中文字体之间的距离应该更远,以保持单一字体的独特显示。因为汉语中的每一个字都可以看作是具有一定意境的画面,所以保持字距是汉语展示中保持美感的关键。

  当字体垂直显示时,上下字距应该加宽。这是因为我们人类的眼睛对于上下顺序的阅读习惯并不熟悉,如果字间距比较近,很容易形成字与字之间的视觉粘连。行距不同。检查行距时,字体变成了段落,出现在一段中的字体就是段落。你应该注意整个段落的灰度值。所谓灰度值就是字体的密度。

  大行距,像大字距一样,可以传达紧凑和轻松的感觉。同时,行距还与字体的颜色、字距、字号和最终形状有关。英文行距可以是标准比例尺的1.5倍,但是,所有规则都取决于条件。如果在特殊场合,仍然可以选择更大或更小的行距进行显示。

  这一段的字体排列符合画面传达的儿童教育成长的主题。字体圆润,间距宽松,显示出轻松的氛围。字体本身采用与LOGO相同的颜色,比黑色字体更有意思。

  附言

  明确字体的字间距所创造的密度,行距会带来段落的灰色几何。配合字体本身的显示形式,可以更好地选择匹配的图片。对字体有更多的了解,对不同风格字体的形状有一个大概的了解,这样在使用的时候就不会到处瞎找合适的字体了。通常对于字体的积累是极其重要的。记得给自己打造一个字体,这样在图文匹配的时候就可以得心应手了。

    延伸阅读

  • 如何才能成为一名专业的网页设计师?

    一个专业网站设计,自然需要找到专业的设计师来对网站进行设计,这样才能设计出让企业满意的网站,对网站的后期运营也是很有利的。可是作为一名专业的网站设计师,是需要满足一些条件的。到...

  • 2020年企业网页设计模板的流行趋势

    在设计界有个名言是“时尚总是轮回的”,这句话同样适用于企业网页设计方面,经历过了扁平化设计、卡片式设计以及质感设计之后,你知道在2020年又流行的是什么风格的企业网页设计模板吗...

  • 网页设计要多少钱?

    网页设计是现代互联网时代十分重要的一个环节,对于一个网站的成功与否起着至关重要的作用。那么,对于一个网站的设计,需要多少钱呢?这是许多人在进行网站建设时都会考虑的一个问题。接下...

  • 移动端网页设计

    移动端网页设计是指专门为移动设备(如手机、平板等)设计和开发的网页。随着智能手机的普及和移动互联网的发展,越来越多的用户使用移动设备上网,因此移动端网页设计愈发重要。在移动端网...

  • 深度探析:从初探到高级应用的页面网页设计

    在当今互联网盛行的时代,页面网页设计已成为一个关键的组成部分。无论是企业、机构,还是个人品牌,一个好的页面设计可以为其带来显著的优势。但页面网页设计并不仅仅是关于视觉元素,它是...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/6571.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();