如何处理移动网页设计中的排版，成为每一名产品设计师必备的技术之一，将文字处理排版方式让用户看起来更简单和更安全以及效果最好，在移动产品中占据非常重要的地位，在本文中，我们将分解移动排版中需要注意的元素，然后就如何灵活掌握他们作出一系列的刨析。

1.理解现代网页设计中的排版基础知识

早在很久以前，中国就已经出现活字印刷术，而今穿越历史的长河，我们作为产品设计师，字体排版或许并不是你花费太多时间思考的东西，特别是如果客户在开始项目之前，已经将自己的风格指南带给你，或许你更不会关心你选择的字体是否能真正的运用到排版当中去。

那么也就是就是说，现在移动端产品优先，细节决定成败，一款优秀的字体排版设计，或许会给你的产品带来极佳的体验感，一起了解字体排版基础。

a.排版术语

让我们从基础开始：在深入了解移动排版最佳实践之前，您需要了解的术语，即为“印刷术”。

b.印刷术

这个术语是指在技术在造型中使用，格式化和排列“印制”（相对于手写的）文本。

c.字体

这是用来标记一系列字符的分类系统。所以，这可能是Arial，Times New Roman，Calibri，Comic Sans等等。

字体

这进一步深入到网站的字体。字体属性，字体大小以及应用的任何特殊风格。例如，粗体的11点Arial。

大小

我们有两种方式可以引用字体的大小（或高度）：点处理或以像素为单位的网页设计大小。通常在产品设计中，我们使用像素。

以下是各种字体大小的逐行比较：

重量

这是将字体定义为字体的另一部分。重量是指字体的特殊风格，使其显得更重或更轻。在网页设计中，重量在标题字体中扮演了重要角色，它补充了典型的失重身体文字。

以下是您可以在WordPress主题定制程序中选择的选项示例：

字距

字体之间的间距称作字距，它可以进行调整，以创造更美观的效果，同时增强可读性。您将需要像Photoshop这样的设计软件来进行这些类型的调整。

字间距

字间距常常与字距混淆，因为它与在字体间添加空间有关。然而，字距调整为了改善外观而调整两个字母之间的间距，使用字间距来调整线上的间距。这更多地用于在读取时解决密度问题。

为了让您了解它的不同之处，下面是Mozilla关于如何使用字间距来更改字母间距的示例：

正常情况

1px紧密情况

1px宽松情况

行间距

行间距是文本基线（字体所依据的底线）之间授予的距离。与字间距一样，可以调整以解决密度问题。

如果您一段时间都在使用文字处理软件，那么您已经很熟悉。单间隔文本，双间隔文字或者1.5间隔的文本。

2.排版在现代网页设计中的作用

排版在网页设计中占据非常重要的地位，我们通过定义字体在网页中呈现的特征，来对整体设计产生重大影响，如果一篇文章在字体排版上非常有技巧，那么足以可以让访问者达到满意，也是提升产品用户体验的要素。

a.加强品牌
字体排版是您为您的网页设计创建特定样式的另一种方式。如果图像全部包含简洁的线条和严肃的面孔，那你更需要使用严谨的字体排版。

b.建立情绪版
它有助于建立情绪和影响情绪。例如，更轻薄轻盈的字体会向用户发出信号，表明该品牌很有趣，年轻并且自由活泼。

c.给它一个声音
它传达了一种个性和声音的感觉。虽然文本中的实际信息能够很好地说明，但使用能够强调音调的字体将是一个强有力的选择。

d.鼓励阅读
正如您所看到的，您可以通过多种方式调整屏幕上的类型显示方式。如果你能给它正确的速度和方便感，你可以鼓励更多的用户阅读。

e.允许扫描
扫描或扫视（我将很快讨论）正变得越来越普遍，因为人们通过智能设备与网络互动。因此，我们需要通过格式化文本来提高可扫描性，这通常需要大量标题，拉引号和内联列表（符号，编号等）。

f.提高可访问性
为了设计可访问性，需要做很多工作。字体的选择在此方面起着重要作用，尤其是移动体验不得不依赖大胆的设计和色彩，而更多地依赖于访问者收到信息的速度和速度。

由于排版在用户体验中具有如此多样的角色，因此在制定新设计时需要认真对待这个问题。所以，让我们看看专家和测试人员在处理移动设备时应该做些什么。

3.移动网页设计的排版：您需要了解的内容

