Question

我一直在挖掘很多关于黄金比例和模块化比例的文章，试图了解排版在技术层面的运作方式。我不能说我完全理解它，但现在我对Zurb的基金会4感到更加困惑。

在docs他们已经声明他们不再依赖/使用模块化比例排版。所以我很想知道他们是如何想出这些数字的，尤其是他们的标题元素。

例如：这是他们的标题写在 _type.SCSS

中的方式

$h1-font-size:                         emCalc(44px) !default;
$h2-font-size:                         emCalc(37px) !default;
$h3-font-size:                         emCalc(27px) !default;
$h4-font-size:                         emCalc(23px) !default;
$h5-font-size:                         emCalc(18px) !default;
$h6-font-size:                         1em !default;

// Also...

$paragraph-font-size:                  1em !default;

我的问题;

他们是如何得出这些价值观的，以及它们如何在数学上相互关联？文档似乎没有说明它是如何工作的。
我想将段落字体大小（基线？）更改为18px（1.125em）而不是16px（1em） - 我将如何计算标题元素以便他们重新计算一个合适的/数学上合理的距离？
我是否正确地假设更改标题大小从选择正文字体大小开始，然后从那里计算出来？

我非常感谢有关这个主题的任何建议，我不是最具数学思想的人，所以......要温柔。

谢谢！

Answer 1

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

这是基金会用来计算它的函数，“$ em-base”应该为你提供全局背景。

我在Zurb目前的方法中发现的一件事是，它没有提供足够的功率/足够的灵活性，因此我通常将其修改为：

@function emCalc($target, $context:16) {
    @return $target / $context * 1em;
}

这允许您告诉元素的上下文。

Answer 2

字体大小值不一定是数学完美的一些计算。作者完全有可能尝试了一些价值并认为“这看起来不错”。基于此article，它们似乎最初使用14px @ 1:1.618, 44px @ 1:1.618并进行了四舍五入，最终决定只使用18px代替16.807。使用模块化比例很好，但打破它并不违法。

要回答，你的第二个问题，关于em的伟大之处在于它们是相对的！如果要按比例缩放所有类型，只需更改正文的字体大小：

body {
  font-size: 18px;
}

h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

Demo

由于基金会在ems中完成所有工作，因此您无需编辑任何变量。

Answer 3

我们仍然使用模块化比例来确定字体大小，我们不再使用模块化比例ruby gem来减少依赖性。基础4中的字体大小只是使用黄金比率手工计算（然后舍入），如我们的博客文章中描述的基础3的排版（zurb [dot] com / article / 1000 / foundation-3-0-typography-和模块化-SCA）。

从放大身体和向上计算开始是生成字体大小的好方法，尽管我建议使用双尺度方法，如Tim Brown的文章More Meaningful Typography所述，因为它不那么极端增加。

Answer 4

作者在这篇文章中解释了他们的方法论：

http://zurb.com/article/1000/foundation-3-0-typography-and-modular-sca

Zurb的基金会4如何计算排版？

4 个答案: