Веб-типографика: основные элементы и правила использования
09 Июль, 2012 
Комментариев 27
На сегодняшний день в руках веб-дизайнеров имеется достаточно средств и инструментов для правильного представления текста на страницах веб-сайтов. К сожалению, то ли из-за нехватки времени, то ли по незнанию, не все разработчики активно используют даже самые основные правила типографики. Многие не понимают, зачем в принципе заморачиваться с веб-типографикой, если имеется масса других элементов для оформления веб-страниц.
Предназначение любого сайта — адресный информационный посыл и первое на что обращают внимание посетители — естественно, текст. Получается, что от качества поданной информации зависит в целом успех веб-проекта? Давайте разбираться.
На самом деле, существуют определенные условия, при которых типографика практически не важна. Заключаются они в следующем:
- нет необходимости создавать и в дальнейшем поддерживать имидж веб-ресурса;
- информация доносится до конечного пользователя при помощи медиа;
- текстовая часть сайта является настолько уникальной, что нет необходимости ее как-то по-особому представлять пользователю.
С учетом того, что интернет-пространство находится на этапе перманентного развития, уникальность любого веб-ресурса довольно относительна. В конечном счете, обычно среди конкурирующих сайтов с практически одинаковым контентом, побеждает наиболее эффективный. Кстати говоря, использование типографики в дизайне сайта во многом и определяет эту эффективность. Как видите, без нее и здесь никак не обойтись.
Правила и основы типографики в веб-дизайне
Поскольку типографика настолько важна при создании сайтов, существуют определенные правила ее использования.
Шрифт для сайта
Правильность выбора шрифта во многом определяет концепцию сайта и влияет на общее восприятие.
Главный совет! Не стоит использовать те шрифты для сайта, которых нет по умолчанию. К сожалению, пока автоматическая установка шрифтов не всегда дает свои результаты и есть риск некорректного отображения веб-сайта в пользовательских браузерах.
Оформление текста
Правильный компьютерный набор — один из разделов типографики.
Правильно расставляйте знаки препинания, пробелы, скобки, тире, кавычки и т.д., некоторые придирчивые пользователи иногда даже невольно обращают внимание на подобного рода ошибки.
Макро- и микротипографика в дизайне сайта
Макротипографика — общая структура текстовой части в контексте дизайна сайта в целом. А оформление текста (пробелы между словами, интервалы между строками, шрифты и другие мелкие детали) — это уже микротипографика.
Макротипографика позволяет выбирать правильный цвет, шрифты и делать текстовый блок цельным и жизнеспособным, а сам сайт привлекательным и органичным. Микротипографика призвана обеспечить легкую читаемость контента.
Например, при создании сайта www.crowleywebb.com дизайнер опирался как раз на макро- и микротипографику:
Кстати, подобные сайты можно создавать и на базе шаблонов. Один из примеров – HTML шаблон:
Размер шрифта и набор стилей
Наиболее комфортный для восприятия размер шрифта в тексте — 12-16 пикселей. А вот заголовки и подзаголовки (H1, H2, H3) обычно несколько масштабней. Очень важно разработать свою систему стилей и употреблять ее в каждом текстовом оформлении на ресурсе. Желательно для заголовков и цитат применять различные варианты начертания используемого шрифта или же, для особого контраста, попробовать использовать совсем другой шрифт. Для акцентирования внимания на наиболее важных местах в тексте, его стоит выделять жирным или курсивом. Например, как на сайте www.hausofdesign.co.uk:
Методы хорошей верстки
Читабельность текстов — вот, что обеспечивает успех.
Вот как это может выглядеть на примере сайта www.yesnurse.co.uk:
А это пример удачной верстки flash-шаблона. Чтобы ознакомиться с ним подробнее, кликните по изображению.
Эксперименты здесь приветствуются, однако не стоит слишком далеко выходить за рамки общедоступных правил.
Стили CSS
Стиль CSS помогает устранить любые недочеты — размеры шрифтов, цвета, неуказанные шрифты и т.д. CSS обеспечивает единство и согласованность типографики на всех страницах веб-сайта. Даже если вы четко следите, например, за последовательностью использования тех или иных шрифтов на ресурсе, даже малейшее отклонение от стиля способно вызвать диссонанс в восприятии. Вот почему не стоит игнорировать использование таблиц стилей.
Выравнивание текста в блоках
Здесь проще сказать, как делать не нужно. Не стоит выравнивать текст по центру и даже по ширине. Неровные края по бокам текста, расположенного по центру, часто затрудняют восприятие. Текст по ширине чаще всего также зрительно портит блок с контентом. Общепринятое правило расположения текста на сайте — выравнивание его по левому краю или поиск альтернативного способа представления информации.
С развитием HTML и таблиц стилей CSS появилось все больше возможностей по организации текстовой информации на страницах сайтов. Теперь вместо изображений, отображающих заголовки и другие названия разделов, профессиональные дизайнеры используют правила типографики.
Хороший типографический дизайн — эффективный способ для реализации оригинальной дизайнерской задумки, однако правила веб-типографики оказываются не настолько просты, как может показаться. Скорее всего, помимо теории здесь необходимо иметь собственное чутье, вкус и определенную долю опыта. Хотя и экспериментаторство никто не отменял. Экспериментируйте, и да прибудет с вами сила!
P.S. Как Вам статья? Признаюсь честно, писал ее не я. Вообще-то я никогда не публиковал гостевых постов и все статьи на блоге blogibiznes.ru написаны лично мной. Но когда со мной связалась Ольга Владыко, один из авторов сайта TemplateMonster Russia (это, кстати, ее статья) и предложила сотрудничество с этим популярным проектом, то я согласился.
Во-первых, это не рекламный пост, опубликованный за деньги, а статья, которая, уверен, будет полезна многим моим читателям. Или я не прав? Я, например, как и многие, использую знак “-” вместо “—” и т.д. Просто так удобнее, хотя и не правильно. В общем, знание правил веб-типографики нам не повредит.
Другая причина, это то, что моя статья о том, где найти хорошие шаблоны для WordPress, стабильно приводит посетителей с поиска. Значит многих интересуют темы для сайта. А TemplateMonster Russia – это русское отделение www.templatemonster.com – мирового лидера в области веб-дизайна, производстве и продаже высококачественных шаблонов для сайтов. В числе их партнеров такие известные бренды, как 1С-Битрикс, REG.RU, UMI.CMS и др.
Здесь Вы найдете шаблоны на любой вкус: HTML, Flash, для CMS и блогов, Facebook шаблоны, для интернет-магазинов и мобильных устройств. Это позволит без труда создать HTML или Flash сайт. Рекомендую присмотреться к сайту TemplateMonster Russia, возможно, это то, что Вы давно искали. А сейчас посмотрите видео, где сотрудники компании сами расскажут о себе. Всем пока!
Понравилась статья? Нажимай на кнопки:
Хорошая статья. Есть над чем заморочиться =))) Тоже стараюсь, чтоб все гуд было на блоге =)
Со всем согласен, особенно с что НЕ НУЖНО ВЫРАВНИВАТЬ ТЕКСТ ПО ШИРИНЕ – и почему очень многие этого не понимают. К тому же выравненный текст по левому краю не только смотрится лучше (расстояние между буквами всегда нормальное), но и рваный правый край помогает глазам не сбиваться и быстрее находить следующую строчку текста – доказано.
И почему люди не ориентируется в форматировании текста на самые известные интернет-издания?
Все таки в статье не хватает практической части, хотя бы вот тут: “Не стоит использовать те шрифты для сайта, которых нет по умолчанию” – а почему нет? Конечно для основного контента этого делать не нужно, ведь обычный шрифт – самый лучший вариант по восприятию, но вот для заголовков очень даже нужно. Вот с этим не согласен “риск некорректного отображения веб-сайта в пользовательских браузерах”, ведь в css можно задать стандартный шрифт, который будет приоритетным если нестрандартный не отображается.
Еще по практической части можно описать излюбленный стиль text-shadow – ведь различные комбинации с ним порой выдают просто потрясающий результат.
Спасибо, поддержал меня с “выравниванием”. Чувствуется, что ты “в теме” и с любым шрифтом (и не только) справишься. Но тем, кто первый раз открыл админку блога и не знает с какой стороны подступиться, эксперименты со шрифтами лучше отложить до лучших времен :-).
В статье даны самые основы. А то придется не одну статью публиковать, чтобы осветить тему подробнее.
Спасибо, познавательно.
Советую почитать эту статью https://blogibiznes.ru/analiz-robots-txt.html. У Вас такая же проблема.
Очень полезная статья! Не все копирайтеры знают, как правильно оформить текст. А здесь подробная информация, лёгкая к освоению и применению.
Спасибо, Елена! Я так и подумал, что многим будет полезно.
Статья интересная. Кстати по теме, мне не очень нравятся статьи, в которых не выровнен текст по обеим сторонам… Он как-то выглядит неопрятно… как будто автор торопится куда-то. Это, Олег, камень в ваш огород к опубликованной статье
Я так и понял с первых строк комментария :-). Тоже иногда не нравится, но так начал вести блог и уже не хочется переделывать, тем более, что это по правилам типографики :-).
Неопрятно выглядит текст, который как раз выравнен по обеим сторонам
слова растянуты и читать плохо. Посмотрите на самые известные контентные сайты России, естественно это веб-версии знаменитых печатных изданий: например http://www.gazeta.ru/ или http://www.aif.ru/ – уж поверьте они знают как правильно 
Ну в общем то с личным мнением спорить никто не собирается, но все таки “камень в огород Олега” не обоснован
Ровная линия смотрится органичнее и красивее, чем кривая и рваная. Ровный прямоугольник текста с правильно расставленными пробелами абзацев – вот, где красота и легкое восприятие.
Красота может быть, но вот легкое восприятие нет.
Ну ладно,что-то я разошелся))) каждому самому решать как форматировать текст, просто приводя примеры интернет-версий печатных изданий, думал может кто-то учтет их опыт.
Раньше кстати тоже по ширине форматировал, пока не прочитал статьи некоторых известных вебдизайнеров.
В спорах рождается истина. Так что, чем больше мнений, тем интереснее.
))))
Вообще самый лучший вариант – это объединение этих двух видов форматирования вместе: от форматирования по левому краю – одинаковое расстояние между буквами и словами, от форматирования по центру – собственно ровный правый край.
В общем он используется во всех книгах – это форматирование по ширине + использование переносов слов.
А вот для сайтов интересно можно ли реализовать такое форматирование?
Вот мне тоже не нравится разное расстояние между словами. Думаю, было бы можно, давно бы сделали. По крайней мере, как вариант.
В общем, если ты не возьмешься за это, толку не будет :-).
Олег, статья хорошая. Примеры хорошо подобраны, и есть на что обратить внимание при создании и оформлении своих статей на блоге. И сам блог можно оформить красиво, следуя советам в статье. Вообще, тема вебдизайна мне интересна, хотел одно время на вебдизайнера даже учится в офлайн учреждении.
Спасибо! Интересная статья!
Было бы любопытно воочию увидеть объединение двух видов форматирования текста на сайте. Кто знает, может быть такой метод и станет новым стандартом веб-типографики
Cпасибо, очень ценная информация!
Я пока форматирую текст по ширине, как-то думал перейти по левому краю, но мне не понравилось. На будущее учту.
Типографические ошибки в статьях это, прежде всего, неправильно расставленные пробелы между словами и знаками препинания. У Вас, Олег, они присутствуют.
Пробелы между словами, это как? У меня слова сливаются или идут с двумя пробелами?
Моя тема не позволяет выравнивать текст по левому краю, идет сплошным кирпичом. Мне не нравится, но изменить не могу. Если говорить об оформлении текста, то точка после заголовка не ставится. Режет глаз. Оформление текста – очень важная часть работы. Я постепенно осваиваю.
Елена, это я точек наставил по привычке. Ольга написала как надо. Спасибо за замечание, надо исправить. Как-то не придавал этому раньше значения.
P.S. Здесь исправил.
Ошибки в типографике – тема больная))
Очень часто дизайнеры не обращают внимания на такую “мелочь” как текст, миксуя несочетаемые шрифты.
Спасибо, Ольга и Олег ))), статья очень полезная и познавательная. Не все правила знаю, но всегда невольно обращаю внимание на чужие ошибки. Теперь все буду делать правильно!
Статья просто отличная! Да простит меня Ольга, скопировала кое-что для себя, чтобы перед глазами всегда было. БлагоДарю за нужную информацию!