响应式网页排版的规则

响应式网页排版很难 - 你需要有设计印章和技术诀窍。但无论多么棘手,错误都不是一种选择,因为排版是网页设计的基石。

你如何获得设计和代码?您的开发人员如何与像素推送设计师进行沟通?您的设计师如何让冷漠的开发人员关注排版?最快捷最简单的方法是让您的设计师和开发人员使用相同的语言,互相尊重他们的工艺,并寻求理解网络排版的原则和局限。

本文旨在为设计人员和开发人员提供基于排版主题开始交流的基础。我们将涵盖必要的设计原则并探索实用的解决方案响应式排版

什么是好的排版?

'好'总是主观的;它不是一个固定的锚,我们可以铰接通信。对于设计师和开发人员进行有效沟通,我们必须首先讨论双方都能理解的共同点。这种分母是排版的目的。

排版是文本的外观;我们正在穿上文字。穿着的目的是使佩戴者足够吸引人以吸引对话,但不要太注意使对方分心。

同样,排版的目的是使读者能够专注并沉浸在文本的内容中。根据定义,良好的排版是帮助文本实现其通信目的的排版。

读者必须注意两件事情,让他们专注并沉浸在文本中。首先,排版必须传达适当的(如果有的话)情感。其次,文字必须易于阅读。这为我们带来了正确的四个基本属性。

  • 字体系列
  • 字体大小
  • 线高(也称为前导)
  • 文字宽度(也称为文字尺寸)

获得正确的字体系列有助于文本的潜在情感发挥作用。正确获取其他三个属性可确保您的文本易于阅读。在大多数情况下,设计师非常擅长找到合适的字体系列。因此,对于本文的其余部分,我们将重点关注其他三个因素。

A modular scale derived from a base font size of 16px and a ratio of 1.5

模块化比例,基本字体大小为16px,比率为1.5

可读文本的艺术

任何项目的第一步是设置字体大小行高宽度你的正文。此过程称为排版。首先使用包含用户所需信息的页面进行排版。该页面应尽可能包含多个元素,如h1,h2,h3,正文和标题,您必须有意识地选择适合您设计的元素。页面包含的元素越多,设置类型方案的可能性就越大。

当你选择字体大小行高并测量您的正文,确保您使用真实内容。如果您没有实际内容,请使用Wikipedia中的文本而不是Lorem Ipsum。

您还需要将自己置于排版的相同情况,因为不同设备的阅读器眼睛与屏幕之间的距离不同。如果您要为移动设备排版,请通过手机查看输出。如果您要为笔记本电脑排版,请使用笔记本电脑坐在办公桌前,等等。

一旦您在适当的环境中安顿下来,首先选择开始排版过程字体大小,接下来是衡量,最后行高。请记住,没有完美的组合 - 只要看看你觉得排版很好的其他页面,你会看到他们都没有使用相同的字体大小行高并衡量。所以,你的目标只是简单易读的文字。

设置正确的尺寸更难以书面形式解释,因此我制作了一些视频来帮助您解决问题字体大小测量领导

以下是一些快速指南,可帮助您确保拥有良好的字体大小,领先和衡量标准。

在以下情况下,您的字体太小:

  • 你必须集中精力阅读文本
  • 你必须眯着眼睛
  • 你有放大的冲动

在以下情况下,您的字体太大:

  • 您开始注意字母而不是阅读内容
  • 您一次只能读一到三个单词
  • 你有缩小的冲动

如果出现以下情

  • 你必须转过头来阅读文字
  • 你在中途失去了注意力

如果出现以下情况,您的文字措

  • 当文本突破到下一行时,您会感到恼火
  • 你的眼睛会因为快速左右弹跳而感到疲倦

如果出现以下情况,您的领

  • 文字感觉密集而且势不可挡
  • 你不小心读了错误的文字

如果出现以下情况,您的领

  • 你会被词行之间的空白分心

永远记住好排版的定义:你不是完美的,你只是在寻找易于阅读的文字。在这样做的同时,您需要与受众一起测试您的排版选择(朋友和同事也会成为优秀的测试人员),以确保您做对。完成排版正文文本后,只需继续设置其他元素的大小。

排版其他元素

许多设计师和开发人员选择了字体大小对于像h1和h2这样的元素在视觉上,并希望这些神奇的数字在他们的设计中运作良好。但是没有必要凭空捏造数字;几个世纪以来,排版师一直使用排版量表来帮助解决这个问题。你所做的就是从排版比例中选择一个数字作为元素的大小。不幸的是,这些尺度不能直接用于网络,因为它们是为打印设计而构建的。

印刷术领域的专家蒂姆·布朗提出了一种称为模块化规模的解决方案。它的功能与排版比例完全相同,除非您使用您决定的正文文本构建模块化比例。

Typographers have used this typography scale to select type sizes for centuries

排版师使用这种排版比例来选择几个世纪的类型大小

要创建模块化比例,请使用正文文本字体大小(也称为基本字体大小)并将其乘以一个比例多次,直到你得到一个比例。通常,您使用的比例来自音乐(因为音乐源于和谐)。以上是在a的帮助下创建的比例的示例模块化计算器

完成模块化刻度后,您可以继续排版其余元素,从刻度中选择一个数字作为您的字体大小。然后使用相同的过程设置前导和度量,直到您获得可读元素的良好平衡。

