返回  

2022年网站文本排版设计趋势

2022/6/16 9:03:19 来源:深圳网站建设公司Clh

想让你的设计快速焕然一新吗?使用新的和有趣的文本排版可能是答案。设计师正在尝试使用更大胆的颜色、局部裁剪、渐变,甚至是自定义的字体来创建视觉上更加突出的排版设计。


更改字体或以当前流行的风格重新创建图像或标题可以使设计焕然一新,而无需进行全面的调整。不知道从哪里开始?那么就跟我们一起讨论并通过具体的示例来看看2022年又有哪些新的排版趋势正在被网站设计师们重点使用,或者你能够在其中找到属于你自己的灵感。


1. 双色标题(Two-Color Headlines)

Two-Color Headlines

最近的头条新闻开始采用这种“多色”的标题形式。这种趋势正在迅速发展并得到更多的关注,有充分的理由使用它——颜色可以帮助强调设计中很重要的特定单词或短语。

与我们过去看到的不同点在于,现在更多的设计师将颜色散布在短语的不同位置,而不仅仅是短语开头或结尾的一个单词。

这么处理的好处显而易见,它能使设计的文本在元素和外观上更加丰富,但挑战在于两种颜色的过渡可能会影响阅读者的阅读习惯。所以你要确保文字无论颜色如何,都易于查看和快速阅读。


2. 路径上的文本(Text on a Path)

Text on a Path

这种排版设计趋势可能在开始的时候并不会引起你的注意,甚至在最初你可能根本就不会注意到它。请注意上面示例左下角的圆形文本(绿色圆圈)——这些字母是在路径上创建的以形成圆形。

有大量网站使用这种文本技巧——当然,通常也将其与动画搭配使用——以帮助吸引用户向下浏览页面或鼓励某种行为或交互。

在许多情况下,此文本元素也是圆形的。

在路径上处理文本时,使用一些易于阅读的单词很重要。您不希望想要展示的信息在效果中丢失。


3. 背景文本元素(Background Text Elements)

Background Text Elements

设计师正在使用一切可以用来创建视觉深度的文本效果,包括排版。在大多数情况下,这是一种非常微妙的技术(如你在上面的示例中所见)。

通常过大的字母或单词是背景的一部分,其设置方式与主要背景颜色的颜色对比度非常小。这种背景效果在近乎水印的效果中创造了很好的深度。

好处是你可以对关键字或logo进行一些额外的强调。当你在文本之上放置文本时,挑战就来了——你需要在文本的大小和比例已经对比度上花一些时间,以保证所有内容都具有可读性。


4. 轮廓字体(Outline Fonts)

Outline Fonts

轮廓字体很重要。

你可能会比较经常在网站设计中的主要内容文本或主视觉图中发现这种趋势。虽然用途有所不同,但你几乎每次都会发现一些元素:

· 无衬线字体

· 字母全部采用大写

· 搭配填充字体

· 超大文本元素

这种类型的设计使用起来很有趣,在可读性方面,您可能就需要谨慎一些了,字母可能会很快在背景图像和视频中丢失。所以要注意颜色、对比度和位置。

并且不要过度,轮廓字体最适合用于强调重点,而不是在整段的文本中使用。


5. 斜体(Italics)

Italics

这是一种你可能不太经常会想使用的排版趋势——斜体。

长期以来,作为网站设计中几乎从未使用过的东西之一,斜体排版几乎无处不在。从标题到较小的文本元素,再到与另一种字体配对的重音词,斜体字体正在慢慢重新流行起来。

通常,斜体的使用方式使其与周围的字体元素融合在一起,甚至使用粗体或下划线(例如上面的示例)来最好地融合。


6. “不可读”层(“Unreadable” Layers)

“Unreadable” Layers

接下来的两个排版趋势有点相似,都打破了一个我们在网站设计中经常使用的规则:它们近乎不可读。但这没关系,因为其余的设计填补了空白并保持了网站的互动性。

在这个趋势示例中,超大文本元素位于前景元素后面的图层中。屏幕上的所有其他类型元素都具有高度可读性,可为不可读的元素提供大量支持。

在上面的示例中,前景对象也在文本上淡入淡出,以便你可以来回阅读。

最后一个有助于将它们组合在一起的元素是这个词对于设计来说并不是主要的,它可能是品牌名称,这可以直接从Logo中获取。


7. 屏幕之外的文本(Text That Goes Off the Screen)

Text That Goes Off the Screen

跟“不可读”层的趋势一样,这种趋势使文本元素失去可读性,因为它们在屏幕上和屏幕外都有动画。这种排版效果无处不在,通常搭配超大字体和向屏幕左侧滚动的几个单词。

当屏幕上没有太多其他动画并且只需几秒钟的观看时间即可阅读文字时,这种排版趋势效果最佳。如果文本太复杂,你可能会冒着让用户永远无法弄清楚这些词在说什么的风险。

与前面的示例一样,确保其他的文本元素可以提供补充信息,以便人们准确了解设计的内容。


