设置网页文字为一个基线网格_宁波网站建设_慕枫网络

宁波网站建设 | 2017-11-09

网页设计本质上是印刷设计发展过程中原理的进化和理论的创造。 传统的设计行业为网页设计带来了很多技术与理念,但这些在虚拟环境中需要花费更多的时间才能掌握。 更不幸的是,我们没有一个单一的平台来展示我们的内容;我们必须与多个浏览器、操作系统和屏幕尺寸作斗争。

随着网页设计的发展,我们也观察到了一些设计原则。 基于网格的设计近年来有所增加,这些设计师可以根据列网格来布局他们的网站。 网格系统成为一个非常流行的布局方式,通过使用比例和平衡来组织和对齐元素,并向页面添加秩序。

基于我们使用比例和平衡的知识,可以利用另一种印刷设计理念:基线网格。

什么是一个基线网格?

基线网格是一种用于改善基于网页排版的技术。 本质上,它将所有文本对齐到垂直方向上的网格(简称垂直网格,可以理解为一行),每个字母的底部都位于网格上,就像在划线纸上书写。 最终的结果是:通过潜意识的平衡以及一致性,使页面上的文本达到完美的组织。

正如我之前所说,印刷是一种静态媒介。 为打印格式而设计时,允许你在你的观察窗口(例如PS、AI等设计软件上的画布)上设定最终的呈现效果。 然而,由于你的设计可以通过网页在各种可选的平台上进行解析,对于使用不同设备或者平台的用户,CSS渲染你的行高值和其他印刷值也将会有所不同。 对于许多设计师来说,这只能通过猜测和预测最后呈现在用户面前的样式。

在印刷中的基线网格

许多印刷设计师通过结合他们的设计工具来使用基线网格,比如说InDesign、PS和AI等等。 印刷中的网格可以追溯到早期的1200年代。 事实上,从网格到黄金比例(即大多数基于数学的理论)的一切都可以在生活中随处可见,最突出的是建筑。

网格使得可以将所有的设计元素(文字、摄影、绘画和颜色)彼此之间构成形式上的关系;也就是说,网格系统在设计中是一个引入秩序的手段。 有意地对元素进行组合比起对元素随机地布局更具有清晰、整洁和成功的效果。 -- Josef Müller Brockmann。

创建一个基线网格

现在,让我们来看一下在实际操作中,如何创建一个基线网格。

首先,我们必须基于与字体大小的比率来定义基线网格的行高(line-height)。举个例子,1:1.5是一个不错的数值,为我们提供了一个50%的呼吸空间。 如果文字尺寸为12px,那么行高(使用1:1.5这个比例来计算)将会是18px。 150%是一个不错的数值,为我们的设计提供了易读性,当然,这个数值不是固定的,你可以取任何合适的数值。 但是,当考虑行高时,你应该尽可能选取130%-160%范围的比率(对于西文来说是这样的,对于中文,行高可大于这个数值)。

在我们再进一步之前,你应该了解 CSS line-height 实际上是如何工作的。 line-height是文本行的整体高度,而不是文本本身。 它的工作原理是通过在文本上方和下方添加填充,以使其空间化(可以理解为上下留白)。 如果我们实际上拿一些文本并为其设置一个背景,我们将会看到文本位于行中间,而不是完全覆盖在行上方。

进入CSS

为了简单起见,假设我们的文本的基本大小为10px。 通过坚持使用我们的比率(1:1.5),这意味着我们的行高将会是15px。 (注意,10px是相当小的字号,大多数情况下我不建议使用这个字号,我使用它纯粹是因为它在这里比较容易计算)。 为了使各种元素适合我们的基线网格系统,我们需要在我们的CSS中设置它们。

在我们继续之前,这些例子都假设你使用了某种CSS重置文件。 如果你没有使用,那么默认边距可能会干扰我们今天的工作。

段落

