网页中这 10 种字体的运用方式,不会让人觉得 Low

逻辑玄冰探
• 阅读 1701
简评:字体特效非常多,有目的地选取合理的特效是让它们发挥效果的诀窍所在。好的字体排版是不需要辅助就能被识别的,否则这个设计是失败的。

本文转载自 UISDC,如需转载请联系他们。

对于设计师而言,在日常的平面和 UI设计中,给字体增加特效一直都是一件恼人的事情。客户提出的浮雕特效或者大阴影的需求,但是直接按照要求来设计可能会毁掉整个设计。更多时候,你需要的是一些相对优雅但是又足够吸引人的字体效果,让整个设计项目的走向更加合理。

字体特效非常多,有目的地选取合理的特效是让它们发挥效果的诀窍所在。好的字体排版是不需要辅助就能被识别的,否则这个设计是失败的。

值得一提的是,最好的字体特效往往是润物细无声的,近乎无形,但是对于整个设计在视觉和质感上都有所提升。

1. 有目的地运用阴影效果

无论你使用什么软件做设计,都不要使用默认的阴影效果,这个经验里面包含了太多血的教训。

正如前文所说,好的阴影特效有着较高的融入度,几乎是「隐形」的。在部署阴影特效的时候,不要为了创建而创建,而是要借助阴影来构建前景文字和背景之间的层次感,这种对比恰到好处即可。

这种「隐形」的阴影设计对于设计师而言通常是不难识别出来的,不过普通用户通常不会太注意到它们。这些柔和的阴影,功能只是用来营造对比。

相对较为硬朗的阴影,会给人以更加复古的感觉,在较粗的、笔触平整的字体背后使用这样的阴影效果会比较好。

2. 使用双重曝光效果

双重曝光效果在网页设计和平面设计当中是非常流行的设计技巧。在文本字体中使用双重曝光效果能够让它看起来复杂而有趣,尤其是在双重曝光的图片选取得比较精妙的时候,效果看起来会非常惊艳。

3. 描边特效

对于较粗的字体使用描边特效,往往能够让字体的轮廓更加清晰,也增加了整体复古的感觉。在上面的案例当中,设计师就借助霓虹色字体和描边特效创造出了独特的氛围。

4. 使用多彩字体

多彩字体本身就包含有多样的色彩属性,甚至含有阴影、渐变、透明度甚至纹理。你可以使用多彩字体来让文本拥有远超传统字体的时髦值。

当大量的色彩共同来构成一套字体的时候,字体本身的视觉吸引力就已经达到极致了。现如今明亮大胆的字体是一种设计趋势,这样的配色本身并不会冒犯用户,因为用户正在越来越适应这样的设计。

当然,在色彩的搭配上需要协调且有目的性。

5. 适当地融入一些动效

从来都没有规定文本必须是静止的,在网页的文本中加入动效能够提升它的视觉吸引力。

不过,在为文本添加动效的时候,尤其要注意保持文本字体的可读性:

运动轨迹应该是有意识地设计的;
字母的运动不应该太快;
滚动或者自动播放的文本应该可以被停止;
无论屏幕大小,文本内容应该始终保持可读。

6. 模仿一些标志性的元素和特征

这两年的 Netflix 的热门美剧《怪奇物语》中,就模仿80年代经典的电影,融入了大量当时的元素,创造出让许多影迷共鸣的设计。

最典型的就是霓虹色的运用,充满80年代风情的 LOGO 成为了该剧最具识别度的元素。这种模仿的基础在于近年来80年代复古元素的疯狂流行,以及霓虹色等设计风格的回潮。

在模仿这些标志性的风格和元素的时候,度的把握很重要,恰到好处的模仿让人觉得亲切,而拙劣的复制则会显得很 Low。

7. 引入图形

引入图形或者其他的多媒体元素,在文本中加入一些额外的东西,也是不错的手法。使用图形或者其他的元素来替代一个或者多个字母,这样的设计还是很抓人眼球的。

这种技法的诀窍在于,图形的外观要和字母的风格、形状相匹配。很明显,如果不这么做的话,会让内容难以阅读。

在上面的 Kasra Design 的网页当中,视频的触发按钮和图标很好地融合了起来。

8. 增加纹理

有些字体风格本身就显得复古、粗糙,设计师能够通过自定义增加纹理来强化这种感觉。纹理本身能够让文本更加突出一些,也能够强化文本的质感,营造出独特的氛围。

在上面的案例当中,设计师通过两种不同的方式来赋予文本以纹理:

通过切割出来的细节来赋予文本以纹理;
通过半透明的效果让字体透出背景,从而拥有纹理。

9. 创造自定义的文本字体

在进行品牌 LOGO 设计的时候,自定义的文本字体是最常见的元素之一。基于特定的字体来进行自定义设计,通过标志性的细节来营造令人难忘的视觉体验,是自定义字体的主要目标之一。

这并不是一件容易实现的事情,自定义文本字体不仅需要足够扎实的技术,而且需要在具体设计的时候,足够小心谨慎。在绝大多数时候,最好是要同专业的字体设计师合作,以达到最好的设计效果。

10. 让字体本身发挥效果

