Типографика в Вебе!

Типографика в Вебе! Многих волнует типографика в веб дизайне: как правильно создать заголовки h1, h2, h3…. и основной текст. Правила веб типографики! Все очень логично: h1 может быть только один, на странице h2 используют, как правило дважды, заголовки h3 — это подзаголовки, используемые в тех случаях, если h2 уже на странице дважды выделяются.
Далее речь пойдет о соотношении кегля.

Последовательность Фибоначчи (16, 24, 40, 64, 104)
Пример: у нас есть размер основного шрифта — 16pt и мы хотим подобрать размер для подзаголовка. В таком случае просто умножаем 16 на 1,6 и при необходимости округляем до целочисленного значения. Получаем подзаголовок размером 22pt.
Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например, размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.
Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. Идеальная пропорция ширины каждого блока выглядит примерно как на рисунке:

• размер текста 14 px, интерлиньяж — 21 px
• h3 14 px * 1,6 = 22,4 px, интерлиньяж — 22,4 px/2 + 22,4 = 33,6 px
• h2 22,4 px * 1,6 = 35,84 px, интерлиньяж — 35,84 px/2 + 35,84 = 53,76 px
• h1 53,76 px * 1,6 = 86 px, интерлиньяж — 86 px/2 + 86 = 129 px

Правило третей — страница делится на три одинаковые части по горизонтали и вертикали
Еще одно незыблемое правило дизайна, которое применяется в разметке страниц и наполнении их контентом. Каждая страница делится на три одинаковые части по горизонтали и вертикали. На месте пересечения этих частей мысленно поставьте точки — это и будут ключевые места, куда чаще всего падает взгляд посетителя.
Следовательно, рядом с этими точками нужно размещать самую важную информацию — чтобы наверняка увидели. Это может быть кнопка с call to action — призывом к действию, или форма заказа. Считается, что самая «активная» точка — левый верхний угол.
Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!

Последовательность 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
После выбора шрифта выберите размер для основного набора, например, 16-18 пункта;
Заголовок — обычно составляет 180–200% от размера основного шрифта, соответственно, 32—36 пункта;
Подзаголовок — 130–150% от размера основного шрифта или 21—24 пункта.
Если размер основного шрифта составляет 16 пунктов, межстрочный интервал должен быть установлен в пределах 20 пунктов.
Наиболее распространенный вид:
Последнее исследование дало следующие данные:
– В CSS можно установить эту величину в em, однако, вам стоит визуально оценить правильность выбранного интервала;
– В текстовых редакторах Pages или Word межстрочный интервал стоит устанавливать как 120% от размера текста или 1,2 единицы.