Элементы типографики.

R5AM, Александр Ящук, Москва, 2016г.
На главную

1. Ширина строки
Количество символов в строке должно быть от 45 до 90 символов. При узкой колонке слишком часто бегают глаза, они быстро устают. При длинной строке движения глаз замедляются и становится скучно читать. Узкие колонки следует использовать для быстрого "сканирования" текста чтобы быстро понять о чём идёт речь и сделать какое-то действие. Более широкие колонки для длительного вдумчивого чтения.
2. Выравнивание текста
Выравнивать нужно только по левому краю. Так как нет переносов в HTML, то при выравнивании по всей ширине строки появляются неадекватно большие пробелы между словами. В CSS3 есть атрибут переноса слов hyphens: auto; но этого всё равно недостаточно и появляется новая проблема - много переносов на большом количестве строк вподряд, особенно плохо на узких колонках. Нужно стараться и выравнивать по левому краю, и добавлять переносы: text-align: left; hyphens: auto;.
3. Высота строк
Высота строк line-height - это расстояние между центрами межстрочного интервала соседних строк. Не путать с leading, который является расстоянием от базовой линии одной строки до базовой линии другой строки. Оптимальная высота строки - 1.5, допустимо от 1.4 до 1.6. Для заголовков оптимально 1.2, можно от 1.1 до 1.3. С маленькой высотой строки читать текст сложнее, впечатление, что строки налезают одна на другую. При большой высоте строк теряется внимание читающего.
4. Отступы
Различные отступы: от заголовка до следующего параграфа, от шапки текста до первого блока текста, от картинки до картинки. Отступы нужно делать кратными высоте строки - появляется некая гармония.
5. Модульные шкалы
Модульная шкала - последовательность чисел, относящихся друг к другу определённым образом. Например, числа Фибоначчи, золотое сечение. Можно объединять несколько модульных шкал в одну. Можно на сайте www.modularscale.com указать размер основного текста, добавить соотношение (или несколько сразу) - получим примеры размеров подзаголовков. Это можно использовать и для высоты футера, и для ширины фотографий, и для высоты шапки, и для высоты/ширины меню.
5. Гарнитуры.
Лучше использовать набор из стандартных шрифтов. Нужно учитывать кросплатформенность шрифтов и поддержку различных языков (кириллица).
6. Дополнительная информация по типографике
Книга "The Elements of Typographic Style" от Rjbert Bringhurst.
Сайт про типографический стиль в WEB: webtypography.net .
Статья про использование модульных шкал: alistapart.com/article/more-meaningful-typography .


На главную
К началу страницы