In both print design and web design, typography plays an important role. After all, content is king, and text content is prevalent in the web. That is why it is important to adopt a content-first approach to design. When content is well-designed, everything else (layout, structure, colors, transitions, etc.) will follow.

在印刷设计和网页设计中，版式都扮演着重要角色。 毕竟， 内容为王 ，而文本内容在网络中盛行。 这就是为什么采用内容优先的方法进行设计很重要的原因。 内容设计合理时，其他所有内容（布局，结构，颜色，过渡等）都将随之而来。

There are many useful tools and utilities in Sass for customizing typographical styles. Instead of trying to recreate these tools, we will exploring:

Sass中有许多有用的工具和实用程序，用于自定义印刷样式。 除了尝试重新创建这些工具之外，我们还将探索：

  1. How to organize typographical styles in Sass, and...
  2. The use of vertical rhythm for layout.

We will be recreating this mockup below (by talented designer Thomas Budiman) to demonstrate how using both a modular type scale and a vertical rhythm can provide a systematic way of laying out content in your projects, without having to use magic numbers.

我们将在下面（由才华横溢的设计师Thomas Budiman设计）重新创建此样机，以演示如何同时使用模块化类型音阶和垂直节奏来提供系统的方式来布置项目中的内容，而不必使用幻数。

美化javafx_java

(Modular Type Scales)

Choosing a modular type scale answers the question, "Which font sizes should I use in this project/design?" It provides you a set of proportional values to set the varying sizes of text used throughout a consistent design. From the Elements of Typographic Style:

选择模块化的字体比例会回答以下问题：“在此项目/设计中应使用哪种字体大小？” 它为您提供了一组比例值，用于设置在整个一致性设计中使用的各种文本大小。 从印刷样式的元素 ：

A modular scale, like a musical scale, is a prearranged set of harmonious proportions. - Robert Bringhurst

像音乐音阶一样，模块化音阶是一组预先设定的和谐比例。 -罗伯特·布林赫斯特

There are many tools that can be used to choose a modular scale, some of which can even be easily used with Sass:

有许多工具可以用来选择模块化秤，其中一些甚至可以很容易地与Sass一起使用：

  • Modular Scale (has a Sass plugin) 模块化比例 （具有Sass插件）
  • Type-Scale 类型规模
  • Grid Lover (provides Sass variables) 网格情人 （提供Sass变量）

Choosing a modular scale is up to you and/or your designer(s). Sometimes, the chosen scale will be slightly changed to use discretionary values (or rounded values), and that's okay. The point is to choose a type scale and stick with it throughout the project.

选择模块化秤由您和/或您的设计师决定。 有时，所选择的比例会略有变化，以使用任意值（或四舍五入值），这没关系。 关键是要选择一个类型标尺，并在整个项目中坚持使用 。

For the example, I've chosen a scale based on 1rem with a ratio of 1.333 (4:3, or a perfect fourth). Each value of the scale can be represented in a Sass map:

对于示例，我选择了一个基于1rem的比例，比例为1.333 （4：3或完美的四分之一）。 比例尺的每个值都可以在Sass映射中表示： 

$type-scale: (
  -1: 0.75rem,  // small text
  0: 1rem,      // body text
  1: 1.333rem,  // large text
  2: 1.777rem   // main heading
);

The map keys represent the power of the ratio; e.g. 1rem * 1.3332 = 1.777rem. You can also have the map keys represent the semantic meaning of each value, such as small: 0.75rem.

映射键表示比率的幂 ; 例如1rem * 1.333 2 = 1.777rem。 您还可以让map键代表每个值的语义，例如small: 0.75rem 。

Let's use these values (with a small helper function) to start the typographical styles of this design:

让我们使用这些值（带有一个小的辅助函数）来启动此设计的印刷样式： 

@function type-scale($level) {
  @return map-get($type-scale, $level);
}

(Baseline Grids and Vertical Rhythm)

When you saw the above design, did you ask yourself, "How am I supposed to know exactly where all the items go vertically?" Turns out, designers frequently use what's called a baseline grid to properly layout elements and to provide consistency in design. It is a repeating set of vertical guides where the baseline of text can be aligned to, but it's not limited to just typography. Baseline grids are very useful for aligning other visual elements, such as buttons, and even for overall content layout.

当您看到以上设计时，您是否问过自己：“我应该如何确切知道所有物品在垂直方向上的位置？” 事实证明，设计人员经常使用所谓的基线网格来正确布局元素并提供设计一致性。 它是一整套重复的垂直指南，文本的基线可以对齐，但不仅限于排版。 基线网格对于对齐其他视觉元素（例如按钮）甚至整体内容布局非常有用。

The distance between baselines is known as line height or leading. Because we want the line height to be consistent regardless of font size, we'll be using unit values to ensure this*. One way to determine each font size's respective line height is:

基线之间的距离称为线高或前 导线 。 因为我们希望行高与字体大小无关而保持一致，所以我们将使用单位值来确保这一点*。 确定每种字体大小各自行高的一种方法是：

  1. Determine the base line height, which is a ratio (usually between 1.2 and 1.5) multiplied by the base font size. E.g. 1.25 * 1rem = 1.25rem. 确定基线高度 ，它是比率（通常在1.2到1.5之间）乘以基础字体大小。 例如1.25 * 1rem = 1.25rem 。
  2. Use a multiple of the base line height for each font size, typically closest to (but larger than) the font size. E.g. for 1.777rem, a line-height of 1.25rem * 2 = 2.5rem is appropriate. 为每种字体大小使用基线高度的倍数 ，通常最接近（但大于）字体大小。 例如，对于1.777rem ，线高为1.25rem * 2 = 2.5rem是合适的。 
