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

Предназначение любого сайта - адресный информационный посыл и первое на что обращают внимание посетители - естественно, текст. Получается, что от качества поданной информации зависит в целом успех веб-проекта? Давайте разбираться.

На самом деле, существуют определенные условия, при которых типографика практически не важна. Заключаются они в следующем:

• нет необходимости создавать и в дальнейшем поддерживать имидж веб-ресурса;
• информация доносится до конечного пользователя при помощи медиа;
• текстовая часть сайта является настолько уникальной, что нет необходимости ее как-то по-особому представлять пользователю.

С учетом того, что интернет-пространство находится на этапе перманентного развития, уникальность любого веб-ресурса довольно относительна. В конечном счете, обычно среди конкурирующих сайтов с практически одинаковым контентом, побеждает наиболее эффективный. Кстати говоря, использование типографики в дизайне сайта во многом и определяет эту эффективность. Как видите, без нее и здесь никак не обойтись.

Правила и основы типографики в веб-дизайне

Поскольку типографика настолько важна при создании сайтов, существуют определенные правила ее использования.

Шрифт для сайта

Правильность выбора шрифта во многом определяет концепцию сайта и влияет на общее восприятие.

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

Оформление текста

Правильный компьютерный набор - один из разделов типографики.

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

Макро- и микротипографика в дизайне сайта

Макротипографика - общая структура текстовой части в контексте дизайна сайта в целом. А оформление текста (пробелы между словами, интервалы между строками, шрифты и другие мелкие детали) - это уже микротипографика .

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

Например, при создании сайта www.crowleywebb.com дизайнер опирался как раз на макро- и микротипографику:

Кстати, подобные сайты можно создавать и на базе шаблонов. Один из примеров – HTML шаблон :

Размер шрифта и набор стилей

Наиболее комфортный для восприятия размер шрифта в тексте - 12-16 пикселей. А вот заголовки и подзаголовки (H1, H2, H3) обычно несколько масштабней. Очень важно разработать свою систему стилей и употреблять ее в каждом текстовом оформлении на ресурсе. Желательно для заголовков и цитат применять различные варианты начертания используемого шрифта или же, для особого контраста, попробовать использовать совсем другой шрифт. Для акцентирования внимания на наиболее важных местах в тексте, его стоит выделять жирным или курсивом. Например, как на сайте www.hausofdesign.co.uk :

Методы хорошей верстки

Читабельность текстов - вот, что обеспечивает успех.

Вот как это может выглядеть на примере сайта :

А это пример удачной верстки flash-шаблона. Чтобы ознакомиться с ним подробнее, кликните по изображению.

Эксперименты здесь приветствуются, однако не стоит слишком далеко выходить за рамки общедоступных правил.

Стили CSS

Стиль CSS помогает устранить любые недочеты - размеры шрифтов, цвета, неуказанные шрифты и т.д. CSS обеспечивает единство и согласованность типографики на всех страницах веб-сайта. Даже если вы четко следите, например, за последовательностью использования тех или иных шрифтов на ресурсе, даже малейшее отклонение от стиля способно вызвать диссонанс в восприятии. Вот почему не стоит игнорировать использование таблиц стилей.

Выравнивание текста в блоках

Здесь проще сказать, как делать не нужно. Не стоит выравнивать текст по центру и даже по ширине. Неровные края по бокам текста, расположенного по центру, часто затрудняют восприятие. Текст по ширине чаще всего также зрительно портит блок с контентом. Общепринятое правило расположения текста на сайте - выравнивание его по левому краю или поиск альтернативного способа представления информации.

С развитием HTML и таблиц стилей CSS появилось все больше возможностей по организации текстовой информации на страницах сайтов. Теперь вместо изображений, отображающих заголовки и другие названия разделов, профессиональные дизайнеры используют правила типографики.

Хороший типографический дизайн - эффективный способ для реализации оригинальной дизайнерской задумки, однако правила веб-типографики оказываются не настолько просты, как может показаться. Скорее всего, помимо теории здесь необходимо иметь собственное чутье, вкус и определенную долю опыта. Хотя и экспериментаторство никто не отменял. Экспериментируйте, и да прибудет с вами сила!

P.S. Как Вам статья? Признаюсь честно, писал ее не я. Вообще-то я никогда не публиковал гостевых постов и все статьи на блоге написаны лично мной. Но когда со мной связалась Ольга Владыко, один из авторов сайта TemplateMonster Russia (это, кстати, ее статья) и предложила сотрудничество с этим популярным проектом, то я согласился.

