简评:本文通过研究一种字体的细节和个性,来找到合适的设计方案。
你喜欢的字体不可能在任何地方都适用,文字的结构样式特征必须和其他元素互补,这里讲想你介绍如何发挥字体的长处。
在某个场所你看到了一种你喜欢的字体,你想迫不及待的使用它,没错,这确实很爽,但请等一下(球都麻袋)。在你购买或者下载这种字体之前,你会想知道,你所看到的这种漂亮字体的线条,形状以及其他细节,是否同样也会在别的设计中显得如此漂亮呢?
那么如何知道呢?
研究一个字体有点像观察一个人的脸,通过细微的差异,如眉毛的弯度,嘴唇的取消,颧骨的轮廓可以传达一个人的特征和性格。我们需要让某种字体与其他元素互补才能真正发挥字体的个性和魅力。否则你的字体看起来就会显得不着调或者仅仅是有趣而已。
△不合适的 University Roman 字体招牌
上图就是一个字体不和的案例:这是一个 Monterey 有名的罐头厂街(Cannery Row)上,一家精品店的招牌,看起来很不搭。这种字体的字母呈现一种不规则、繁琐的卷曲线以及非常幼细的衬线,这就好像穿着狂欢节的衣服参加政治课,显得格格不入。那么这种字体(university roman 字体)在哪里适合使用它的呢?
Step 1.把所有字母列出,一般观察
把所有的字母打出来,然后仔细观察,把你看到的都写下来(如下图),为什么?因为这样能确保你认真的看了每个字母每个细节。
我们可以从 university roman 字体得到一些特点:
- N 和 O 在通常的字体中是等宽的,但是这却有着非常大的差别。
- 字母 M 和 T 通常是不同的宽度,但是在这里是等宽的。
- A 和 e 都有非常小的字谷,且为密封区间。
- 其他字母如 O、R 字谷非常大。
- 温软的收尾,华丽的曲线和修饰。
- 粗细线条有微妙的变化,虽然不明显,但是每个字母都有这种变化。
Step 2.细节观察
进一步观察细节,可以发现,这总字体飘逸的结构使其呈现一种手写字体、充满圣诞节气息的特质。非常适合用于一些奇幻或浪漫的主题中使用。
进一步细节观察可以发现:
- 奇怪的字符宽度:所有笔直的字母都很纤瘦。
- 所有的圆弧的字母都是非常宽的。带圆弧的小写字母也宽于不带圆弧的大写字母。
- 古怪的 X -height,有些字母比如 A、B 的 X-heights 非常高,有些字母如 P、R 非常低。
- 不对称的衬线。
- 衬线上方超出大写字母顶部,下方低于字母基线。
- 小写字母比如 i、l、t、等有小横岗的都有 50° 的坡度。
- Q 的尾巴相当于 2 - 3 个修长小写字母的宽度。
Step 3.发现优缺
优点:
- 良好的展示型和讨喜的面孔。
- 魔幻主义。
- 适合标题。
- 适合放大。
缺点:
- 不适合正文
- 不适合过长
Step 4.实际应用
好了,我们已经知道了字体的细节,表达的情绪和优缺点。
现在我们可以试着用这种字体来进行实例操作。
△用 University Roman 字体做好的案例
下面我们来一步一步学习,如何做到上面两张的效果的。
Step 4.1.1 案例 A - 寻找共性
寻找一张图片,与你的文字相配。
从外形开始,圆的字母和圆的图片更配。避免使用三角形,正方形和含糊不清的形状,这些会和你的字体不协调,削弱你的设计。
Step 4.1.2 案例 A - 利用颜色和边缘,图文结合
现在需要将图片和文字结合起来。文字区域与图案的边缘是紧密结合的,然后在用漂亮的渐变色来结合两者。
Step 4.1.3 案例 A - 卡片上排版
将文字和图片放置小卡片上,界面大小和视觉焦点是关键,我们通过在对焦复制一个小元素来平衡整个结构。
以上为花样小卡片的案例设计。
Step 4.2.1 案例 B - 寻找素材
阴谋、神秘、幻想。第二张卡片中,我们的字体要看起来充满神秘和奇幻的气息,ok,我们想把它和黄金面具结合起来。
△最终选择了黄金面具这个素材,因为有着和 University Roman 相同的特性。
Step 4.2.2 案例 B - 图片决定页面的设计方案
当文字和图片放在一起是,讲面具的颜色,修饰以及问了特征应用到页面生于文字元素中去,结果就会产生一个统一,协调强大的设计。
从现有的素材上选取相近的颜色,应用到文字,找一个修饰元素搭配,居中突出主题,最后案例 B 完成。
最后,附上两幅作品的设计方案,仅供大家参考。
如果我们要用一个字体,首先我们要了解字体的性格和特点(要尽可能的挖掘细节)。其次找到合适的素材与之搭配,最后通过设计方法来结合图文,成为优秀的作品。
延伸阅读:
- 设计师最爱的英文字体
- logo 设计流程
- 设计师的自学手册(附大量学习资源和工具)
- 39 个无版权图片站 - 极光日报
- The Art of stealing:如何成为一名设计师
- 零基础 5 分钟设计 logo(内附资源)
- 前端 & 设计师必备的生产力工具
- 优秀的数据可视化设计
- ¯_(ツ)_/¯论不同字体颜文字的特效 (另附颜文字神器下载)
欢迎关注知乎专栏「极光日报」,每天为 Makers 导读三篇优质英文文章。