如果你细心观察,不难发现网站设计中的文字字号以及其排版比例正在越来越大。这可能是件好事。
目前网站设计的最大趋势之一是大型的字号排版。我们不再只是在Banner或者KV中使用更大的字号了。现在,我们看到网站设计的每个部分都有更大的字形选项。
使用这个趋势的结果?当然是一种更简单易读的体验,一种以更好的方式、更频繁地为更多人工作的体验。
下面是我们对于这个趋势的一些看法,以及几个例子可以帮助你了解大字体的实际应用!
什么是排版比例?(What is a Typography Scale?)
在我们深入研究之前,理解这个概念很重要:什么是排版比例?
排版比例是一组规则或指南,用于确定设计中的类型元素如何根据某种共性(例如比率或百分比增加)进行交互。
标题的传统比例大多数为从 H1 到 H6,同样正文和设计中使用的其他文本元素都有一套已经趋向固定的比例设置。一个好的比例必须是合乎逻辑的,通常是模块化的,这样有助于在设计中创造一致性和对比。
如果你正在尝试使用传统的比例或你打算为你的项目创建一个特定的比例,那么掌握好比例的度就尤为重要了。你可以从基本比例开始,适当调整比例的变量和字体,并在深入设计之前查看它在屏幕上的效果。
识别设计中的大排版比例(Identifying the Large Typography Scale Design Trend)
在你仔细观察之前,这种设计趋势可能会经常和其他的设计趋势一起使用。与其他使用单一的大型或超大文本元素的趋势不同,这些设计具有更全面和彻底的“大型”外观。
通常,最基础的文字尺寸为 18 磅或使用更大的粗体字形。
字号可以说是巨大的,但一切都很和谐,感觉像是与设计融为一体,正文与标题和副标题元素之间没有不平衡的感觉。
主要特征(Key Characteristics)
更大的字体设计趋势的关键特征是对文本元素的处理需要在视觉上有阶梯感。不同层级的元素应该区别很明显,很容易通过大小来识别,如果单独存在,设计中的任何东西都不会被认为是哪些是大的,哪些又是小的。
通常,这些设计中的字形比你预期的要粗,同时还包括衬线或较小尺寸可能更难阅读的字体,在文本的字数上也比较少。
文本间的对比度需要比较高,以便使这些内容更易于阅读,文本可以使用滚动或者移动进行浏览。
如何让它为你工作(How to Make it Work for You)
那么如何让更大的排版比例更适合你的项目呢?一些设计师一开始会对大尺寸感到不舒服,因为它们可能不是你在视觉上习惯的。但是处理大型文本对于某些项目来说效果很好。
如果你的设计:
· 有在可读性上有很强的要求
· 主要的用户群为移动用户
· 在可读性方面使用更难阅读的字体
· 有简洁的文本块
· 采用的主要交互方式为滚动
· 对不同层级的文本需要有强烈的对比
· 希望设计可以与众不同
这是这种趋势的好处:它实际上几乎可以与任何其他设计趋势一起使用。将其与强烈的图像(视频或照片)一起使用,或者将其与其他一些图形元素一起使用。
至于具体的大小可以根据你的内容需求从任何级别开始。你如何创建比例实际上取决于你对大小和内容的舒适程度。
如果这是你使用这个趋势的第一个网站设计项目,你可以从比你通常使用的字号大二~四点的正文字体开始,然后以这个为基础开始拓展。
在创建比例时考虑实际内容和文字也很重要。与较短的标题相比,包含比较多的长标题使用较大排版比例可能会受到更多限制。你只能在特定字符数的情况下才能考虑使用更大的字号并保持在不同设备上的一致性。否则,你可能必须针对分词或连字符做出其他类型的设计决策。
无论哪种方式,为了最大化这种设计趋势的视觉影响并使其尽可能好地工作,在设计过程的早期创建排版比例时使用一些实际的内容。这可以帮助你确定适合内容和项目的字号大小。
3个我们喜欢的例子(3 Examples We Love)
这是真正可以引起我们注意的设计趋势之一——你很难第一时间注意不到更大、更粗、更易读的字体设计。
Emmaus
Emmaus 的设计告诉我们,排版比例不一定要很大才能更有效。这个例子强调了一个更大的字体比例如何在移动设备上增强可读性。
Decem Drinks
Decem Drinks 采用极简设计,令人耳目一新,似乎打破了许多排版规则,让你不禁想继续滚动和阅读。较大的字体比例非常适合阅读,尽管使用的是更具挑战性的字体,例如此处在正文内容中使用的衬线字体。
Aardman
从导航元素到页脚,Aardman 的排版都是选择更大的字号。这个例子中的比例很有趣,注意那些使用较大字号的字体和正文字号的对比,它们是如此不同,但在整个设计中却能很好地工作。
结论
大字体设计趋势不仅仅是视觉,它也很实用。强大的字体比例在设计中创造一致性和对比,使人们更容易阅读和扫总览内容。
较大的比例有助于可读性,在移动设备上的视觉和阅读体验上也能更好的得到提升。
----图文来自:design shack