Всем привет!
В этот раз захотел освоить новую, для себя, рубрику и поговорить о типографике. Меня тяжело назвать профессионалом в этом деле, я ведь только учусь, но вместе с вами хочу пройтись по тексту на одном из сайтов, что бы показать, как небольшая работа может привести к тому, что пользователю будет легче и удобнее читать наш сайт.
Посмотрим же на текст, который мы хотим править:
Заголовок со шрифтом «OpenSans» и текст, набранный шрифтом «Tahoma» смотрятся не страшно, а контраст заголовка с текстом достигается тем, что заголовки пишутся исключительно прописными символами. А вот кегль в 12px — ужасная вещь. Такой можно использовать в книгах/журналах/газетах, но в интернете это слишком мелко. Увеличим до 14px и получим более читаемую картину:
Так же есть небольшое правило, которое часто забывается: «Прописные буквы всегда требуют разрядки». И правило это взято не с потолка. Чаще всего при таком наборе буквы начинают слипаться и на небольшом удалении превращаются в небольшую кашу. Я, обычно, ставлю разрядку порядка 0.1em (правило letter-spacing в CSS) (100 в Photoshop) и это выглядит хорошо.
2. Вёрстка текста
2.1 Выравнивание текста
Тут мы можем заметить, что текст выровнен по ширине, что создаёт нам ненужные пробелы в строках, которые ещё и меняются. Лично моё мнение, что выравнивание по ширине — это очень опасная вещь, с которой надо быть аккуратным. Поэтому поставим выравнивание по левому краю.
Я думаю не нужно быть профессионалом в типографике, что бы понять, что данный текст неудобен для чтения. Постараемся же последовательно пройтись по всем важным элементам:
1. Шрифт
2.2 Интерлиньяж (межстрочный интервал)
Если брать все базовые правила типографики, то интерлиньяж должен устанавливаться, исходя из длины строки и кегля. Но какого-то единого готового рецепта не существует и поэтому всегда надо верить своим глазам. А они работают у нас по такой схеме: мы дочитываем строку и по отступу между строк движем взгляд влево, до новой строки. Именно поэтому интерлиньяж должен быть больше, чем размер нашего кегля. В данном случае они равны и мозгу тяжело даются перескоки между строками. Увеличим интерлиньяж в полтора раза.
2.3 Отступы
Заголовок в данном случае оторван от самого текста, что совсем не красиво. Многие пытаются отбить заголовок от текста и я не пойму — почему? Для начала подвинем заголовок поближе к тексту, но так, что бы он не влезал в интерлиньяж текста. Для этого нам надо сделать отступ от заголовка чуть больше, чем собственно интерлиньяж. Так же у нас большая проблема в том, что пункты списка сливаются, зададим им так же отступ и получим уже почти готовый текст, осталось только доработать отступы от подзаголовков.
3. Всякие хотелки
3.1 Блок с телефоном
Лично на мой вкус — я бы выровнял бы его по левому краю, сделал бы все буквы прописными и добавил бы разрядки. Так этот блок отделится от основного текста и станет самостоятельной единицей, которая будет привлекать внимание
3.2 Шрифт
Я очень люблю шрифт «Roboto» и не могу отказать себе в удовольствии поставить его в качестве основного наборного текста :)
Финальный результат:
Всем спасибо за внимание :) Я очень надеюсь, что вам было интересно и в будущем могу так же пробовать разбирать другие темы/сайты :)