Во-первых, это не рекламный пост, опубликованный за деньги, а статья, которая, уверен, будет полезна многим моим читателям. Или я не прав? Я, например, как и многие, использую знак “-” вместо “-” и т.д. Просто так удобнее, хотя и не правильно. В общем, знание правил веб-типографики нам не повредит.

Другая причина, это то, что моя статья о том, стабильно приводит посетителей с поиска. Значит многих интересуют темы для сайта. А TemplateMonster Russia – это русское отделение www.templatemonster.com – мирового лидера в области веб-дизайна, производстве и продаже высококачественных шаблонов для сайтов. В числе их партнеров такие известные бренды, как 1С-Битрикс, REG.RU, UMI.CMS и др.

Здесь Вы найдете шаблоны на любой вкус: HTML, Flash, для CMS и блогов, Facebook шаблоны, для интернет-магазинов и мобильных устройств. Это позволит без труда . Рекомендую присмотреться к сайту TemplateMonster Russia , возможно, это то, что Вы давно искали. А сейчас посмотрите видео, где сотрудники компании сами расскажут о себе. Всем пока!

Типографика играет ключевую роль в веб-дизайне, по статистике 95% содержимого сайтов составляет текстовый контент. Шрифтовое оформление управляет настроением и создает определенную атмосферу при прочтении текстового содержимого веб-страниц.

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

В этой статье будут рассмотрены основные аспекты современной веб-типографики, которые помогут вам определиться при выборе шрифта и способов оформления текста.

CSS-свойства для правильной веб-типографики

1. Семейство шрифтов (свойство font-family)

Подбор шрифта начинается с выбора гарнитуры шрифта.

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков (обычно — цифры, буквы, знаки пунктуации, спецсимволы, но может состоять так же исключительно из неалфавитных знаков). Например, гарнитура «Times New Roman» состоит из обычного, курсивного, полужирного и множества других шрифтов этого семейства.

Гарнитуры можно разделить на две основные категории: с засечками (антиква и брусковые шрифты) и без засечек (гротески).

Шрифты без засечек имеют простой и четкий внешний вид. Шрифты с засечками, напротив, придают более серьезный и официальный тон.

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

В каких случаях можно использовать несколько шрифтов?

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

Сервис TypeTester для подбора шрифта

2. Сочетание шрифтов с засечками и без засечек

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

На самом деле это правило касается в первую очередь печатных изданий, книгопечатания. Связано это с тем, что шрифт с засечками (небольшими росчерками на концах основных штрихов) плавно выстраивается в одну линию, облегчая восприятие текста и делая его более читабельным.

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

3. Цвет шрифта (свойство color)

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

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

Теплый цвет активно привлекает внимание к тексту, делая его визуально большим по размеру, чем шрифт аналогичного размера холодных оттенков. Для небольших по размеру элементов текста подходят более яркие цвета, боковое содержимое страницы можно выделить при помощи цвета, который на 20-30% светлее цвета текста основного содержимого веб-страницы.

При выборе количества цветов текста предпочтительно ограничиться двумя достаточно контрастными цветами (не считая черного и белого цвета). Черный текст на белом фоне — это классика, достаточно контрастная.

4. Размер шрифта (свойство font-size)

Размер базового шрифта в браузере равен 16px , а размер заголовков устанавливается пропорционально размеру базового шрифта (h1 — 2em, h2 — 1.5em, h3 — 1.17em и т.д.).

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

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

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

С ростом разрешения экранов и размеров мониторов необходимо пересмотреть привычный размер текста в 12-14px. Для обычного текста уже повсеместно применяется шрифт размером 14-18px. Задавая размер шрифта, нужно не забывать про адаптивность, т.е. размер шрифта должен изменяться в зависимости от размера экрана.

5. Выравнивание текста (свойство text-align)

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

6. Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)

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

Шрифты с засечками смотрятся более выразительно при уменьшенном значении letter-spacing .

7. Межстрочный интервал (свойство line-height)

Оптимальное значение межстрочного интервала в 1.4 — 1.6 раза больше размера шрифта.

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

8. Длина строки

В строке для сплошного чтения должно помещаться от 30 до 75 знаков (приблизительно 7-10 слов на одной строке). Чем шире строка текста, тем больше должен быть межстрочный интервал. Межстрочное расстояние не должно быть меньше пробела между словами.

9. Начертание шрифта (свойство font-style)

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