为了解决这些问题,一旦我们设置了行高,我们需要在每个标题和段落下面留下一致的边距。 因为我们在这里使用一个15px的网格,我们通过覆盖p标签的标准底部外边距(默认情况下是1em,在我们这个例子中将是10px),我们修改为15px,与文本中的行高保持一致。 这将在每个段落下面创建一个比例空行,等于文本驻留在那里的高度。


段落


段落

这是结果:在文本主体中,段落下方的外边距等于行高。

标题

类似地,对于标题,我们只需要继续服从15像素的增量。 通过简单地在我们的外边距上标记150%的行高,我们创建一个类似的,一致的断点。


标题


标题


右边的示例应用了我们的CSS,这使得我们的标题下的外边距符合我们的基线网格。 由于我们的标题的字体大小是我们的正常文本的两倍,它在我们的网格中占用了两行。

在我再进一步之前,你需要注意,如果你为文本应用一个背景,你的文本实际上可能不会总是坐在行上。 不要担心,只要行高保持不变就好了。 如果你的文本浮动行的中间,你可以很容易地用你的边距,但它不是必要的。

列表

接下来,我们如何处理列表? 首先,我们要以对段落的相同方式应用标准外边距。 这使得断点与内容的断点保持一致性。


列表

现在开始变得容易了! 如果您在其他地方定义的行高仍为15px,那么您的列表将与其余内容完美匹配。

列表


由于我们的行高是在父元素的CSS中定义的,我们只需要定义外边距,使得列表在基线网格系统中运行。

图片

图像是开始变得有点困难的地方。 最好的情况下,我们希望外边距具有相同的一致性,因此图像被视为与文本块相同(与文本块的顶部与底部对齐)。 这意味着你的图像需要为你的行高值的整数倍,在个例子中,是15的整数倍。

在我的例子中,我使图像浮动到右边,所以我有一个15px外边距应用于左侧和底部。 与段落并排在现有的外边距下方,这给了我们一个统一的外边距。


图片

当然,这些不是我们需要修改以符合我们的新基线网格的唯一元素。 关键是要确保你在一个一致的增量内工作,所以一切都被限制在同一个网格。 这可以在整个网页中,使用大的文本框架时,使得和谐与平衡变得更明显。

我们的例子

这里是我们完成的例子,一个简单的网页,包括段落,标题,图像和列表。 如果你使用你自己的规则,这是可以的,但我可以向你保证,在我们的活版印刷中,一切都遵循一致的网格。


我们的例子


我们只是破坏了使用基线网格的表面。 当你开始尝试将它们应用到更复杂的设计时,它可能会变得更加困难,最终几乎不会在网络上使用。 然而,它可能并且可以创造一个平衡的,成比例的设计,其可以有助于更好的终端用户体验。

结论

基线网格是为您的排版添加一些平衡和比例的好方法。 这是一些微妙的措施,可以在你的设计中添加一些自然的感觉。 在基线网格的情况下,我们的排版使用一致的标准间距,赋予它和谐的感觉。

然而,不幸的是,我们仍然必须与浏览器不兼容的威胁作斗争,当用户在可选的浏览器、操作系统或设备上浏览时,这可以使CSS渲染得方式不一致。 这看起来不是CSS的一个任务,虽然添加基线网格确实提供了其他优势。 例如,这种类型的网格系统在缩放时可以提供巨大的帮助,因为它迫使浏览器重新渲染它的CSS。 基准网格提供了一些更多的灵活性,鼓励浏览器正确做事情。

这是一个比平常更短的文章,因为基线网格实在是没有很多解释或显示如何使用。 真正的魔法来自于设计师调整和测试,以确保他的基线网格能工作,并且,最重要的是,赋予其设计视觉吸引力。


慕枫网络专业从事宁波网站建设,宁波网站设计,宁波网站制作

上一篇:宁波网站建设_数学与网页设计之间的密切关系下一篇:三种无障碍设计经验_宁波网站制作_慕枫网络
联系电话 400-6065-301

建站咨询 星星-总监

投诉