太小，太轻，太花哨，太靠近......如果你在设计中选择字体时没有达到完美的平衡，就会遇到很多问题。然而，在手机上，这有点不同。

使用谷歌或苹果的系统默认字体，安全地使用是一条可行的路。

我们知道定义和塑造字体的关键要素是什么，而且我们也知道网站上下文中字体的强大程度。因此，让我们深入了解您需要做些什么才能使您的排版在移动设备上发挥出色。

1.尺寸

一般来说，移动网站的字体大小为16像素。任何小于这个值都会影响视障读者的可读性。任何太多的东西都会让阅读变得更加困难。

一般来说，当涉及到您的移动网站的正文文本时，该规则是安全的。然而，你准确的标题文字是什么？毕竟，你需要能够区分你的主要标题和其他文本。不仅仅是为了引起人们对消息的关注，还为了提高移动网页的可视化。

尼尔森诺曼集团报道了麻省理工学院的一项研究，涵盖了这个确切的问题。你可以对文本做些什么，用户只需要浏览一下？换句话说，你可以使用什么样的尺寸来获取标题文本的短字符串？

他们发现的规律：

简短的可浏览的文本串在以下情况下会导致更快的阅读和更好的理解：

a.尺寸较大（特别是4mm，而不是3mm）。

b.全部大写。

c.宽度是规则的。

总之：

小写字体所需的时间比大写字体多26％，紧密文本所需的时间比正常要多11.2％。案例和大小之间也存在显着的交互作用，表明小字体的负面影响因字体小而加剧。

在这种情况下，我很想看看NerdWallet网站的工作方式。虽然我很喜欢这种外观，但他们违反了一些这些尺寸和造型建议：

NerdWallet在手机上使用全大写字体和更小的字体。

选择全尺寸头文件的小尺寸字体是一个奇怪的选择。

我们的眼睛会立即被吸引到主标题下面的更大，更大胆的文本。

另一方面，Flywheel Sports体育在这方面做了很好的例证。

Flywheel Sports的移动智能字体选择

毫无疑问，用户会注意：“引人注目的标题”，作为设计师，我们使用白色和黄色字体作为与蓝色背景之间的对比。

但是，这仅仅适用于标题文本的大小和样式。

2.颜色和对比度

颜色在网页设计中占据重要元素，在设计中，图片和文字选择正确的颜色，可以向用户传达很多信息，但是这里的颜色不仅仅是字体的基本颜色，它可以是与所处背景之间的对比（如上面关于Flywheel Sports的说明所证明的）。

对于大多数用户而言，复杂的图片或者饱和度较高的背景色，使用白色字体可能不会造成太大问题，但是，“太多”的白色在设计中并不完全接受，这就是为什么我们要考虑颜色和对比度在设计中的问题。

Web Content Accessibility Guidelines（WCAG）中有关如何解决色彩对比的给出建议如下：

a.使用18点或者粗体14点的文本大小只需要3:1的对比度。

b.没有出现在网页有效部分的文字不需要遵守这条规则。

c.标识内的文字对比度可以由设计师自行决定。

然而，使用不透明或者其他颜色设置会影响您选择颜色，可以使用浏览器内置的颜色吸管，如Firefox或Chrome，只需要将吸管悬浮在网页背景（或字体）的颜色上，就可以获取实际颜色的色值为多少。

下面是一个例子：Dollar Shave Club。

本网站在主页的顶部横幅中显示图片旋转，字体始终保持白色。

美元刮胡子俱乐部的主页横幅与灰色的背景。

美元剃须俱乐部的主页横幅与米色/灰褐色的背景。

美元刮胡子俱乐部的主页横幅与紫色背景。

以下是颜色值：

灰色：＃9a9a9a

米色/灰褐色：＃ffd0a8

紫色：＃4c2c59

这些颜色和白色字体的对比：

灰色：2.81 - 1

米色/灰褐色：1.42 - 1

紫色：11.59 - 1

显然，灰色和米色的背景会对用户带来非常糟糕的体验。

3.字间距

我们通过使用字间距来控制移动网页设计中的密度，这里建议每行不超过30或者40个字符，或多或少都可能对可读性产生不利影响。

4.行间距

根据NNG的说法，30英寸桌面显示器上显示的内容等同于4英寸移动设备上显示。诚然，这个数据有点老，因为大多数智能手机现在都在五到六英寸之间：

从2015年到2021年的平均智能手机屏幕尺寸

数据显示，平均智能手机屏幕尺寸会越来越大，那么如果过高的行间距，会使用户在滑动浏览时感到出现疲劳，无聊，沮丧或分心的可能性。

