使用大而小的重叠文本创建标题

WebDesignerDepot员工 经过 WDD员工  |  1月14日2011年1月14日

标题介绍内容。

我们可以将许多效果和技巧应用于基于图形的标题,以诱使读者继续读取,以设置音调或使一个标题在许多方面脱颖而出。

但有时最明显的技术,如修改视觉权重和布局,工作得多。

重叠的标题使用少量 大的 文字和大量的 小的 沟通的文字超过普通标题可以自己做。听起来很矛盾吗?只有当你忽略精细点。

阅读,了解如何使用重叠文本创建难忘标题。

来自不对齐的字体的砂砾示例

上面的奇怪形状与名称“wdd”和“webdesignerdepot.com”有什么关系?它们是不幸的工件,从另一个文本奠定了一个文本,而不考虑放置或细节。这是违规的形象:

示例文本与纠结不佳

一目了然,上面的图形是博客名称及其缩写的简单呈现。字体是博客使用的官方;明亮的橙色直接来自网站’S主题;两行文本几乎完美地居中。

甚至根据博客的风格拼写和资本化。但是,通过将长的文本拍打到短的文本来模仿重叠技术是一种业余尝试。 (这个例子中的弱点被夸大,虽然并不罕见。)


示例文本与纠结不佳

上面的阴影显示了由两条文本创建的新形状。两条线如何与他们读取的每一个和顺序相关,取决于它们的布局方式。重叠的文本比设置在另一个顶部的内容更多。

当然,重叠并不总是安排短头衔和长子标题的最佳方式。

The examples below show some possible treatments when a design calls for something more creative than regular h1h2 elements.

匹配大小标题的其他方式的三个例子

重叠文本具有优雅,不能轻易与HTML(尚未)复制。两行文本一起常用量多于每个单独的总和。

 

重叠文本的基础

重叠文本对比彼此的两行。大文本休息在小文本后面,通常包含更多单词。棘手的部件确保两条线同样清晰,使两个都在一起而不是互相反对并保持整个包装主题。

放置,相对重量,语音和互动的例子

不同的技术改变重叠文本的效果。

以下是影响重叠文本的四个主要因素:

  • 放置 与小文本相对于大文本定位的情况有关。这直接影响了文本的读取方式。如果小文本朝上左侧,则可能首先读取(即在大文本之前)。如果小文本朝向右下角,则可能会读取第二个文本。
  • 相对重量 指的是注意力一块文本相对于另一个文本。鉴于其规模,大文本往往占主导地位。但是,如果大文本逐渐消失,那么小文本将跳出来。
  • 语音 (主要是字体和颜色)涉及设置排版情绪的美学选择。
  • 相互作用 是最棘手的。它与文本的Letterform如何相互作用。交互取决于放置,字体和字符本身。目标是在视觉上系在一起与看似相反的文本线。

 

放置会影响整个整体的行

您希望访问者阅读文本的顺序是确定如何排列类型的最重要因素。英语是左右语言,左侧的小文本将比右侧的小文本读取显着不同。

小文本与左上角对齐

在左上角的小文本中,上面的图形如下所示:“避免像瘟疫一样。陈词滥调。“仍然,“陈词滥调”写得如此之大,人们可以先读它。尺寸和放置之间的平衡将两条线放在相等的基础上。

小文本对齐到右下方

上面的版本不太含糊。将小文本分流到右下方给出了大文本的优先权。现在它读为:“陈词滥调:避免像瘟疫一样。”

上面的标题是可互换的,因为每条线或多或少是独立的。当线相互依赖时,放置更为重要。这是一个糟糕的工作的例子:

小文本对齐到右下方

将小文本放在右下方的叶子读者悬挂。 “瘟疫:避免喜欢......”?虽然大多数人会弄明白,但犹豫的那一刻是平庸和好演示之间的区别。

小文本与左上角对齐

上面的安排是最好的,因为小文本是句子的第一部分。如果我们想在右侧放置小文本,那么大文本将必须形成句子的第一部分。但是,还有一个挂钩。

小文本对齐到右下方

根据句子,只使用BIG文本的第一个单词是不够的,因为文本行必须单独工作以及一起工作。上面的文本拆分了短语不正确。命令动词“避免”本身并没有足够的意义来保证独立性。和“像瘟疫这样的陈词滥调”听起来像我们对疾病的过度短语相比,而不是要求避免两者。整个图形变化的含义。

小文本对齐到右下方

即使我们必须缩小大文本以适合,使用两个单词(完整短语)对于大文本使得这两条线都读得更好。

通过重叠文本,通过布局获取合适的措辞与颜色和字体选择一样重要。

 

通过与背景合作,余额统治主导地位

虽然大文本的目的是占据主导地位,但它也可以轻松扼杀小文本。但这并不总是糟糕。良好的平衡并不是为了阻止大部分小文本,而是表现出相对重要性的大部分。

大文本的大小自然地使其成为主要的陈述。如果小文本仅仅支持支持大文本,那就太好了。例如:

