answer_new.jade

style.
  .metroheading {
  font-size: 1.3em;
  line-height: 1.3em;
  font-family: Georgia, Times New Roman;
  }
  .heading {
  font-size: 2em;
  line-height: 1.3em;
  font-family: Georgia, Times New Roman;
  }
  .headinglump {
  letter-spacing: 0.4em;
  text-transform: uppercase;
  }
  .imgbox {
  border: #dddddd 1px solid;
  padding: 18px 18px 32px 13px;
  }
  .pagebox {
  nebackground-color:#f5f5f9;
  color:#444444;
  border: #dddddd 1px solid;
  padding: 18px 18px 32px 13px;
  }
  .imagebox {
  border: black 1px solid;
  }
  .buttonbox {
  border: #999999 1px solid;
  background-color: #f5f5f5;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  }
  .loremipsum span {
  font-size: 9px;
  line-height: 10px;
  necolor:#f5f5f9;
  color: white;
  border-bottom: #b2b2b2 1px solid;
  }
  .loremheading {
  margin-bottom:0.4em;
  }
  .loremheading span {
  font-size: 10px;
  line-height: 20px;
  necolor:#f5f5f9;
  color: white;
  border-bottom: #444444 10px solid;
  font-weight: bold;
  }
  .loremlink {
  margin-bottom:0.4em;
  }
  .loremlink span {
  font-size: 10px;
  line-height: 10px;
  necolor:#f5f5f9;
  color: white;
  border-bottom: #0060ff 3px solid;
  }
p.lifirst.first
  | Типографы веками искали закономерности и связи между элементами набора:  буквами и апрошами, строками и интерлиньяжем, полосой набора и полями. Каждое открытие складывалось в бесконечную копилку правил:
ul
  li прописные нужно разрежать,
  li строчные нельзя разрежать,
  li вертикальные штрихи строчных и прописных должны стоять через равные промежутки,
  li разрядка прописных должна быть меньше интерлиньяжа,
  li пробел между строками прописных букв не может быть меньше высоты буквы,
  li интерлиньяж должен быть больше межсловных пробелов,
  li
    | при минимальном интерлиньяже нижние выносные элементы верхней строки почти касаются верхних выносных элементов следующей строки,
  li чем длиннее строка, тем больше интерлиньяж,
  li интерлиньяж не должен быть больше внешних полей,
  li
    | элементы списка должны иметь между собой дополнительный отступ больше интерлиньяжа,
  li номер страницы должен стоять ближе к полосе, чем к краю страницы,
  li заголовок в тексте должен стоять ближе к следующему абзацу, чем к предыдущему,
  li
    | расстояние от заголовка до абзаца не должно быть меньше межстрочного интервала заголовка,
  li(style='text-align:center') ∞
p
  | Современный дизайнер так и собирает знания по крупицам — из книг, советов коллег, замечаний арт-директора.
p
  | Запомнить даже перечисленные правила довольно затруднительно. Если дизайнер и вызубрит собственный набор правил, всегда найдутся такие, о которых он 
  nobr не слышал,—
  |  копилка-то бесконечна.
p
  | Но одно дело знать огромный свод правил, а другое дело последовательно применять их к каждой части макета. Даже на простенькой странице из заголовка и текста ошибок у новичка найдётся в двадцать раз больше, чем элементов.
p
  | Вместо того, чтобы зубрить тысячу правил, я предлагаю дизайнерам запомнить один принцип и научиться последовательно применять его ко всем элементам вёрстки. «Правило внутреннего и внешнего» — базовый принцип типографики, работающий на всех уровнях от буквы до разворота.
+sidenote({mod: 'marginal'})
  ul
    li
      | Артемий Лебедев. 
      a(href='http://www.artlebedev.ru/kovodstvo/sections/136/') Теория близости
    li
      | Совет 
      a(href='http://artgorbunov.ru/bb/soviet/20090112') об общей теории близости
p
  | Правило внутреннего и внешнего — это частный случай теории близости. Типографический объект любого уровня состоит из других объектов: буквы из штрихов, слова из букв, строки из слов, абзацы из строк. И для того чтобы объект имел самостоятельное значение, то есть буква, слово, строка и абзац отделялись от соседних, его внутренние расстояния должны быть меньше внешних.
p Рассмотрим заголовок из прописных букв:
+rule
  p(align='center') МЕТРОПОЛИТЕН
p
  | Штрихи каждой буквы заключают в себе её внутреннее пространство. Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа. Из-за этого возникает ощущение, что соседние буквы вторглись в личное пространство друг друга, а вся надпись — слиплась.
p
  | Увеличим расстояние между буквами, чтобы изменить соотношение внутреннего и внешнего:
+rule
  p(align='center')
    span.headinglump Метрополитен
p
  | Каждая буква обрела значение и независимость, а заголовок — архитектурную торжественность.
p Добавим к заголовку слово:
p.metroheading(align='center')
  span.headinglump Московский
  span(style='letter-spacing: 0.05em;')  
  span.headinglump метрополитен
p
  | Слова отделены между собой пробелом. Для каждого слова расстояние между буквами играет роль «внутреннего», а межсловный пробел — роль «внешнего». Из-за того что пробел лишь немногим больше межбуквенного расстояния, слова слиплись.
p
  | Сначала попробуем изменить соотношение внутреннего и внешнего, уменьшив «внутреннее» — разрядку между буквами, но так, чтобы она не стала меньше расстояния между собственными штрихами букв. Всегда держим в голове, что «внутреннее» на одном уровне служит «внешним» на другом:
p.metroheading(align='center')
  span.headinglump(style='letter-spacing: 0.2em;') Московский
  span(style='letter-spacing: 0.2em;')  
  span.headinglump(style='letter-spacing: 0.2em;') метрополитен
p Пробел остался неизменным, но теперь его достаточно, чтобы отделить слова.
p
  | Теперь вместо уменьшения разрядки попробуем отделить слова иначе — переносом на следующую строку:
+rule
  p(align='center')
    span.headinglump
      | Московский
      br
      | метрополитен
p
  | Межстрочный просвет сравним с межбуквенным расстоянием. Из-за этого буквы надписи сливаются в рисунок шахматной доски. Увеличим «внешнее» — интерлиньяж:
+rule
  p(align='center')
    span.headinglump(style='line-height:2em')
      | Московский
      br
      | метрополитен
p Надпись вернула себе имперское достоинство.
p А что если не увеличивать интерлиньяж, а изменить шрифт на более узкий?
+rule
  p(align='center', style="font-family:'Arial Narrow'")
    span.headinglump
      | Московский
      br
      | метрополитен
p
  | В узких буквах меньше внутренние просветы, значит, они не требуют такой большой разрядки:
+rule
  p(align='center')
    span.headinglump(style="font-family:'Arial Narrow'; letter-spacing:0.2em")
      | Московский
      br
      | метрополитен
p
  | При том же кегле и интерлиньяже слова лучше отделились друг от друга. Надпись стала компактнее без ущерба для внутреннего пространства.
p Вернёмся к «имперской надписи» и добавим к ней подзаголовок:
+rule
  p(align='center')
    span.headinglump(style='line-height:2em')
      | Московский
      br
      | метрополитен
    br
    span(style='font-size:0.8em;')
      span.headinglump(style='letter-spacing: 0.2em;')
        | имени 
        span(style='margin-right:-0.1em') В
        | .
        span(style='margin-right:-0.4em')  
        span(style='margin-right:-0.1em') И
        | .
        span(style='margin-right:-0.3em')  
        | Ленина
p
  | Подзаголовок «влез в интерлиньяж» заголовка — то есть оказался ближе к нему, чем его собственные строки друг к другу. Нет проблем, увеличим «внешнее»:
.heading(align='center')
  span.headinglump(style='line-height:2em')
    | Московский
    br
    | метрополитен
  br
  div(style='font-size:0.8em; margin-top:0.4em; margin-bottom:2em')
    span.headinglump(style='letter-spacing: 0.2em;')
      | имени 
      span(style='margin-right:-0.1em') В
      | .
      span(style='margin-right:-0.4em')  
      span(style='margin-right:-0.1em') И
      | .
      span(style='margin-right:-0.3em')  
      | Ленина
p Допустим, наш заголовок должен уместиться на табличке фиксированных габаритов:
center
  .pagebox.media(style='width:380px; height: 140px; padding:0')
    .heading(align='center')
      span.headinglump(style='line-height:2em')
        | Московский
        br
        | метрополитен
      br
      div(style='font-size:0.8em; margin-top:0.4em;')
        span.headinglump(style='letter-spacing: 0.2em;')
          | имени 
          span(style='margin-right:-0.1em') В
          | .
          span(style='margin-right:-0.4em')  
          span(style='margin-right:-0.1em') И
          | .
          span(style='margin-right:-0.3em')  
          | Ленина
br
br
p
  | Надпись вступила в конфликт внутреннего и внешнего с собственной рамкой. Придётся пройтись вниз по всем уровням и уменьшить внутренние расстояния, сохраняя контраст внутреннего и внешнего:
center
  .pagebox.media(style='width:380px; height: 140px; padding-bottom:0; padding-left:0; padding-right:0')
    .heading(align='center')
      span.headinglump(style='line-height:1.6em; letter-spacing:0.3em')
        | Московский
        br
        | метрополитен
      br
      div(style='font-size:0.8em; margin-top:0.2em;')
        span.headinglump(style='letter-spacing: 0.2em;')
          | имени 
          span(style='margin-right:-0.1em') В
          | .
          span(style='margin-right:-0.4em')  
          span(style='margin-right:-0.1em') И
          | .
          span(style='margin-right:-0.3em')  
          | Ленина
br
br
+sidenote({mod: 'marginal'})
  p.lihead.first См. также советы
  ul
    li
      a(href='http://artgorbunov.ru/bb/soviet/20140224/') Об отступах вокруг заголовков
    li
      a(href='http://artgorbunov.ru/bb/soviet/20140310/') О связи интерлиньяжа и отступов
p
  | Заметим, что для одного и того же кегля мы получили разные приемлемые соотношения внутренних и внешних расстояний. Контраст важнее конкретного значения пропорции — это даёт гибкость верстальщику. Идеальное «серебро набора» — это лишь минимально возможный контраст внутреннего и внешнего всех элементов для нейтрального спокойного чтения. При увеличении контраста внутреннего и внешнего текст становится заметнее и выразительнее.
p Базовое правило типографики:
+rule
  p(align='center') внутреннее ≤ внешнее
br
+caption
  | Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 
  a(href='/bb/soviet/ask/') Присылайте вопросы
  | .