垂直节奏

下一步是使用一种称为垂直节奏的技术帮助将各个元素凝聚在一起。为了让一个元素和谐地流入下一个元素,我们需要调整连接它们的东西:白色空间。此空白区域必须足够大,以便明确区分下一个元素,但必须足够小,以确保流量不会被破坏。

你应该使用多少空白区域?许多设计师选择像10px这样的数字,这对他们来说很容易设计。另一方面,许多开发人员倾向于从另一个网格系统或他们在线阅读的文章中抽出一个随机数(如6px)。难怪这两个无法沟通。

正如您可能想象的那样,没有必要依靠神奇数字来表示白色空间;我们可以使用多个行高我们正文的价值。这是因为我们本能地识别文本中的空白模式。模式越强,我们感觉越安全,让我们的思想更容易徘徊在内容中。

要使用垂直节奏,您所做的只是:

  1. 将元素之间的空白区域设置为基数的倍数行高
  2. 设置行高所有其他元素到基数的倍数行高

有问题的倍数不需要是整数。您可以使用基数的0.5x和1.25x之类的值行高为您提供更多灵活性。这些值是有效的,因为垂直节奏使用重复原则。

We instinctively recognise the white space is equal to the base line-height since it's already repeated strongly

我们本能地认识到白色空间等于基线高度,因为它已经强烈重复

基线网格还是没有?

每当我们提到垂直节奏时,基线网格的概念就不可避免地出现在图片中。尽管基线网格可能有所帮助,但它主要是火车残骸,因为初学者将如此多的精力集中在使文本位于基线之间(或基线上),以至于他们认为不可能使垂直节奏正确。

老实说,你永远不会让基线网格在网络上完美运行,因为排版中的数学总是包含子像素(如24.8px),并且所有浏览器都以不同的方式处理子像素。例如,某些浏览器会导致页面上的每个元素都被1px关闭。这些1px错误会累积并推动放置在页面下方的任何元素,甚至更远离网格。因此,我建议不要使用基线网格。

继续,让我们进入响应式实践和多屏幕设计领域。

Due to the presence of subpixels, elements quickly end up misaligned from the baseline grid

由于子像素的存在,元素很快就会从基线网格中错位

多个屏幕的排版

为多个屏幕设计排版绝非易事。从设计角度来看,我们需要做三件事。

首先,用户眼睛与屏幕之间的距离取决于他们使用的设备类型。通常,当使用更大的屏幕时,用户将把设备放得更远。这种现象意味着您需要在设备宽度增加时增加字体大小。

其次,我们希望保持正文和其他元素之间的比例一致。这意味着我们必须在增加正文文本大小时增加所有元素的大小。

第三,在特定断点处我们想要增加字体大小通过从模块化比例中选择不同的数字来表示特定元素(如h1)。这样做可以让我们控制视觉层次结构,并确保元素获得足够的注意力以吸引用户阅读。

编码响应式排版

我们知道我们需要按比例增加文字大小。最简单的方法是增加字体大小在...内HTML选择。我们还想使用相对单位来尊重用户字体大小偏爱。

html {font-size:100%;} @media(min-width:40em){html {font-size:112.5%;}}

我们还想为其他元素使用相对单位,因此它们根据HTML进行缩放字体大小H2在下面的例子中)。如果你需要改变字体大小对于模块化规模的不同数字,你要做的只是改变字体大小因此(H1下面)。

h1 {font-size:2.369em;} @media(min-width:40em){html {font-size:3.147em;}} h2 {font-size:1.777em;}

虽然这个过程看起来很简单,但由于涉及数学,新开发人员可能会面临很多麻烦,这就是为什么我建议使用函数和mixins来帮助解决问题。我经常使用女士()来自模块化规模库。有了这个,你可以写MS(4)代替3.157emMS(3)代替2.369em

可以减轻计算垂直节奏负荷的功能示例如下:

@function vr($ rhythm){@return $ rhythm / 16 * 1rem;}

这个VR功能允许你写VR(3)对于三个基线的倍数,而不是自己计算。为了帮助你(和我自己)更进一步,我创建了一个响应式排版库,名为Typi

The MS mixin makes it easier to get font-sizes derived from your modular scale

MS Mixin使您可以更轻松地获得从模块化规模派生的字体大小

相对单位

所有关于相关单位的讨论都以你是否应该使用的问题结束REM要么EM单位。我相信REMEM有他们独特的用例,你应该在不同的情况下使用它们。以下两条规则可帮助您选择使用哪个单位:

  1. 使用EM如果财产需要扩大规模字体大小
  2. 如果没有,请使用REM

有关在这些单位之间进行选择的更多信息看到这篇文章

总结一下

在本文中,您已经了解了响应式Web排版的基本要素。当然,您可以在理论和实施方面深入了解更多详细信息,但您在此处所拥有的内容涵盖了实际项目中所需内容的80%。有了这些知识,您就可以开始与设计人员和开发人员讨论如何为响应式Web设计和编写良好的排版。

响应式排版并非难以置信。这只是一个挑战,因为您需要大量的耐心和勤奋才能发现相关原则,并以适合网络的方式应用它们。

这篇文章最初出现在网络杂志在这里订阅

相关文章:



翻译字数超限