8. 实验性字体(Experimental Typefaces)

Experimental Typefaces

实验性字体以富有表现力和有趣的风格风靡一时,为设计项目增添了许多个性。实验性字体有很多不同的样式——它们可能包括时髦的形状或笔触、颜色或动画。

这些类型样式最好的部分是它们可以为项目注入独特且非常具体的氛围。


9. 衬线(Serifs)

Serifs

衬线又回归了。曾经被认为“难以在线阅读”的字体在字符上出现了微小的额外笔划。

顺便说一句,在线上项目中使用衬线字体,在可读性问题上完全就看设计师的“功力”。

如果你想在网页设计项目中使用衬线,请尽量使用粗笔划的字体样式,并注意衬线或连字时的行间距,以便每个单词都易于理解。

从简单的方形衬线(例如上面的示例)到更精致的字体装饰,这种排版可以使整个设计更具个性和魅力。它可以为简单的设计和那些很好地利用空间的设计带来更大的提升。


10. “矮”而粗的字体(Short, Fat Fonts (Low X-Heights))

Short, Fat Fonts (Low X-Heights)

另一种主要流行的字体风格是身材矮小、姿态宽阔的字体。这些字体大多全部使用大写,但是当它们使用小写字母时,可以通过“矮”这个特点来轻松判断。

当画布上没有太多的竞争元素时,这种类型的风格往往效果最好。由于可读性,它也最适合用于展示较短的单词或短语。

这些短而粗的字体也最适合具有超现代感的设计。在许多情况下,它们更多的被用于未来主义主题的设计中。


11. 手写风格(Handwriting Styles)

Handwriting Styles

在显示字体方面,手写字体样式在网页设计师中非常流行。并且有大量的手写字体可供选择,以便你获得恰到好处的外观和感觉。

当前的大部分手写字体趋势都集中在带有大写和小写字符的印刷字母上,它们的笔画较粗,而且有些粗糙。

字体可能还包括一些额外的装饰,使某些字符感觉更加特别。


12. 左对齐(Left Alignment)

Left Alignment

使用左对齐文本不管在可读性还是外观上都具有很好的效果,可以创建具有经典感觉的偏离中心的平衡。

使用左对齐排版的技巧是注意换行和文本的大小以及行间距。将整个文本元素视为单个元素,相应地调整大小和行距。

为了获得更一致的感觉,请考虑将其他元素也向左对齐。为元素创建一个网格“边距”,例如上面示例,请注意,品牌名称、二级级文本和号召性用语按钮都在同一个不可见平面上左对齐。


13. 圆形无衬线字体(Rounded Sans Serifs)

Rounded Sans Serifs

这是几乎任何人都可以使用的趋势,而且它非常简单,你甚至可能都注意不到它的存在。项目包含圆形、简单的无衬线字体。

这种趋势的好处在于它适用于几乎所有的项目。圆形无衬线字体是最易读的字体之一。大多数使用这种趋势的设计师也使用中等到粗笔划的字体,以及足够的字母间距。

关于这种排版趋势的一切都以最佳可读性为中心。此外,你可以将其与其他排版趋势配对,以获得更现代的外观。上面的示例同时使用圆角无衬线和左对齐文本。


14. 微妙的渐变(Subtle Gradients)

Subtle Gradients

设计师似乎无法从渐变中获得满足(我承认自己是其中之一!)。

在细节处添加渐变或者是一个正在越来越流行的趋势。

这种趋势的好处是渐变处理的如此微妙,以至于你可能一开始都注意不到它们。

渐变最适合与较粗的字体一起使用,并强调特定的单词或短语。

小心不要过度使用它。一个好的文本渐变在整个单词中保持一致的对比度,这样它就不会读起来不和谐,并且它与背景分开。


15. 动画(Animated Typography)

Animated Typography

设计中最大的趋势之一是动画,没有理由不适用于排版。

更多的设计正在使用横向移动、纵向移动或触发悬停等效果的文本动画(例如上面的示例)。所有这些技术都可以带来更具交互性、更丰富的用户体验。

在为文本制作动画时,重要的是要考虑用户将如何以及在何处阅读信息(一些动画元素,例如视频,还不能在所有移动设备上正常工作)。做出调整,即使动画不能正常工作,仍然有一个有价值的用户体验,其中消息是清晰的。

在这方面,最好的文本动画通常以清晰易读的字体开头。动画在延迟后或作为用户交互的一部分开始发挥作用。这可以让用户感到高兴和惊喜(甚至可能促使用户花更多的时间停留在站点中)。

仔细考虑排版动画的速度——如果文本移动得太快,用户将完全错过信息;如果文本移动得太慢,用户可能会在阅读所有内容之前点击离开。所以,一定要刚刚好。


总结

就个人而言,排版趋势是我最喜欢研究的事情之一。字体是所有设计的重要组成部分。

我最喜欢的排版趋势是那些突破常见界限但仍保持可读性的排版趋势。









----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务