Как Zurb's Foundation 4 рассчитывает типографику?

Я рылся в большом количестве статей о золотом сечении и модульной шкале, пытаясь понять, как типографика работает на техническом уровне. Я не могу сказать, что полностью понимаю это, но сейчас меня еще больше смущает Zurb's Foundation 4.

В своих документах они заявили, что больше не используют модульную шкалу для типографики. . Так что мне любопытно узнать, как они пришли к этим числам, особенно в элементах заголовков.

Например: так их заголовки записываются в их _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;

Мои вопросы;

  1. Как они пришли к этим ценностям и как они соотносятся друг с другом математически? В Документах, похоже, не указано, как это работает.

  2. Я хочу изменить размер шрифта абзаца (базовая линия?) На 18 пикселей (1,125 м) вместо 16 пикселей (1 м) - как мне вычислить элементы заголовка, чтобы они находились на подходящем / математически обоснованном расстоянии друг от друга ?

  3. Правильно ли я предполагаю, что изменение размеров заголовков начинается с выбора размера основного шрифта и последующего расчета оттуда?

Буду очень признателен за любой совет по этой теме, я не самый математически мыслящий человек, так что ... будьте нежны.

Спасибо!


css responsive-design sass typography zurb-foundation
person JCraine    schedule 08.04.2013    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Значения размера шрифта не обязательно являются расчетом на математическое совершенство. Вполне возможно, что авторы попробовали несколько значений и подумали, что «выглядит хорошо». На основании этой статьи кажется как будто они изначально использовали 14px @ 1: 1.618, 44px @ 1: 1.618 и много округлений, и в конце концов решили просто использовать 18px вместо 16.807. Использование модульных весов - это хорошо, но нарушение их не является незаконным.

Отвечая на второй вопрос, ems замечательно в том, что они относительны! Если вы хотите пропорционально масштабировать весь шрифт, просто измените размер шрифта в теле:

body {
  font-size: 18px;
}

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

Демо

Поскольку Foundation все делает в EMS, вам не нужно редактировать какие-либо переменные.

person bookcasey    schedule 08.04.2013
comment
Спасибо за очень обстоятельный и продуманный ответ, это было большим подспорьем! Первоначально я немного не решался добавить значение в тело, потому что это повлияло на сетку, но добавление максимальной ширины в строке, казалось, содержало все нормально. Спасибо еще раз! - person JCraine; 08.04.2013
comment
У jnowland есть лучший ответ здесь. - person Graeck; 14.09.2013

arrow_upward
6
arrow_downward 

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

Это функция, которую Foundation использует для вычисления, "$ em-base" должна дать вам глобальный контекст.

Одна вещь, которую я обнаружил в текущем подходе Zurb, заключается в том, что он не дает достаточно мощности / гибкости, как каскад em, поэтому я обычно модифицирую его так:

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

Это позволяет определить, в каком контексте находится элемент.

person jnowland    schedule 28.05.2013
comment
Лучший ответ. Обратите внимание, что для переменной $ em-base установлено значение: $ em-base: 16px! Default; - person Graeck; 14.09.2013

arrow_upward
1
arrow_downward

Мы по-прежнему используем модульную шкалу для определения размеров шрифта, мы просто больше не используем модульную шкалу ruby ​​gem, чтобы уменьшить зависимости. Размеры шрифта в Foundation 4 были просто рассчитаны вручную (затем округлены) с использованием золотого сечения, как описано в нашем сообщении в блоге о типографике для Foundation 3 (zurb [точка] com / article / 1000 / foundation-3-0-typography- and-modular-sca).

Начинать с масштабирования тела и вычисления в сторону увеличения - хороший способ сгенерировать размеры шрифта, хотя я бы предложил использовать подход с двумя масштабами, как описано в статье Тима Брауна Более значимая типографика, поскольку это гораздо менее значительный рост.

person Eric Morris    schedule 13.09.2013
comment
Спасибо, Эрик, это было действительно полезно. Этот метод все еще используется в Foundation 5? Похоже, что используются прямые размеры пикселей и на их основе рассчитывается rem, не так ли? - person IanVS; 27.12.2014

arrow_upward
0
arrow_downward

Авторы объясняют свою методологию в этой публикации:

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

person camainc    schedule 24.07.2013