有的时候,最好的文本效果,就是不要加其他任何特效。在形状、大小和色彩具有足够对比度的情况下,文本元素和背景会自然地构成前后景的对比,自然分离。

缺少其他效果的加持,设计师需要精心地控制所有的辅助性的元素,确保所有的元素能够完美的协同工作。加粗字体,深浅对比,是比较合理的组合方式。

The University of Essex 这个网站就在较暗的背景上采用了加粗的白色字体,视觉上足够突出,也足够清晰。

结语

文字特效的使用还需要特别注意设计趋势的存在,过于突出的特效可能会显得过犹不及,而趋势的流行周期也是设计师需要尤为注意的问题。微妙的设计总归是拥有更加持久生命力的。

原文:10 Tips for Using Text Effects That Don’t Suck
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
ttf,eot,woff,svg,字体格式介绍及使用方法
而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格。字体格式类型主要有几个大分类:TrueType、EmbeddedOpenType、OpenType、WOFF、SVG。TrueTypeWindows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢
Stella981 Stella981
3年前
Android app全局字体设置
相信很多对设计追求极致的开发者们对Android系统的默认字体都会感到不满意,这个时候需要使用自定义的字体,当然可以使用系统提供的Typeface来加载自定义字体,但是,一个个TextView的设置,是不是很快就疯了,本文给大家介绍如何快速定义自定义的app全局字体方法很简单,就是使用github上的一个开源库Calligraphy(https://
Wesley13 Wesley13
3年前
CSS中的滤镜
设计网页时合理的为页面应用滤镜,可以起到非同凡响的效果。CSS滤镜分为基本滤镜和高级滤镜,基本滤镜又称为视觉滤镜,只要将其应用于对象上,便可以立即产生视觉特效,但其效果远不及高级滤镜。css的滤镜标示符是filter,在创建滤镜时首先要对filter进行定义,使用方法同其他css语法。一、Alpha滤镜:对图像,文字设置透明效果1、语法.
Stella981 Stella981
3年前
Spring Boot项目中的字体文件问题_Failed to decode downloaded font
1.问题:字体文件加载失败,本来应该是“X”号,现在只有一个小方块!(https://oscimg.oschina.net/oscnet/afb7220ff27d695555478bc91fd203276c1.png)2.原因:问题是Maven正在过滤字体文件并破坏它们。<resource<f
Stella981 Stella981
3年前
Linux下添加windows字体
在Linux下使用wqy字体,在视觉效果上就已近很好了,其实没有必要添加windows字体。但是显然有些人(比如领导,^..^)就喜欢宋体、楷体,所以添加windows字体有时还是需要的,幸运的是这件事很简单。windows字体的来源可以从windows系统中拷贝。对于大多数Linux系统,在你双击某种ttf字体时,就会打开类似于包管理器的界面,通常
Wesley13 Wesley13
3年前
AI多种设计字体的方法与英文字体收藏
无意间看到了刘兵克的字体改造法,大神:点我(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.zcool.com.cn%2Farticle%2FZMTM2Nzg0.html)。ZCOOL上有他的字体LOGO专题,感觉比较专业,虽然有些改动并不……。果然设计字体还是要用矢量软
Stella981 Stella981
3年前
Python爬虫实例:爬取猫眼电影——破解字体反爬
 字体反爬字体反爬也就是自定义字体反爬,通过调用自定义的字体文件来渲染网页中的文字,而网页中的文字不再是文字,而是相应的字体编码,通过复制或者简单的采集是无法采集到编码后的文字内容的。现在貌似不少网站都有采用这种反爬机制,我们通过猫眼的实际情况来解释一下。下图的是猫眼网页上的显示:!(https://oscimg.oschina.
Easter79 Easter79
3年前
TrueType入门:基本概念
本文作者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团Web前端开发资深专家,360前端技术委员会委员、W3CAC代表OpenType是TrueType的扩展。本文全流程介绍TrueType从字体设计到字体显示的每个步骤,这些步骤同样也适用于OpenType。TrueType字体可能诞生于纸上,也可能从其他格式
公孙晃 公孙晃
2年前
FontLab 8,字体编辑设计制作工具
FontLab8是一款专业的字体设计软件,它可以帮助用户创建、编辑、修复和优化字体,支持多种字体格式,包括TrueType、OpenType和Web字体等...
赵融 赵融
1年前
InDesign 2024 for Mac(ID 2024)v19.0中英文已发布,最新介绍
ID2024是一款功能强大的页面设计和排版软件,具有丰富的工具和功能,适用于各种出版需求。它提供了高级的排版和布局工具,支持快速创建和调整页面布局,以及精确的文字处理和段落样式控制。新版本还引入了字体管理的改进、变量字体的支持和云端文档的同步和共享功能。此
Immerse Immerse
4个月前
掌握这个API,让你的网页展示效果提升10倍
不用CSS硬改,不用第三方库,原生API轻松搞定小红书同款效果,前端开发者必学的网页交互技巧!
逻辑玄冰探
逻辑玄冰探
Lv1
红尘飘不到,时有水禽啼。
文章
4
粉丝
0
获赞
0