B端设计｜全方位讲解下字体设计规范

B端设计｜全方位讲解下字体设计规范

字体属性包含很多内容。 我们可以以 Figma 或 Figma 的文本属性栏为例分别进行解释。

1.1 字体选择Font-

字体是不同风格的文本。

在UI字体应用中，字体正常显示的条件是您的设备已经加载了相应的字体文件。 比如我们在Font文件夹中添加的字体只是为了在设计过程中可以调用。

同理，如果我们要设计B端界面，所使用的字体不仅要安装在自己的电脑上，还需要安装在用户的电脑上。 因此，在B面设计中，我们使用的字体范围很小。 常用的中英文字体如下：

对于中文项目的设计，除非你想突出显示一些数字并选择其他英文字体，否则建议使用微软雅黑或思源黑来开发设计（即使中间出现英文）。

不用太担心这两种字体的用户不会出现这样的问题。 相对标准的粗体款式差别不会太大。 网页的基本CSS样式表会为调用字体做很多准备工作，比如下面的代码：

字体-： SC, "SF Pro SC", "SF Pro Text", " Neue", , ,'arial', ' yahei ui', "YaHei", , sans-serif

每个逗号前面都有一种字体。 浏览器会按照这个顺序依次读取你本地的字体文件，在网页中显示文字。 如果第一个不可用，则将由第二个替换，依此类推。 如果指定的字体均不可用，则会根据您当前系统默认字体显示。

最后还有一点，就是很多设计师都关心字体的商业版权问题。 在网页可用的字体范围内，无需考虑任何版权问题，您可以放心使用。 我不会在这里讨论更复杂的细节。

1.2 字体大小选择-Font-size

文本字体大小是用于文本的大小的数量。 在网页中，字体大小以 px 为单位确定。

通常，网页设计中中文字体的最小字号控制在12px。 当达到11px时，已经有很多文字无法正常显示了。 纯英文或数字文本的最小字体大小约为 9 像素。

下表显示了不同类型文本中使用的字体大小范围：

英文评论和数字：9-11px

注释、小段落文字：12-13px

文字、字幕：14-16px

大标题和数字：16-20px

建议新手设计者记住这张表，并在定义字体大小时根据文字类型进行设置。 不要把B面界面设计当成扁平化的相册设计，这样会导致字体大小很不平衡。

1.3 字体粗细的选择 Font-

字体粗细是字体笔划的粗细。 在UI设计过程中，我们对字体粗细的控制是根据字体本身的粗细来调整的。 成熟的字体将包含多个级别的粗细。

当我们点击字体粗细选项菜单时，那里显示的字体粗细是由字体文件本身携带的。 如果不包含其他字体粗细，则字体粗细选项将只有默认值。

因此，在设计过程中，无论是中文还是英文，都只使用了三种字重：Light、()、Bold(粗体)。

1.4 理解颜色一词 Color

单词颜色自然就是文本的颜色。 我们对文本颜色的应用将在下一个颜色规范中详细说明。 在这里我们先分享一些关于网页文字颜色的基础知识。

在网页中，字体只能使用纯色，B面应避免使用渐变字体颜色。 同时，网页的颜色仅使用RGB模式，并使用十六进制代码来指向特定的颜色，这是颜色面板中常见的一串符号。

1.5 文字样式 Font-style、Text-

除了这些选项之外，最后要说的就是文本的样式内容。 在网页设计中，除了上述的文字属性设置外，CSS还可以给文字添加以下效果：

除了设置文本本身的样式属性外，我们还需要考虑文本放置在画布中的布局。 为了让文字更好的实现页面布局和浏览效果，有必要了解以下设置。

2.1 文本区域

我们先来说说文本区域。 我们说过B面设计中的任何元素都包含一个矩形视图。 对于一整段文本来说，其查看区域就是接下来要朗读的文本区域。

网页文本区域设置与软件中的设置非常一致（比手机客户端直观得多）。 文本区域分为三种类型：水平适配、固定模式、固定大小。

在设计的时候，我们要根据文本的类型来决定使用哪种文本模式。

2.2 对齐方式Text-align

对齐方式是文本区域中文本内容的对齐方向。 最常见的左中右对齐就不详细介绍了。

我们将讨论网页设计中提供的水平对齐选项。 如果文本区域大于文本的高度，则文本将水平居中。

水平居中的功能与表格中的类似。 表格中有些文本可能只有一行或两行，因此可以使用这种对齐方式来适应不同的情况。 此设置在移动设计中很少使用。

此外，在网页上下文中，文本对齐不使用两端对齐的文本。

因为强行对齐两端会导致文字间距被奇怪地修改，从而极大地影响视觉效果和阅读体验。 专业网站在处理多行文本时使用自然对齐。 右侧不一致是正常的。

2.3 线高 Line-

行高也是所有UI设计师头疼的问题。 行高是文本区域中一行文本的实际高度，与字体大小不是同一属性。

使用行高的主要目的是为了让多行文本的阅读体验满足我们的需求，因为如果不设置行高，网页上的两行文本之间就会没有间距，导致无法阅读。正常读取，所以我们可以通过行高来设置。 宽松或紧凑的款式。

在网页设置中，新手最困惑的就是如何确定行高。 建议新手将行高控制在字号的1.2-2倍之间，然后根据自己的需求和实际效果来决定。 行高没有通用的默认值，因此您必须自己进行测试。

2.4 段间距P

最后，在文字排版方面，软件为我们提供了一个属性，段落间距，也就是段落之间的面积，通过增加空白来改善阅读体验。

段落间距不是默认的 CSS 属性，在实现它时经常使用其他属性。 B面设计中尽量避免使用一个文本框来容纳多段文字。 将每个段落设计为独立的文本框可以最大限度地提高开发效率。

这里先介绍一下正文部分的规格。 色彩应用中比较麻烦的部分我们留到下一篇文章统一讲解。