文字怎么搭配才吸睛?10个排版秘诀搞定你的设计! - 优设网 - UISDC

文字怎么搭配才吸睛?10个排版秘诀搞定你的设计!

2015/12/21 78101评论区

10-typography-design-tips-1

文字排版(Typography)不只是从下拉选单选择字型和点数而已,文字排版是一项流传数世纪的技艺,自木制和金属的活版印刷便开始,而且它不只历史悠久,还很实用,大部分的人只要掌握一些实用的诀窍,就可以将之活用在诸如履历表、电子报或名片等日常设计项目上。

资深视觉设计师 Janie Kliever 在 Design School 发表了一篇文章,列出 10 个能帮你增进文字排版的诀窍和密技,虽然介绍的是英文字型,不过还是相当实用,让我们一起来看看吧!

1. 将要表达的讯息配上适当的感觉

用了两种差不多的字型?或是你总是用最喜欢的那一种字型?以上都是没有妥善选择字型的情形。

font-personalities-768x576

每种字型都散发独特的情感或个性,也许是友善、新潮、严肃或傻里傻气,但大部分的字型并不是万用的,所以你要判断一个字型对你来说是怎么样的感觉,还有它适不适合放在这个设计里面。方法之一就是列出你希望设计呈现哪些特质,如果能先确定内容更好,这样就能直接挑选字型来配合建立好的内文调性。

字型设计师 Eben Sorkin 曾经说过:每种字体都有自己的声音,这种声音将影响我们阅读文字的感受,也影响我们吸收和处理信息的过程。

它的力量强大,能让任何形式的文字沟通更加有效且更有说服力。当文字符合字型的个性,大家阅读起来会更快更容易;若两者不合,文字就会变得混乱,拖慢读者的速度。访客读起来越容易,就越容易找到他们要的内容并点击购买或返回(或达成其它设计的目的)。

让我们快速看几个范例:

一个遵循「传统配方」的护发产品,融合了复古和现代的字型。

1a-768x513

(Design by Device Creative Collaborative)

主打回到本质的产品,包装走极简瑞士风设计美学和字型搭配。

1b-768x576

(Design by Salih Kucukaga)

传达历史和工艺精神的字型选择,字型和整体事业的品牌形象相当搭配。

1c-768x1643

(Mike Casebolt and Sergey Grigoryan)

古典的衬线字体,看起来相当适合 1925 年就开幕的出版商的部落格,不过这个字型易读、简明而且平易近人,带来一种现代感,而且更适合用在网页上。

1d-768x663

(Random House Books)

关于中文字体的性格分析,参见:《不会挑选字体?来看看字体的7种类型及特点》

2. 配合读者的心情

现在你已经替你的设计配了完美的字型,但有个小问题,并非所有人对同一种字型都有一样的感觉,选择了适合的字型后,你也要确定它适合你的观众。

可能有一群人觉得这字型很新潮,另一群就觉得它过时,因为我们看字型的方式受到文化连结的影响,而文化又和年龄及地区有相当大的关系,所以要对你的目标群众有敏感度,如果你对选择的字型有所迟疑,问问那个团体的人,征询他们的意见,能让你的文字排版效果更好。

210-768x510

33-768x512

(Designs by Peetie Design and Kelly Schmidt)

如果你的观众范围很广,并非特定族群呢?那你可能就得选择较为中性的字体,不强调鲜明特色而能融入其他对象。这种字型经常称为「Workhorse」字体,通常是基本的衬线或无衬线字型,而且因为不引人注意而用途广泛。

workhorse-typefaces-768x359

▲Google 字型中一些多用途字型。

最有用的多用途字型通?;够崽峁└髦执窒负屠嘈?。

3. 让字型的尺寸搭配设计内容

选择和安排设计的字型时,阅读难易度应该是首要考虑之一。字太小难以阅读,字太大又很烦人,因此一般而言,印刷用段落文字应该落在 10 — 12 点之间,而网页则是 15 — 20 之间,大部分的浏览器默认值是 16 点。

你可以用 Type Scale 这个免费工具来检查 Google 字型库的字型,各个尺寸在网页上看起来如何。

web-fonts-768x385

▲Type Scale

若不是用在长文的字呢?你可以参酌设计本身,包括整个版面的大小或呈现方式,加上一点基本常识帮助判断。一些像名片之类的小型项目或是长段文章会需要小一点的字,但这些字也要清晰易读,而非充满装饰。

42-768x480

大型项目如海报,因为空间更多而且大家通?;岽釉兑坏愕木嗬牍劭?,就可以容纳大字,若选择相对小的字体,则有更多空间发挥创意和选择更有型的文字。

51-768x1152

4. 安排层次

如果一个设计层次分得好,看起来就整齐,容易定位,可以更容易找到你要的信息。文字排版的层次对于像是电子报、杂志、书和其他传统印刷物,及某些网站等文字很多的设计特别重要。

typographic-hierarchy-768x409

基本的层次设计,可以利用以下几点:

  • 用字的大小来依重要性排序信息。
  • 用充足的空间来创造一个容易检视的架构
  • 把相关的对象分成一组
  • 在适当的情况下,用标题、副标等清楚地分类

typographic-hierarchy-2-768x1117

注:这个是特别关键的一点,想具体学习的同学可参见:

  1. 《设计易容术!如何设计一张高品位高水准的海报?》
  2. 《设计易容术!如何设计一张高品位高水准的海报(二)》
  3. 《设计易容术!如何设计一张高品位高水准的海报?(三)》

5. 别忽略了留白和对齐方式

设计成也细节,败也细节,其中留白和对齐影响很大,这两者可以让版面又挤又混乱,也可以带来干净和秩序。

让我们一起来看看几种常见的留白:

字距(Tracking):文字间距,又称字间,这是在一段或一句文字中,每个文字的固定间距,调整这选项会让整体文字看起来更挤或更松,缩小间距常用来节省空间,但太过紧密会让文字难以阅读,配合所选字型,找到适合的文字间距,是让文章好读的最佳方法之一。

6-768x577

行距(Leading):每行间距,这是行与行间的垂直距离,就像字距一样,过多过少都会让文字难以阅读或格格不入。

7-768x577

边界:这是设计周边的空白空间,除非有特殊需求,不然通常你不会想让内容看起来像要掉出页面一样,在页面周围大方地留点空间,读起来会更舒服。

留白:用来指设计中所有空白、白色、空无一物的空间,如果你要放很多内容,留白看似很浪费,但要让画面平衡、有条理,这是不可或缺的。他让观众的视线在画面中移动,同时让眼睛有地方可以休息。

white-space-768x576

至于对齐方式,「保持一致」是增进文字排版最好的方法,在同一设计中无意义地切换各种对齐方式(靠左、靠右、置中、分散),只会看起来很随便。

8-768x577

一些小诀窍:

  • 少用两端对齐。这几乎每次都会产生一堆不规则的空间和随机分布的大量空白,看起来很乱而且很难阅读。
  • 在段落文字选择一种对齐方式(通常是靠左),并保持一致。

alignment-768x576

(Design by Bryan Kidd)

6. 学会字距微调

有一种留白是大家常常忽略的:字距微调(字间)。字句微调常和字距搞混,但两者是不同的,字句微调是单指两个文字间的距离。

9-768x577

字句微调通常是用来检查文字排版是不是完美且专业的最后一个步骤,每种字型都有默认的字句微调,但有些文字组合起来间距就是不理想,尤其又大又显眼的文字排版,比如说标题,最好多检查一下有没有哪两字间隔过大或过小,必要的话再手动调整。

7. 限制你的字体、粗细和样式数量

我们热爱各种字型,但好东西太多也不好,一个设计用过多不同的字体看起来会混乱又不专业。

10-768x577

基本上,一份设计别用超过三种字体,如果是好的设计搭配对的内容,也是可以打破这项规则,制造电子、复古的效果,比如以下这份设计。

111-768x577

如果你刚开始混合使用字型,基本的衬线搭配无衬线字体,几乎都能搭配,或者找一种有各种粗细和样式的字体或字体系列来搭配,这样你的文字排版看起来就互相呼应,同时还保留一些变化空间。

12-768x432

▲免费字体系列 Alegreya Sans

粗细和样式很容易被滥用,这些样式可以强调文字的重要性,在视觉上更突出,或是模拟说话语气,但别在一段文章内用上一堆样式,这样会看起来强调得太用力,而且会让读者感到不礼貌。实际上,就算只用超过一种以上样式的机会都不多。

8. 避免常见的「排版病」

设计程序当着我们完成很多了不起的事,但若不够小心,有时候也让人容易犯下一些显而易见的错误?!碩hinking with Type〉 的作者 Ellen Lupton 在书的官方网站上,举了几个坏习惯作为例子: 不要为了填满版面任意拉长文字,若你只拉长一个方向,会让文字及间距严重变形,如果要重设大小,请固定长宽比例。

13-768x531