Свойство font-variant: small-caps; придает тексту типографскую изысканность, преобразуя текст таким образом, что все буквы отражаются малыми прописными. Данный прием подходит для небольших фрагментов текста.

10. Структура текста и визуальная иерархия

В структуре веб-страницы выделяют следующие объекты:
логотип / название сайта;
названия / заголовки;
заголовки второго плана;
основной текст;
навигация;
гипертекстовые ссылки;
длинные цитаты;
боковые панели;
подписи / надписи в таблицах, рисунках.

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

В HTML существует шесть уровней заголовков, начиная с более важного

и заканчивая менее значимым

. Заголовок

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

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

В общей структуре текста особое внимание нужно уделять ссылкам, они должны с легкостью выделяться из окружающего их контента.

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

Слишком сильное выделение не только чрезмерно акцентирует внимание на каком-либо фрагменте, но и затрудняет чтение.

11. Безопасные шрифты

Windows fonts / Mac fonts / Font family

Arial, Arial, Helvetica , sans-serif

sans-serif

cursive

monospace

Georgia 1 , Georgia , serif

sans-serif

Lucida Console, Monaco 5 , monospace

sans-serif

serif

Tahoma, Geneva , sans-serif

Times New Roman, Times , serif

Trebuchet MS 1 , Helvetica , sans-serif

Verdana, Verdana, Geneva , sans-serif

Symbol, Symbol (Symbol 2 , Symbol 2 )

Webdings, Webdings (Webdings 2 , Webdings 2 )

Wingdings, Zapf Dingbats

MS Sans Serif 4 , Geneva , sans-serif

MS Serif 4 , New York 6 , serif

Arial, Arial, Helvetica , sans-serif

Arial Black, Arial Black, Gadget , sans-serif

Comic Sans MS, Comic Sans MS 5 , cursive

Courier New, Courier New, Courier 6 , monospace

Georgia 1 , Georgia , serif

Impact, Impact 5 , Charcoal 6 , sans-serif

Lucida Console, Monaco 5 , monospace

Lucida Sans Unicode, Lucida Grande , sans-serif

Palatino Linotype, Book Antiqua 3 , Palatino 6 , serif

Tahoma, Geneva , sans-serif

Times New Roman, Times , serif

Trebuchet MS 1 , Helvetica , sans-serif

Verdana, Verdana, Geneva , sans-serif

Symbol, Symbol (Symbol 2 , Symbol 2 )

Webdings, Webdings (Webdings 2 , Webdings 2 )

Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )

MS Sans Serif 4 , Geneva , sans-serif

MS Serif 4 , New York 6 , serif

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

Шрифт — набор символов определенного размера и рисунка. Гарнитура точно так же определяет семейства стилей шрифтов.Ключевым словом здесь является стили, которые отделяют различные шрифты в группы или семьи. Например, это могут быть шрифты с засечками, без засечек, рукописные, акцидентные, моноширинные и другие. Можно сказать, что гарнитурой называется комплект шрифтов разных начертаний и размеров, объединенных общим стилем исполнения. Как видим, шрифт-это более узкое понятие.

При создании макета веб-страницы очень важным является выбор шрифта. Естественно, лучше всего использовать шрифты из стандартного набора Windows или Mac. Но порой этого набора не хватает что бы воплотить в жизнь задумку дизайнера, и тут вся нагрузка ложится на плечи верстальщика. К счастью, Google Web Fonts предлагает очень элегантное решение этой проблемы.

Еще существуют такие термины, как «вес» и кернинг. Все они могут изменяться с помощью средств CSS и быть применены к абзацам, заголовкам или другим элементам текста. Свойство «вес» шрифта определяет степень толщины линий при начертании. Это ряд значений от 100 до 900, где каждый номер указывает вес, соответствующий жирности начертания. Нормальный шрифт "normal" соответствует номеру 400, полужирный "bold" — 700. Кернинг - изменение интервала между буквами в зависимости от их формы. Это процесс правильного размещения символов, регулируя расстояния между ними, в результате которого должна быть достигнута гармония. Хотя на кернинг многие особого внимания не обращают, именно мелочи помогают достичь очень хороших результатов.

Нарушение норм

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

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

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

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

Правильный выбор шрифта

Нужно также заметить, что различные гарнитуры шрифтов могут по-разному влиять на настроение читателей. Как правило, шрифты с засечками лучше подходят для печатных материалов. Засечки помогают создать пространство между буквами, а также отделить один знак от другого. Часто, шрифты с засечками дают ощущение личного, они выражают уважение, интеллект и профессионализм.