$base-font-size: 1rem;
$base-line-height: $base-font-size * 1.25;

$line-heights: (
  -1: $base-line-height,
  0: $base-line-height,
  1: $base-line-height * 2,
  2: $base-line-height * 2
);

// Again, we can make a helper function:
@function line-height($level) {
  @return map-get($line-height, $level);
}
  • Common wisdom in CSS is to use a unitless number for the value of line-height to avoid unwanted line-height cascading for nested elements containing text. However, in this system, all elements containing text should/will have an explicit line height set, so they won't be influenced by the cascade. CSS的常识是使用无单位数作为line-height的值，以避免包含文本的嵌套元素不必要的行高级联。 但是，在此系统中， 所有包含文本的元素都应该/将设置显式的行高，因此它们不会受到级联的影响。

(Using Vertical Rhythm for Layout)

Of course, not all of the content in a design will be text. The calculated line height can be used in layout for determining vertical padding or margins, so that other elements are also aligned to the baseline grid. For example:

当然，并非设计中的所有内容都是文本。 可以在布局中使用计算出的线高来确定垂直填充或边距，以便其他元素也与基线网格对齐。 例如： 

.heading-1 {
  margin-bottom: $base-line-height;
}

.recipe-button {
  // ... other styles
  height: $base-line-height * 2;
}

(Relative Vertical Rhythm (or Breaking the Rules))

The above system for using line height and aligning content to a consistent baseline grid are simply guidelines, not rules. With this said, sometimes a design might deviate from a baseline grid, especially if it's not text-heavy or if tighter vertical spacing is desired.

以上使用线高并将内容对齐到一致的基线网格的系统只是指导原则，而不是规则。 如此说来，有时设计可能会偏离基线网格，尤其是在文本不繁琐或需要更紧密的垂直间距的情况下。

When this is the case, vertical rhythm can still be assumed with relative vertical spacing, as long as a consistent value (or proportional pair of values) is used, such as 1rem or 0.5rem, 1rem. This can make it easier to rapidly scaffold and code a design.

在这种情况下，只要使用一致的值（或成对的比例值），例如1rem或0.5rem, 1rem ，仍可以假定垂直节奏具有相对的垂直间距 。 这可以使快速搭建和编码设计变得更加容易。 

// Example using 1rem or 0.5rem consistently,
// regardless of base line height
.field, .heading-1, .paragraph /* etc. */ {
  margin-bottom: 1rem;
}

.field > .label {
  display: block;
  margin-bottom: 0.5rem;
}

(Putting It All Together)

Using the original mockup, let's put this to code and see how aligning to a vertical baseline grid produces an aesthetic design on the web, without using magic numbers. We'll use a @mixin to help us out:

使用原始的模型，将其放入代码中，并查看与垂直基线网格对齐如何在不使用幻数的情况下在网络上产生美观的设计。 我们将使用@mixin来帮助我们： 

@mixin type-setting($level: 0) {
  font-size: type-scale($level);
  line-height: line-height($level);
}

// The main heading
.heading-1 { @include type-setting(2); }

// The smaller top heading
.heading-2 { @include type-setting(-1); }

.paragraph { @include type-setting(0); }

.recipe-value { @include type-setting(1); }

.recipe-text { @include type-setting(-1); }

.recipe-button { @include type-setting(-1); }

With the rest of the styling added, here is our end-result (hover over the recipe card to see the baseline grid):

添加了其余样式后，这就是我们的最终结果（将鼠标悬停在配方卡上以查看基线网格）：

See the Pen Baseline Grid Demonstration by David Khourshid (@davidkpiano) on CodePen.

见笔基线电网示范大卫Khourshid（ @davidkpiano ）上CodePen 。

Investing a little bit of time into using a baseline grid and calculating font sizes based on a modular scale allows you to create aesthetic, consistent styles without the need for magic numbers or pixel-pushing. Vertical rhythm can also be used for more than just text elements -- it can be used to calculate vertical margins and/or padding between elements, as well as adjusting the height of static elements so that they align to the baseline grid.

花一点时间使用基线网格并基于模块化比例来计算字体大小，使您可以创建美观，一致的样式，而无需使用幻数或按像素。 垂直节奏不仅可以用于文本元素，还可以用于计算元素之间的垂直边距和/或填充，以及调整静态元素的高度，使其与基线网格对齐。

As always, the guidelines above are merely suggestions. There's more than one way to organize your type settings (see the SCSS in the Codepen example) and you might define your Sass functions and mixins differently, but the underlying principles are the same: organize important style values into maps, lists, and/or variables and stay consistent with these values. That way, they become easier to use and manipulate throughout your Sass projects.

与往常一样，以上指南仅是建议。 有多种方法来组织类型设置（请参阅Codepen示例中的SCSS），并且可以定义Sass函数和mixins不同，但是基本原理是相同的：将重要的样式值组织到映射，列表和/或中。变量并与这些值保持一致。 这样，它们将在整个Sass项目中变得更易于使用和操纵。

翻译自: https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm