На главную

О нас

Контакты

Работа со стилями типографики на сайте

Что такое типографика?

Если говорить проще, то типографика сайта - это всё что связано с текстом на сайте: гарнитуры и размеры шрифтов, оформление уровней заголовков, интерлиньяж, всевозможные отступы, списки, врезы и т.п.

Хотя встроенный редактор в админ-панели вашего сайта (на картинке ниже) позволяет самостоятельно оформлять текст, делать этого не нужно. Почему? Потому что в работу над дизайном вашего сайта входит разработка стилей типографики и всё что вам нужно применять эти стили к вашему тексту.
О том, как это делать пойдет речь.

Визуальный редактор сайта

Вставка текста в редактор сайта

Для начала стоит сказать пару слов о том, как корректно помещать текст в редактор сайта во время создания или редактирования страниц.

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

Если, всё же, нужно вставить уже готовый текст из вашего текстового редактора (возьмем для примера MS Word), то не стоит этого делать напрямую (копировать из Ворда и вставлять в редактор сайта). Почему? Потому что таким образом перенесется ненужная стилистика документа из Ворда.

Визуальный редактор сайта

Запомните 5 простых действий:

Скопируйте необходимый текст из вашего редактора (Word, Pages и т.п.). и вставьте его в обычный «блокнот».
Теперь выделите этот текст в «блокноте» и снова скопируйте.
В редакторе сайта, перед вставкой, обязательно один раз нажмите клавишу Enter.
Вставьте скопированный текст из «блокнота».
Примените необходимые стили к подзаголовкам, врезам и т.п.

Работа со стилями

В редакторе сайта (в левом верхнем углу) открывается список стилей.

Всё что вам нужно сделать это выделить текст и выбрать из списка нужный стиль.

Применение стиля к подзаголовку

Так же обратите внимание на несколько рекомендаций:

стили удобнее всего применять не в процессе наполнения текстом, а уже после того как весь текст готов (набран или скопирован в редактор);
при выделении текста, к которому вы хотите применить стиль, следите за тем, чтобы случайно не выделить кусочек ближайшего абзаца (текст заголовков вообще можно не выделять, а просто поместить в него курсор);
если нужно создать нумерованный или маркерованный список, то процедура та же: набираете пункты списка отделяя их абзацными отступами, выделяете все пункты и жмете на кнопочку необходимого списка на панели инструментов в редакторе сайта.

Важно! Стиль «Заголовок 1» не используйте, так как им уже оформляются основные заглавия страниц сайта. Текст заглавий страниц вписывается в соответствующее поле (над редактором сайта) при создании страницы.

Ниже приведен пример применения стилей типографики на моем сайте...

Заголовок 2

Параграф (к обычному тексту применять данный стиль нет необходимости, так как в самом начале, перед вставкой или во время набора текста вы нажали клавишу Enter, благодаря чему теперь ко всему тексту по-умолчанию применяется стиль «Параграф»).

Заголовок 3

Заголовок 4 (удобно применять перед списками)

пункт маркерованного списка 1;
пункт списка 2;
пункт 3.

Заголовок 5 - данный стиль создан для оформления врезов в которых удобно приводить пояснительную информацию или важные примечания.

Заголовок 6 (удобно использовать как подпись под статьей)

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