Разбираю два типографических части двух библиотек: Foundation 5 и Bootstrap 3.
Нужно привести в порядок h1-h6.
Что нужно:
- Адаптивность
- При изменении размера шрифта базового, менялить относительно другие заголовки.
- Также менялись и высота строки и отступы.
- Причем все было корректно отображалось, без ошибок, не было ощущения безграмотности в отступах(что самое сложное, как они математически просчитываются).
Bootstrap 3 - отсек, т.к. все в пикселях.
Foundation 5 - задаю
html { font-size:16px; }
Остальное rem: font-size, line-height, margin-top, margin-bottom.
Также в stylus(или SASS) буду задавать базовые размеры
h1-h6:
$base_size = 16;
font-size: (44/$base_size)rem.
Нужно привести в порядок
line-height, margin-top, margin-bottom.
Пытаясь совместить обе практики, не понимаю....
В Bootstrap струппированы: у
h1,h2,h3 заголовков одни отсутупы.
h2,h3,h4 - другие.
В Foundation - Одинаковые для всех
h1-h6:
margin-top: 0.2rem;margin-bottom: 0.5rem; - что кажется неверным, т.к. размер шрифтов разный. Но достигается за счет большого line-height. Т.к. если h6 станет много строчным будет явная проблема отображения.
Как верно и best-practice сделать такую типографическую верстку?
Чтобы задавая(меняя в реалтайм) html font-size иметь адекватное и правильно отображение.
Оставляя при этом позможно через переменные менять размеры отдельных
h(1-6) чтобы корректировались отступы и высота строки.
Естественно IE8 поддерживать не надо и нет желания.Спасибо!
Текущий результат:
h1 {
font-size: (44/$base_size)rem;
line-height: (44*1.25/$base_size)rem;
}
h2 {
font-size: (37/$base_size)rem;
line-height: (37*1.25/$base_size)rem;
}
h3 {
font-size: (27/$base_size)rem;
line-height: (27*1.25/$base_size)rem;
}
h4 {
font-size: (24/$base_size)rem;
line-height: (24*1.25/$base_size)rem;
}
h5 {
font-size: (18/$base_size)rem;
line-height: (18*1.25/$base_size)rem;
}
h6 {
font-size: (16/$base_size)rem;
line-height: (16*1.25/$base_size)rem;
}
Простой
Средний