Для веб-страниц лучше подходят шрифты без засечек. Низкое разрешение экранов способствует тому, что засечки будут выглядеть размытыми и, в свою очередь, плохо восприниматься. Шрифты без засечек, как правило, выражают чувства рациональности, стильности, молодости и современности.

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

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

Разборчивость

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

Но все же, если у вас возникло желание использовать, например, Soda , Bored or Akka , то от этой идеи лучше отказаться. Если желание все же достаточно велико, то эти шрифты нужно применять умерено. Например, в качестве заголовка. Но потом основной текст должен быть более разборчивым. Это может помочь создать динамику в вашем сайте. И обязательно нужно помнить, что использование таких шрифтов должно быть достоинством дизайна, а не недостатком.

Информативность

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

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

Размещение и размеры

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

Как правило, слова, на которые нужно обратить внимание, нужно сделать немного больше. Либо наоборот — незначительные должны быть меньшими. Все зависит от важности. Другими словами, нужно создать иерархию слов.

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

Цвет

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

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

Заключение

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

От автора: приветствую Вас, друзья! Мы продолжаем разбирать тонкости профессионального веб-дизайна, и сегодня на очереди очень актуальная тема - веб-типографика. К сожалению, многие разработчики не знают даже самых основ и правил этого направления. Может, просто не заморачиваются и не хотят на это тратить время, а может, не до конца понимают ее значения. В общем, моя цель: донести до вас, что типографика в веб-дизайне - основа основ, и без нее будет очень трудно двигаться дальше.

Типографика и информационный посыл

Предназначение любого интернет-ресурса - информационный посыл к целевой аудитории. На что посетители вашего сайта будут обращать внимание в первую очередь? Конечно, на текст! (естественно, если его не забивает беспорядочная реклама и множество бестолковых баннеров). От текста, и только от текста, в конечном итоге будет зависеть успех вашего проекта.

Давайте разбираться, на что реально влияет типографика в веб-дизайне.

Во-первых, имидж веб-ресурса. Качественную разработку видно невооруженным глазом, и не надо быть мега-специалистом, чтобы оценить, сколько по времени хочется задержаться на сайте. Кривой нечитаемый текст - первая причина, по которой посетитель покинет вашу ссылку через 10–15 секунд после входа.

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

Основы типографики в web-дизайне

Шрифты в web-дизайне

Типографика в web дизайне имеет вполне закономерные законы и правила. Начнем со шрифтов. Правильный выбор шрифтов во многом определит концепцию вашей разработки и повлияет на общее восприятие ресурса.

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

Внедрение свойства @font-face CSS просто развязало дизайнерам руки. Прописал ссылку на любой файл шрифта, и вот он уже используется на страницах сайта. Есть в этой теме некоторые недовольства со стороны разработчиков, но и это оказалось вполне решаемой проблемой.

Отмечу, что далеко не все шрифты подходят для грамотного web-дизайна. В основном, из-за их нечитаемости и трудного восприятия с экрана. Некоторые шрифты оказываются слишком тяжелыми и тормозят работу ресурсов - обязательно обращайте на это внимание. Еще добавлю техническую особенность при работе с шрифтами: их отображение в разных браузерах - есть такая проблема обработки файла или даже целого семейства.

Макро- и микротипографика

Как вы наверняка уже поняли из названия этих терминов:

макроуровень - строит общую структуру текста, определяет размещение контента относительно дизайна;

микроуровень - уделяет внимание мельчайшим деталям, пробелам, интервалам, отступам и т. д.

Задача макротипографики глобальная - сделать текстовые блоки живыми, активными, но при этом гармоничными и цельными. У микротипографики задача попроще, но от этого не менее важная, - обеспечить читаемость. В интернете масса примеров удачного и провального решения этих задач.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Построение целостной композиции, в первую очередь, кроется в понимании пространства. Веб-дизайнер обязан видеть картину целиком, но при этом грамотно раскладывать ее на детали. Незначимых элементов тут нет: заголовок, абзац, вертикальные расстояния между элементами, регистры, толщина…

Шрифты для веб-дизайна желательно указывать в относительных единицах (% или «em»), это способствует адаптивности и гибкости контента. Более привычные пиксели «px» имеет смысл использовать для неадаптивных контейнеров, когда при изменении размера экрана двигаются блоки, а шрифт остается стабильным.

Оформление текста

Важный раздел типографики - символьный компьютерный набор. Сюда относятся: расстановка знаков препинания, употребление скобок, дефиса и тире, точки, пробелы и т. д.

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

