让版式更好看！7个字体排版设计小技巧

今天的文章更基本，但胜利是非常全面，你也可以在做自己的项目时进行自检。关于字体排版的各个方面，特别是关于字体和字体类型的定义让我学到了很多新知识，我以前在翻译过程中并不太关心它 2 单词的区别，今天因为这篇文章专门研究了一波，原来还是有很多讲究的，一起学习吧。

排版在设计过程中起着非常重要的作用:好的布局可以让阅读毫不费力，坏的可以直接说服用户。

第一，字体和字体有什么区别？

在这里我们回顾一下基础知识。有时字体（typeface）和字型（font）它似乎可以在使用中交换，这让人们感到困惑（彩云注：事实上，我经常不注意这个细节，所以我也特别检查了相关知识，这真的是一个很好的知识，在翻译这篇文章时收获了很多）。字体类型是字体的子集，字体类型（font）是指字体（typeface）具体的风格和字重。

（彩云注：typeface 这是一个抽象的总体概念， font 它是这个概念的具体对象。如果是可交换的、现代的、数字艺术的意义，它们都被翻译成“字体”；假如原文强调了两者的区别，“typeface理解为“字体”和“字体”font“字型”可以理解。这样区分)

举个例子，Helvetica 但是 Helvetica Bold 是 Helvetica 字体家族中的一种特定字体。下图，您可以理解字体和字体之间的区别。

二、选择正确的字体风格

以下是三种常见的字体分类

1. 衬线体

衬线体验在构成字母和符号的笔画末端增加了小的装饰笔画。

2. 无衬线体

无衬线体在笔画的末尾和转折点都比较简单，没有装饰。

3. 装饰性字体

用来突出某些内容的短文本。(彩云注:一般不会大面积使用，作为装饰风格挺好的，比如把它放在内容的底部作为底纹。)

4. 尽量少保持字体类型

同时，使用三种以上的字体会使网站看起来不漂亮，看起来非常拥挤。保持尽可能少的字体类型，这两种字体都很好，但一种字体通常就足够了。

5. 使用不同字体的字体重量

在这个项目中，我习惯于使用一种免费字体。Inter"，看上去效果很好。

使用 Inter 界面中字体的实际效果

6. 使用衬线字体和无衬线字体

在下面的网页设计中，我将使用衬线字体“Kepler以“无衬线字体”为标题Futura“作为其他不同的文本内容。

2 界面中不同字体的实际效果

7. 使用装饰性字体作为突出内容

在下面的案例中，我期待着高亮的文本内容“skincare routine"。我在这里用了一个装饰字体“Northwell"，看上去效果很好。

免费意味着不好吗？

让我们看看下面两个相同的字体。左边是免费的字体类型“Inter“，右边是一个要花钱的字形”Söhne”（60 美元授权)。

您怎么看？

就我个人而言，我不认为左边的东西看起来比右边的更糟糕。我想 2 都很好看。

因此，如果预算有限，可以到达 Google 在字体库中选择你喜欢的免费字体。

请注意，如果你在网上找到一个字体，下载和使用并不意味着它是免费的。在决定在哪里使用之前，您必须仔细阅读字体许可证。在大多数情况下，当你看到一个漂亮的字体时，你会发现它不是免费的。

另外，如果你决定使用字体(例如 Helvetica）并且会使用它的三个字重(粗体、中体、细体)，需要同时付费 3 次 $180 (3x$60)。

在这个网站 https://www.myfonts.com 你可以找到字体要花多少钱。

推荐更多优质英文字体：

三、使用默认风格

当你设计网页时，你只能使用它 6 类型标题。

你可以看到下一个标题的名称会比前一个小。它可以帮助更好地组织页面上的信息，提高信息的可读性。

这种限制通常存在于标题中，但在文本中没有，但根据我的经验，4 类型足够：

不仅仅在 PC 在移动端也需要考虑标题和文本的文本风格。

四、选择合适的字体大小

我知道每个项目都会有自己独立的风格体系，品牌大小也取决于使用的字体，但让我们尽可能多地找到一些相对平均的品牌大小和风格来满足更多的项目。

标题号对照表(左边是 PC，右边是移动端)

正文字号对照表(左边是 PC，右边是移动端)

五、在 Figma 设置字体样式

当你已经在 Figma 在建立文本风格时，更容易创建文本块。以下是 Figma 中的样子。

① 创建文本样式，在页面上选择文本>点击字体右侧的“4” “点”图标>单击“+”图标

② 输入您想要创建的字体组件名称

如果您想对文本样式进行结构化管理，并将其分配到不同的文件夹中，您可以在创建名称时添加斜杠：文件夹名称/样式名称

请注意，您可以随时修改字体样式，它会自动在页面上修改您以前使用过的任何字体。

1. 对齐

左对齐

大多数人习惯于从左到右阅读，这就是为什么设计师通常使用左对齐。

居中对齐

当你认为中间对齐在视觉上更漂亮时，你可以尝试使用中间对齐，其他内容最好是中间对齐，保持统一。

当文本内容超过时 3 不建议使用中间对齐，因为这会使内容难以阅读。

右对齐

我发现有 2 文本需要右对齐：

出于语言需要，如希伯来语和阿拉伯语；表格和 UI 当字段名长度不同时，使用右对齐可以使其更接近引用的数据。(彩云注:使用亲密原则)

2. 行高

每个字体都会根据它的大小有一个默认的行高。有时默认行高看起来不错，所以行高让它自动而不需要特别改变。

但是如果字块看起来很拥挤，就需要手动调整它的行高。

(彩云注：在 15px 我通常在字号的时候给它 1.3 到 1.6 倍行高会更舒服，当然也要看具体的字号和字体)

3. 文本块宽度

必须考虑字块的最大宽度，尽量避免字块过长造成的阅读困难。

我发现 660-760px 这是一个更好的字块宽度范围。当你使用这个宽度时，你的眼睛不需要来回移动，阅读起来会很舒服。

六、如何使用大写字母

大写字母适用于短标题和文本块，而不是长文本中的大写字母。

别忘了字母间距

七、检查颜色对比度

你在设计的时候能看清楚文本内容，并不代表每个人都能看清楚。

彩云注：保持足够的文本对比度，具体如何检查：

欢迎关注作者微信微信官方账号:「彩云译设计」