别用错误的引号。在英文字句中有的人会用直线引号代替逗号型引号,或者在中文使用英文引号,大部分的程序可以设定自动取代功能,或是打字的时候善用快捷键。

141-768x413

不要使用假斜体。如果字型本身没有提供斜体,在设计程序里还是可以简单地把它倾斜,做成斜体,但这种技术会让字体变形,而且通??雌鹄春茉愀?。真的斜体是另外设计来补充原本字型的不足,而且通常是比较好的选择。

这儿的知识点可以参考:《专业干货!想强调重点该用粗体、下划线还是斜体?》

15-768x384

9. 避免冲突的颜色或背景

文字排版很少独立存在,它通?;岷推渌卮钆?,尤其是背景。文字和其他部分间有足够的对比,可以让文字更易读,但有些小技巧可以帮忙调降一下对比:

颜色的冲突:如果要帮文字挑颜色,你可能会想要挑个能和其他元素搭配的颜色,包括背景,如果颜色太格格不入,像是很丑的弹出式广告窗口,背景是红色,字是鲜绿色,或者颜色太相近,像是白色的字搭浅色背景,眼睛负担都很大,视觉效果很差。

试试用现有的色系组合,来创造和谐的画面:

162-768x576

图案或复杂的背景:一样地,太复杂的背景也会让字难以阅读,而你应该不想观众找不到信息。

试试看把复杂的图案放在边框,或是不会干扰阅读的地方:

17-768x628

(Design by Szende Brassai / Adline)

关于对比原则,除了颜色,这些技巧你也应该知道:《设计基础功!帮你彻底掌握设计四大原则中的对比原则》

特殊效果:透明、环绕,还有许多文字特效这些都很好玩,在某些情形下也很实用,不过也很容易用错。我们有时候会陷入「这个设计很好看,但一点都不实用」的陷阱里。

试试在可以增进设计效果的时候才用特效,而不是看到特效就乱用。

182-768x647

(Design by David M. Smith)

总而言之,当你尝试发挥创意的同时,记得保持文字排版的清晰易读。

10.观察与练习

增进文字排版技巧的最佳方式之一,就是观察其他设计师的作品是如何运用文字排版,这需要不断地练习并培养判断的眼光。所以请时时注意优秀的文字排版,它可能是捷运告示,也有可能是杂货的标签。

所以现在就靠你自己了,请妥善利用这些诀窍增进你的文字排版技能吧!

超实用的干货教程合集!

写出顶尖文案的7个秘籍!
《年度最佳教程!7招教你写出互联网顶尖文案!》

UI设计新手的入门必学教程!
《传承设计经验!图标设计初阶的3大关键入门知识点!》

让作品变得高大上的5个设计规律!
《让设计更简单!品牌运营专题的5个设计规律》

原文地址:designschool.canva
译文地址:inside.com.tw

【优设网 原创文章 投稿邮箱:[email protected]

================关于优设网================
“优设网极速赛车开奖在哪看“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航://hao.uisdc.com/book/。
设计微博:拥有粉丝量106万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航://hao.www.35yjw.cn

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址://www.35yjw.cn/10-typography-design-tips

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 优设专访 交互设计师 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

  • 网络账号能否继承?专家:可继承具有价值部分 2019-04-19
  • 宜春深燃公司首个分布式能源项目正式落地运行(组图) 2019-04-19
  • 夷陵区开展“关爱女性健康 助力精准扶贫”两癌免费筛查 2019-04-19
  • 海外版望海楼:“上海精神”的新时代内涵 2019-04-18
  • 西藏昂仁县:保障群众健康生活 用健康扶贫助推精准扶贫 2019-04-18
  • 【新时代 新作为 新篇章】十年长出一座绿色新城 2019-04-18
  • 马航客机在乌俄边界被击落事件回顾 2019-04-18
  • 楼顶建起1.7万平方米运动场   “8D重庆”又现网红建筑 2019-04-17
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-04-17
  • 滴滴计划恢复部分夜间时段订单 2019-04-17
  • 儿子变全能暖男 海清晒儿子手工包礼物爱意满满 2019-04-16
  • 凤凰月报:5月高端成交活跃带动均价创新高 ——凤凰网房产上海 2019-04-16
  • 比利时VS巴拿马首发公布 卡拉拉斯、维特塞尔中超双子星在列 2019-04-16
  • 工业互联网支持政策密集出台 2019-04-15
  • 宁波本土手工匠人创作的青瓷作品“海曙楼青瓷盘”亮相 2019-04-15
  • 340| 852| 723| 106| 10| 445| 338| 885| 915| 915|