Теперь о верстке. Здесь есть свои правила:

Блок с текстом должен ограничиваться 40–50% ширины страницы.

Между абзацами должен быть 1,5 интервал.

Контраст фона и текста должен укладываться в 75–90%.

Комфортный для глаз шрифт - 12–16 px, но даже самый мелкий блок не должен быть меньше 10 px.

Межстрочный интервал выдерживается относительно величины шрифта и измеряется в процентах, в идеале - 140–150% будет достаточно.

Крайне дурным тоном считается выравнивание текста по центру или по ширине. Рваные интервалы между словами, также как и рваные края абзацев снижают восприятие, а чаще всего просто раздражают.

Стили CSS

Стиль CSS - инструмент в работе со шрифтами в веб-дизайне. С освоения стилей CSS начинается любой обучающий курс. Для чего они нужны? Для обобщения всей типографики ресурса! CSS приводит в единое целое станицы и блоки, контролирует любые отклонения от основного курса. Как вы понимаете, одной задумки мало, для ее воплощения вам понадобятся знания и навыки.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Типографика — важный элемент в процесс создания веб-дизайна сайта, но чаще всего, на него закрывают глаза. Отчасти это происходит из-за недостатка времени, срочности работы, да и клиенты практически никогда всегда обращают на этот аспект дизайна. Как правило, шрифты и оформление текста сайта используется стандартное, без особых изысков, максимум, что делается это выделение заголовков в тексте и некоторых других элементах сайта. Те же, кто уделяет достаточно внимания веб типографике могут лишь за счет одних шрифтов получить шедевреальный дизайн сайта, сделать его необычным, ярким и креативным.

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

Типографика – это стиль, расположение и внешний вид печатных букв/текстов на странице. В настоящее время она уже стала неотъемлемым элементом веб-дизайна. Множество интересных статей по теме найдете в соответствующем разделе нашего блога, который пополнился сегодня еще одной публикацией. Рассмотрим актуальные для данного направления тенденции дизайна, что появились и закрепились в 2018 году. Материал будет отличным дополнением записи о веб-типографике. Пост является переводом этой заметки. Цель любого сайта – привлечь…

Продолжаем обновлять старые заметки блога, наполняя их новым содержимым — сегодня рассмотрим оригинальные картинки на рабочий стол со словами и текстами. Обои однозначно понравятся всем, кто любит красивую типографику в различных ее проявлениях. Чем-то они отдаленно напоминают абстрактную тематику, однако по стилистике здесь встречаются абсолютно разные реализации: тут вам и демонстрация необычных шрифтов, и креативные текстовые композиции из трехмерных объектов; светлые, яркие, темные изображения; минималистичные…

После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники. Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает…

Google Fonts — один из самых крупных архивов реально бесплатных шрифтов с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию. С помощью сервиса вы сможете реализовать разные нестандартные примеры типографики. В данной статье найдете подборку из 10-ти бесплатных шрифтов Google Fonts, которые идеально подойдут для оформления заголовков сайта. Они установлены во многих веб-проектах по всему миру. Материал…

Современные веб-технологии позволяют легко использовать нестандартные шрифты для оформления текстов на сайте, тем не менее, им все равно далеко до возможностей фотошопа. Создавать эффектные иллюстрации и картинки с использованием шрифтов дизайнеру помогут специальные стили для фотошопа. В блоге я уже рассматривал разные эффекты для текстов в фотошопе, сегодня пост будет на ту же тематику, но с куда бОльшим выбором полезных материалов. Перед тем, как перейти…

CSS3 дарит просто удивительные возможности оформления текста. Теперь в арсенале веб-мастера (или веб-дизайнера) появляются такие типографские приемы и уровень контроля о которых раньше можно было только мечтать. Все это как нельзя лучше демонстрирует руководство с блога EchoEnduring перевод которого я вам и предлагаю. В итоге получается просто нереально интересное оформление текста и даже не верится, что все это сделано посредством CSS стилей, воистину сейчас интернет…

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

Типографика для веб сайта — достаточно важный элемент дизайна, который в рунете выражен как-то не очень сильно. Данный вопрос чаще поднимается на англоязычных зарубежных дизайнерских блогах, у нас внимание ему практически не уделяется. Нет, конечно при создании макета большинство дизайнеров думает о шрифтах, оформлении, но уж очень скромно и мало. Потому, наверное, в рунете можно по пальцам посчитать количество проектов с яркой креативной и нестандартной…