Константин Волков
Константин ВолковДиректор
18.03.2015

7 уровней типографики. Или вредные советы от разработчика сайтов

Каждый день мы разрабатываем сайты. Стоит только работе увидеть свет, и хочется поделиться с коллегами выполненным проектом. Отправляешь ссылку, а в ответ приходит: «О, ужас, что это там такое страшное на главной странице?» — Все понятно, клиенту дали доступ в админку, и он уже успел опубликовать новые тексты.

Давайте посмотрим, насколько глубоко может зайти человеческое заблуждение, когда в твоих руках технологии XXI-го века. Разместить текст на сайте — не сложнее, чем спеть караоке в баре, нужно только набраться смелости и сделать первый шаг.

Уровень первый «Новичок»

Если у вас еще пока нет чувства стиля, то лучшая стратегия — нападение. Сбивайте пользователя наповал сразу, с первой же строчки. Неграмотная речь и выделение слов яркими цветами гарантированно привлечет внимание, а крупный кегль умножает значимость предложения пропорционально его величине.

Уровень типографики Новичок

Уровень второй «Стажер»

Не дайте пользователю потерять внимание. Не бывает скучных текстов, бывает мало жирного! Обязательно разбавляйте текст, выделяя значимые части жирным, и не забывайте о цвете. Берите на заметку: простой текст никому не интересен.

Уровень типографики Стажер

Уровень третий «Специалист»

Стандартные маркированные списки оставьте для тухлых сайтов. Ваш список должен быть оформлен как следует.

Уровень типографики Специалист

Уровень четвертый «Педагог»

Педагог, он любит своих читателей искренне.

Уровень типографики Педагог

Уровень пятый «Мастер»

На этом уровне открываются чакры, и вы узнаете, что такое отступы. Понимание, что пользователю нужно иногда отдыхать от чтения, трансформируется в особый стиль разрядки текстов. В специально отведенных местах текста добавляйте интервалы, укрупняйте шрифт, разбавляйте текст цветами, чтобы глаза отдыхали. Многообразие возможностей, предлагаемое интструментом «цвет фона», не стоит снимать со счетов.

Уровень Типографики Мастер

Уровень шестой «Адепт»

Бегущая строка на сайте — инструмент профессионалов, для этого как минимум нужно уметь скачивать готовые скрипты и встраивать их в HTML. Чем короче область бегущей строки — тем больше загадки и интереснее чтение.

Уровень типографики Волшебник

Уровень семь «Типограф от бога»

Встроить шрифт в картинку и добавить к ней контрастную тень могут позволить себе только те, кто знает что такое Photoshop не по наслышке. Эти знания с лихвой окупают себя. На примере надпись сделанная в стиле гротеск с легким дымком буржуазии.

Уровень: Типограф от Бога

Что я могу сделать, чтобы всего этого безобразия не было?

Вы можете структурировать текст заголовками. Разделите текст на логические блоки, придумайте заголовки, определите вложенность заголовков, что чему подчинено, и поставьте каждому заголовку соответствующий тип: «Заголовок 1» — для заголовка первого уровня, «Заголовок 2» — для второго уровня вложенности и т.д. Как правило, в хороших сайтах, размеры заголовков и отступы уже настроены дизайнером за вас, вам остается только применить нужный тип заголовка, и все должно смотреться отлично.

Вы думаете — это сложно?

Не сложнее, чем оформлять текст жирным. Выделите текст, в визуальном редакторе нажмите на выпадающий список «Форматирование» и выбирите нужный тип заголовка.

А что если я хочу выделить в блоке текста целое предложение или мысль?

Не обязательно всё размечать заголовками. Воспользуйтесь для этого инструментом «Цитата». Это очень просто.

Выделите часть текста и нажмите в визуальном редакторе кнопку «Цитата» — вся ваша область приобретет выделяющееся оформление, задуманное дизайнером. Если вы кого-то цитируете — не забудьте заключить текст в кавычки.

Текстовая вставка, врезанная в контент, будет гораздо опрятнее смотреться, чем выделенная полужирным.

Какие еще способы разделения блоков текста существуют?

Например вы всегда можете отделить блок текста с помощью специальных разделителей. Это такая линия, ее форма, цвет, отступы уже продуманы дизайнером применительно к вашему сайту. Вам остается только использовать этот элемент в тексте. Для этого вы можете воспользоваться кнопкой «Вставить горизонтальную линию». Горизонтальный разделитель в тексте — как рама для картины. Он подчеркивает вашу мысль при этом не отвлекает внимание.


Хорошо оформленный текст — залог того, что ваши посетители смогут прочесть и понять его (а вам ведь только этого и надо, правда же?). И для хорошего оформления не требуется никаких «игр со шрифтами» или посещений астральных пространств типографики. Для начала хватит самых простых средств, о которых мы рассказали выше. Примените их — и страницы вашего сайта преобразятся. В лучшую сторону.

Давайте сделаем этот мир красивее. Пишите грамотно и применяйте элементарное форматирование к вашим текстам.