Соотношение кегля заголовка и текста

Типографика в Вебе! Соотношение кегля заголовка и основного текста

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

Золотое соотношение (1.618) a/b=1,61803

Последовательность Фибоначчи (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 единицы.

• высота строки (в пикселях) ÷ кегль основного текста (в пикселях) = 1.46
• шкала 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
• длина строки (в пикселях) ÷ высота строки (в пикселях) = 24.9
• отступ между абзацами (в пикселях) ÷ высота строки (в пикселях) = 1.39

Правила типографики в веб дизайне: тенденции! Самый популярный размер основого текста на современных сайтах приходится на шрифты с размерами: от 18 до 20 и от 24 до 26 пикселей. Размер среднего шрифта для заголовков составляет 25.6 пикселей. … Интерлиньяж относится к размеру шрифта основного текста как 1,48. Отношение длины строки к интерлиньяжу равно 27,8.
В этой статье мы постарались изложить основы типографики в веб дизайне. Надеемся, что нам это удалось и Вам эта информация поможет в Ваших начинаях!
Спасибо за внимание, желаем процветания Вам и Вашему бизнесу!Другие статьи: SEO