网页排版:建立一个强大的排版系统
为任何新项目设置排版总是一项复杂的任务。实际上有数百个可调整的变量，很容易花无数个小时来调整大小、行高、页边距和权重。保持理智的最好方法是拥有一个能够快速生成大多数小问题的答案的设计系统，这让你能够专注于“大局”决策。
由于读者使用的正文文本比其他任何文本大小都要多，通常我们的第一个关键排版决策是为默认布局设置正文字体大小(让我们暂时把响应式设计放在一边)。多年来，16像素被认为是Web的默认主体大小。
然而，随着如今的屏幕越来越大，博客和新闻服务等文本较多的网站通常会选择18到21像素的字体大小。必威滚使用更繁忙、更模块化UI单元的社交媒体和电子商务应用程序倾向于使用14px到16像素的主体字体。显然，这些是广泛的趋势，而不是严格的规则，但您可以在下面的列表中看到这些总体趋势。
知名网站的典型字体大小
- Medium.com:
21像素 - NYTimes.com:
18 px - CNN.com:
18 px - Airbnb.com:
18 px - 必威西盟体育网页登录SitePoint.com:
18 px - BBC.co.uk:
16 px - Developer.mozilla.org:
16 px - Twitter.com:
15个像素 - Etsy.com:
14像素 - Wikipedia.com:
14像素 - Facebook.com:
14像素
请记住，这些大型互联网公司会进行大量的用户测试，因此请考虑一下您的应用程序在此列表中的位置。当你确定了基本的文本大小后，在真实的屏幕、平板电脑和手机上进行视觉测试，直到你对它们感到满意为止。
调整你的类型
现在你已经设置了body字体大小。你如何决定标题、节标题、子标题、列表和块引号的大小?
对我来说，过去的答案是:嗯，稍微调整一下，让它看起来……“我会放大一个标题，稍微提高一下权重，向上移动一个像素，……向下推，……然后再向上推。”坦白地说，这很累人，因为有太多挑剔的小决定，几乎没有完全错误的答案。
类型扩展——有时被称为模块化扩展-让你使用简单的数学给你简单的排版的答案。它允许我们设置一个缩放比例来生成所有字体大小，同时保持它们的和谐。它就像字体大小的音阶。
实践中的类型缩放
让我们从正文字体大小开始18 px．这使我们的默认段落大小1 em(或18 px)：
{font-size: 18px;} p {font-size: 1em;/*(或18px) */}我将设置一个类型尺度1．25．来计算h5我只是将段落的字体大小乘以1．25．这是1em * 1.25,或1.25 em:
H5 = p * 1.25 = 1.25em我们的h4标题是h5大小乘以1．25（1.25em * 1.25)或1.563 em．继续这个过程会得到如下结果:
/*使用1.25 */ h5 {font-size: 1.25em;} /* 22.50px */ h4 {font-size: 1.563em;} /* 28.13px */ h3 {font-size: 1.953em;} /* 35.16px */ h2 {font-size: 2.441em;} /* 43.95px */ h1 {font-size: 3.052em;} /* 54.93px */如果我决定我的h1标题在这个比例下感觉有点大，我可以把我的字体比例降低到1．2要得到这个结果:
} /* 21.60px */ h4 {font-size: 1.44em;} /* 25.92px */ h3 {font-size: 1.728em;} /* 31.10px */ h2 {font-size: 2.074em;} /* 37.32px */ h1 {font-size: 2.488em;} /* 44.79px */好吧，所以我需要一个袖珍计算器来计算我的文本大小?幸运的是,没有。有一些很棒的工具可以让你实时调整和测试生成的CSS中的类型比例。我最喜欢Jeremy Church的Type-scale.com(下面)，一个工具，让您快速测试不同类型的规模和生成工作的CSS。在右边的面板上甚至有一个虚拟的布局来测试你的工作，还有一个CodePen导出选项。这是排版CSS的一个很好的基础。
单一类型的比例是否适用于所有设备尺寸?
答案是，不，通常不会。我们可以从传统的打印格式中学习。如果你比较一份普通报纸和一本经典的平装小说的版式，你会发现除了明显的纸张尺寸之外，还有一些有趣的区别。
虽然它们的正文字体大小可能非常相似，但报纸标题的大小却有很大的差异。常识告诉你这些标题《纽约时报》根本不适合作为章节标题绿野仙踪．一般来说，较小的格式(如手机和小说)需要较浅的字体比例。
请注意，这种类型尺度上的差异不需要很大。如上图所示，字体规模有一个小的增加1.125到1．25-通过缩放产生一个更大的顶层标题。虽然这h1标题在笔记本电脑上看起来还不错，但在移动设备上却占用了太多空间。
简而言之，使用CSS是明智的@media查询服务于两种类型尺度——用于大屏幕的更陡峭的类型尺度，以及用于小屏幕的更压缩的类型尺度。我们将在项目的后面处理这个问题。
所以，现在我们有了一个可靠的，可重复的过程来缩放我们的设计中的类型，让我们看看空间在这两者之间该类型。
什么是垂直基线节奏?
垂直基线节奏-有时被称为垂直测量-是一个由水平线组成的网格，你可以用它来“悬挂你的字体”。它与我们许多人学习写字的蓝线作业本没什么不同。
诀窍是让你的大字体单元与你的正文文本适合在同一个网格中。在一封简单的手写信件(如下)中，E.G. Webb留出了额外的一排签名。他可能在不知道这叫什么的情况下使用了基线节奏。
在应用于网络的排版风格元素， Richard Rutter是这样描述基线节奏的:
标题、副标题、引文、脚注、插图、说明文字和其他对文本的干扰，与规律引句的基本节奏形成切分音和变化。这些变化可以也应该为页面增添活力，但在每个变化之后，主要文本也应该精确地按照节拍和相位返回。
这在网络上是如何运作的呢?让我们看一个真实的例子。优秀的巨大的杂志使用一个非常开放，通风的布局，但它仍然设法以某种方式感到强大和结构。它是怎么做到的呢?如果我们叠加a21像素垂直网格覆盖整个布局(见下图)，我们看到一个之前隐藏的结构出现。在这个例子中，我将把网格中的一行称为“单元”。
你会注意到:
- 网站品牌很好地符合5个单元高的方框
- 主导航有三个单元高
- 文章标题有两个单元高
- 二级导航和社交链接均为一单位高
事实上，大多数UI元素都“挂”在这个底层网格上，就像挂在隐形晾衣绳上的袜子一样。即使我们看不到底层的网格，我们也能通过一种平衡与和谐的感觉意识到它。感觉很好。
请注意，我们谈论的不仅仅是字体大小，而是文字所占的全部空间——包括行高和页边距。所以在巨大的例如，文章标题的行高为42像素，或每一行两个单位。
但是，你会注意到并不是每一个元素被锁定到这个网格。设计师们选择了抵消网格中的照片等元素。那也很好。网格是一个很好的起点，而不是戒严令。
在UI设计中使用布局网格
大多数现代图形布局工具(如Sketch, Figma或Adobe XD)都可以很容易地向任何画布/框架添加垂直基线。在这个Figma示例中(见下文)，我选择了文档框架并使用+按钮在布局网格面板中添加单独的行和列。
这些网格层可以使用眼睛图标打开和关闭。我发现，有了网格并打开了“快照到网格”，有了网格就比没有网格更容易确定项目的大小。这会让你的生活更轻松。
甚至还有一个工具可以帮助你计算CSS。Gridlover.net(下图)是一个优秀的免费工具，它可以让你尝试不同的基本字体大小、行高和类型比例——所有这些都锁定在垂直基线上。如果你试着在右边的CSS面板上调整任何一行高或页边距，你会注意到这个数字每次只改变一个完整的“网格单元”。
您可能还注意到，该工具避免在其排版中使用CSS填充。我发现，在使用垂直基线系统时，这通常是一个很好的策略。在容器单元上自由使用填充，但在排版上绝对不要使用填充。即使是文本按钮也可以通过行高设置来指定高度，而不是CSS高度或填充。
Gridlover不仅写了有用的CSS，而且它真的帮助我了解垂直基线和类型缩放在现实世界中是如何工作的。我相信这是一个开始CSS排版的好地方。
原型是另一个旨在帮助您创建精心规划的集成类型系统的工具。它在一个非常深思熟虑的UI中提供了类型规模和基准节奏的控制。它甚至鼓励你为手机和台式机设置不同的类型比例。我相信这是这个领域最先进的工具。
唯一需要注意的是，它目前每年需要59美元才能解锁“导出为CSS”选项。显然，这比Gridlover(免费)的花费更大，但如果你花大量时间制作类型系统，就可以节省大量时间(和金钱)。原型是很好。
垂直基线节奏是一种工具，而不是宗教
垂直基线是一个非常有用的工具，但它们不应该成为设计的最终目标。我必须承认，有一段时间，我花了太多的汗水试图弯曲每个页面元素，以遵守我强大的网格规则。我在与排版的百分比和页边距搏斗，“击中网格”本身成为了一个目标，而不仅仅是一个帮助我更好地设计的工具。
那既没意思也没用。
今天，我认为最好将垂直基线视为乐队中强大的低音鼓——一种规律的节奏，有助于测量出乐队其他成员演奏的空间。设置一个每个人都能感觉到的漂亮的背拍，但不要害怕掉一些不符合节奏的华丽。通常，它们可以为作品(视觉或音乐)增添活力和风味。
就我个人而言，我喜欢从一个强大的网格开始。如果在标题或段落之间有空格，它可能是一个，两个或三个“垂直单位”，而不是1.3或2.75单位。总是这样感觉立刻平衡和谐。
同样，你的英雄形象也可能是完全12单位高，不如低11.8或12.3，因为现在图像的下边缘更有可能与旁边的任何文本的下边缘整齐地对齐。这是“self-tidying”。
但另一方面，如果图片上的标题分布在25像素的行高上，看起来太凌乱，那也没关系。忘了格子吧。只要让它看起来好看就行。
的外卖
最终，大多数设计工作只是一长串“为什么”问题的答案。
- 为什么你把主标题设置成49像素高?
- 为什么底边距是17像素?
- 为什么
h3行高为1.7778?
等等。
有潜在的数百这些小问题在一个小项目中。你可能有足够的“设计师本能”来回答这些问题。问题是精疲力尽．
然而，如果你能想出一个可重复的系统，为大多数无聊的小问题提供可行的答案，你就可以把你的设计师直觉留给更大、更重要的问题。
这通常是有趣的部分。
相关文章