大文本压倒小文本

“www”首先跳出来。 “欢迎来到数字时代”阐述了这个想法,支持三个WS。但如果小文本应该携带主要信息怎么办?

大文本褪色,以平衡重量与小文本

以上,主要文本是“欢迎来到数字时代”。这是什么意思?背后褪色,“www”提供了一个提示。

例子如何逐渐褪色

大文本融入后台越多,所需的重要性就越少。当大文本几乎看不到时,小文本将成为主元素。

 

互动是细节

字体的形状是其独特外观的关键。当两行文本重叠时,它们会产生口袋,奇数形状和其他微妙的分心。

有问题的文字

上面,大橙色和小白文本将不必要的混乱添加到柜台(即字母内的孔)。单独,每个额外的位都不会阻碍可读性。但那是问题的一部分:因为他们不够糟糕,以使文本难以辨认,他们很容易被驳回为不重要的。

为了获得最大易读性,我们必须保留小文本的字母。

与解决方案的文字

如上所示,轻微调整清除了干扰:

  • 重新定位在大“C”的钳位终端之间,“文本”一词现在更清晰。
  • 请注意“r”和“解释性”中的垂直阀杆如何满足大“C”的边缘。
  • “P”和“支持”中的计数器现在只包含黑色。
  • 我们已经削减了大写字母“A”,以使“支持性”更清晰的小写“S”。

目标是保持小写字母的形状,即使读者没有注意到。

 

字体有所作为

不是每个字体都适合大小尺寸。在足够小的尺寸下,字体的细节可以消失。和大小放大的细节有时会产生不寻常的问题。

错误字体造成问题的示例

以上的四个字体组合因不同原因而失败:

  1. 此脚本字体旨在模拟手写。它的粗糙边缘包含数百个向量点,其中大部分都丢失了小尺寸。
  2. 但使脚本太大,而且字母看起来不像手写,更像扇形的插图路径。
  3. Zapfino的书法边缘比德克萨斯英雄更好,但“B”上的巨大升天们将这些构图抛出平衡。
  4. Lucida Blackletter过于复杂,无法作为背景实际,至少没有非常仔细的小文本的安排。此外,其独特的角色在较小的尺寸下消失。那些刷子和丝绸是丝状,还是只是模糊?

 

对于大文本,太厚或太薄就是正确的

重叠文本时,请将大类型视为两者 文本背景。字母越复杂,纹理越多。也就是说,它们更有可能掩盖小文本中的封信。

为了避免问题,胖或瘦。额外的厚实和额外的光形状优于同一面部的常规重量。两者都干扰少,因为小文本的机会较少。

厚度和大文本如何工作的例子

例如,在较小的小写字母上方的浅色和黑色变化中的大文本。当然,每一面和每组单词都是不同的。但一般来说,中等重量导致薄厚度和厚重的问题。

 

实例

这可能如何与更可能的文本合作?以下是重叠文本的一些例子。

普通博客标题以无害的薄荷绿色设置

为什么它有效: 逐渐消失,大文本可以清楚地优先于小文本。 Museo的几何形状有很少的分心。

潜在问题: 如果小文本较短,则此重叠不会很好。要携带消息,小文本必须重叠所有六个大文本的字母。


tetsuo / kaneda,对话从电影akira的最后一半

为什么它有效: 小文本仅在三个厚的厚度和两种薄的颜色中交叉。甚至是暖色调色板,也是如此。

潜在问题: 大文本的精力充沛的边缘似乎对抗小文本的优雅线条。


Steampunk,高科技维多利亚州蒸汽力量

为什么它有效: 这两条文本都有尖锐的几何形状,并精确对齐。

潜在问题: 小文字看起来有点丢失吗?字体真的反映了“蒸汽朋克?“


Trajan在戏剧性的电影海报中是美丽的,过度使用

为什么它有效: 两个文本中的大字母和清洁线条的慷慨跟踪使每个角色都清晰。

潜在问题: 背景纹理是否会使类型太难阅读?


样本5.

为什么它有效: 厚厚的大文本独自清晰,而亲密的小文本邀请阅读。几个额外的填充保持了首都“S”字母的颜色深度。

潜在问题: SXSW. 通常以位图字体呈现;这些都是脱离品牌。此外,谨慎地使用小文本中的脚本。

 

但它有所帮助吗?

让我们将这些课程应用于原始组合。

示例文本与纠结不佳
样品6.

为什么它有效:

  • 大文本融入了黑暗的背景中,但它的大小可确保它是可见的。
  • 鲜艳的颜色使小文本脱颖而出。右对齐余额。
  • 小写小写字母的仔细间隔和大字母的简单性会将冲突保持在最低限度。
  • 这两个字体共享常见元素。例如,尽管存在于不同的面孔,但是两个“W”对齐。


专为WebDesigner Depot编写 Ben Gremillion。本是一个拥有更好设计的沟通问题的网络设计师。

最后一个例子的一些潜在问题是什么?请在下面的评论中分享您的想法。