超全面!正确使用字体的10个黄金规则 - 优设-UISDC

超全面!正确使用字体的10个黄金规则

2017/11/26 17175评论区

@喪心病狂十六夜貓  :对于设计师而言,为每个项目选择合适的字体,是已经掌握的特殊技能。今天这篇文章可以让你通过应用一些简单的规则,就能设计出适用于电子、印刷技术或提升项目档次的字体。

如果你正在为选择字体组合而感到困惑,遵循本文规则,你就可以设计出优秀的字体。

目录

1. 定位项目重点

2. 找到相同属性的字体

3. 设置同类型字体尺寸

4. 设置留白空间

5. 选择左对齐

6. 选择两种字体

7. 不要修改默认的字型

8. 使用大量的对比

9. 不要忘记移动端的排版

10. 参考风格指南

1. 定位项目重点

项目开始时,我们需要明确设计目的。当你在Google Font或Typekit等网站寻找字体之前,先问问自己以下几个问题:

  • 项目面向的目标人群是什么
  • 用户会怎样对待这个设计
  • 适合怎样的氛围、心情
  • 需要和其他的设计、品牌相匹配吗

这些答案将帮助你构建出设计的初步框架。

2. 找到相同属性的字体

设计许多的字体组合时,字体的形状细节会影响设计的的好坏。那么,你应该如何进行正确的选择?

首先寻找相似形状的字体。让我们仔细研究每种字体是圆形还是椭圆形、粗或细、高或短、对角的还是倾斜的。

选择要用于标题和正文的字体后,将同样形状的辅助性字体组合在一起。

  • 确认一下各种字体的小写「o」。内侧是圆形还是椭圆形?将[o]形状相同的字体组合在一起。
  • 选择x字高(英文:x-height)相同的字体。
  • 不用担心混合字体风格。衬线和无衬线字体的组合也可以尝试。如果选择了一格复杂的字体,另一种字体选择简单点的会比较好。此外,使用最频繁的地方,如正文,我们还是选择一个简单的字体方便阅读。
  • 小心字体的倾斜度。使用多个斜体或相反方向倾斜的字体对可能会给用户的阅读带来不适,应该避免。

3. 设置同类型字体尺寸

字体的粗细,尺寸是决定项目的好坏的因素之一。文字的尺寸过大会让视线停止,让人无法自然的阅读。另外,文字尺寸过小则会导致视觉疲劳,用户或许会从设计作品上移开视线。

通过正确的设定字符大小,用户可以在内容上自由的阅读。合适的文字尺寸是:和项目中各种各样的尺寸相对应。

正文内容、小标题或大标题等有着各种各样的尺寸。这些尺寸和使用方法,必须保证在设计内具有一致性。

注意以下几点,用户会更容易阅读内容。

  • 文字内容的尺寸,可以根据信息的重要程度来确定优先顺序。字体越大内容越重要,占用用户视觉范围的可能性就更高。
  • 通过缩小文字的尺寸,可以让文本阅读速度更快,能让用户用更短的时间确认内容。
  • 较大的文本元素,可以通过分割长句来更使其容易阅读。

4. 设置留白空间

这种方法本身与字体无关,但是在选择字体时,设置留白的方式也很重要。

字距、行距、跟踪、填衬这些方法,能表现出字体的美感,也有可能将他们弄的乱七八糟。

适当运用留白,会让你设计稿更精致。但它还取决于在实际项目中使用的字符、字体等的组合和大小。

5. 选择左对齐

和其他语言一样,用户在阅读英语、日语、中文的时候,都是从左往右移动视线的,所以理想的突出主体内容可读性的方法是左对齐。

如导航标题和Hero Header,一些文本本身就很容易阅读,所以不用将它们对齐到左边。而对于长句子来说,应该将它们对齐到左边。

6. 选择两种字体

在设计项目中使用了两个字体,这个规则可能很多人知道。

当你打破这个规则的时候,可以看看是否可以用该字体的另一种样式:如粗体、细体、斜体来解决。

7. 不要修改默认的字型

不要去伸展,扭曲,或倾斜你的字体。如果您需要不同的字体,请尝试选择其他方法。

字体设计师花费了大量的时间来做一款好看的字体。如果更改字型,将会损害字体的可读性。

8. 使用大量的对比

​设计师很困扰的一个问题是:如何在图片或背景上加文字。

当给文字添加阴影时,不一定会获得足够高的对比。通过调整亮度,可实现轻松对比,也有助于将普通的风格变得厚重。

有些情况下,照片中既有亮也有暗的地方的情况下,你就可以利用粗体字或细体字形成对比。

让我们考虑选择附加文本,选择较厚的字体,并尝试在照片上叠加颜色。所有的技术都是为了突出了对比,使文本更具可读性。

9. 不要忘记移动端的排版

关于网站排版的问题,移动终端的可读性是最重要的一个问题。虽然给文字添加图案或纹理在某些桌面屏幕上进行打印或显示时不会出现问题,但对于小型设备来说效果并不理想。

所以,考虑这个字体适用在什么地方是很重要的。

对于移动终端来说,字体看起来会略大一些,所以让我们把字体间距做得比桌面宽一点。通过这样做,可以有效减少用户不喜欢的移动操作,例如在阅读短句时多次滚动显示。

10. 参考风格指南

​当您决定要用某种字体在项目时,你需要一个总结了所有用法和规则的样式指南。

比如:请你的元素移至在网页上易于访问的位置,并在该位置修改你的设计。

所以,完美的字体设计的关键因素是:统一性。

总结

字体的好坏,应由用户来决定。

为了设计出完美的排版,利于阅读是最重要的一点。字体容易阅读,便容易理解。所以,为了达到用户可以随时阅读而不用考虑任何事情的目的,字体也应该符合场景想要传达的信息和氛围。

优设人气专题

字体排版手册优设独家专访 | iPhone X 学习指南在线抠图神器灵感大全

纹理素材免费图库配色神器读书计划PPT 神器鲁班设计

iOS 11 学习指南人工智能PS 教程AI 教程C4D 教程

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/select-font-design-rule

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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