所以，在使用行间距以提高可读性的同时，您还需要在这里达到一个很好的平衡，同时还要掌握他们需要做多长时间才能进入页面的底部。

Hill Holliday使用线条和段落之间的最佳比例。

因此我建议您遵循WCAG的准则：

a.线条之间的间距需要为1.5（或150％，无论哪个比例适合您）

b.段落之间的间距则需要2.5（或250％）。

5.字体的选择

首先，我们一起来看Android和ios两种系统的字体研究。

Android 
Google为其平台（桌面和移动平台）使用两种字体：Roboto和Noto。Roboto是主要的默认设置。如果用户以不接受Roboto的语言访问网站，则Noto是辅助备份。

这是Roboto：

同样重要的是要注意Roboto有许多字体扩展可供选择：

正如你所看到的，有Roboto版本的字距，有更重的粗线以及松散的衬线状选项。总的来说，这只是一个非常干净而简单的程式化字体。在网站上使用它时，你不可能激起任何真实的情绪，也不会传达太多的个性，但这是一个安全，明智的选择。

ios

ios拥有自己的一套系统字体，为苹方。

这只是一种基本的无衬线字体。如果您看看苹果推荐的关于字体默认设置的建议，您还会发现它甚至不建议使用粗体风格或奇怪的尺寸，字间距或行间距规则如下：

字体在Apple官网的展现

就像谷歌的系统字体一样，苹果公司采用了简单而经典的字体。虽然它可能不会帮助您的站点脱颖而出，但它绝不会做任何损害您文本的易读性或可读性的事情。如果你希望你的视觉效果能够产生更大的影响，这也是一个不错的选择。

4.建议如下

a.不要害怕从系统默认字体开始。他们将成为您最安全的选择，直到您掌握能够推动移动排版极限的距离。

b.只能使用无衬线字体或衬线字体时，如果您的使用装饰或手写字体，请将其放在移动设备上更传统的位置。

c.也就是说，你不必完全忽略装饰字体。在Hill Holliday或Flywheel Sports的例子中（如上所示），您可以看到自定义非传统类型的小触点可以添加少许味道。

d.切勿在手机上使用两种以上的字体。没有足够的空间让游客在视觉上处理多种选择。

e.确保你的两个字体互相补充。具体来说，查找使用相似字符宽度的面。每张脸的设计可能都是独一无二的，与另一张脸的设计形成鲜明对比，但是对于移动访问者眼中的内容应该保持一致。

f.避免没有明确字符集的字体。例如，比较大写字母“i”，小写字母“l”和数字“1”如何出现在另一个旁边。以下是来自Typekit网站的Myriad Pro字体示例：

尽管数字“1”没有太多问题，但大写字母“i”（该序列中的第一个字母）和小写字母“l（第二个）”太相似了。这会在阅读移动设备时造成一些不必要的放缓。

此外，请务必查看字体如何处理彼此相邻的“r”和“n”的连接。用户没有时间停下来弄清楚这些角色是什么，所以请确保您使用的字体为每个角色提供了自己的空间。

g.使用尽可能多的设备兼容的字体。你可以选择这些字体：Arial，Courier New，Georgia，Tahoma，Times New Roman，Trebuchet MS和Verdana。

我认为Typeform网站就是一个使用“安全”字体选择的好例子，但并不妨碍他们用信息或设计向访问者发布信息。

他们试图表现出稳定性和专业性

h.如果您对移动排版非常有兴趣，可以查看WebsiteSetup中最好的网页安全字体列表，你会发现在这里大部分的选择是基本衬线和无衬线字体。

6.总结

移动版式在设计中非常枯燥，但是在设计中并不总是创造令人兴奋和前沿的东西，有时候坚持实用和安全的选择是最终可以保证您获得最佳用虎体验，这就是我们在移动端排版中研究得到的。

因此，向前迈进，您会掌握更多的排版方法，为您的项目创建一个强大和统一的外观。

分享两个字体文件，可以自行下载：

链接:https://pan.baidu.com/s/1WoozTGB1Nf00a8161uU87A 密码:q8px

链接:https://pan.baidu.com/s/18vIJWAi-MlIwlMHWybZS4g 密码:af62

原文地址：https://www.smashingmagazine.com/2018/06/reference-guide-typography-mobile-web-design/

原作者：Suzanne Scacca

译者：栗子

本文仅作交流分享呢。