#3 USE - Урок 03 (2015) PDF

Юзабилити
и эргономика веб-страниц
Урок 3
Веб-типографика
Электронные шрифты в веб-дизайне

Адаптация и оформление текстов
Работа с контентом
Содержание
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Использование электронных шрифтов в веб-дизайне . .8
@font-face . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Веб-сервисы по подключению шрифтов. . . . . . . 13
Выбор гарнитуры (шрифта) для сайта . . . . . . . . . . . . 17
Метрики текста для сайта . . . . . . . . . . . . . . . . 22
Адаптация текста под беглое чтение . . . . . . . . . . . . 27
Пунктуация в текстах для веб‑страниц . . . . . . . . . . . 32
Работа с контентом и микроконтентом . . . . . . . . . . . 35
Урок 3 Веб-типографика
Юзабилити и эргономика веб-страниц
непосредственно на сайте, чаще всего очень
не хотят!
Что же делать? Вот с этим мы и разберем-
ся. Сформулируем задачи, которые должен
решать дизайнер в области веб-типографики,
Введение при проектировании сайта:
Оптическая читабельность. Эта проблема
В этом уроке мы сосредоточим внимание на отнюдь не специфична для веба. Этим вопро-
важнейшей части любого веб-сайта — это тек- сом занимаются и дизайнера-полиграфисты.
стовое оформление. И, все же, в вебе эта проблема не в пример
Почему именно тексту отдается приоритет острее, поскольку, как известно, читать с экра-
в вопросе разработки веб-страниц? Да по той на (любого) значительно тяжелее, нежели с
причине, что, несмотря на мощнейшее раз- бумажного носителя.
витие средств мультимедиа в вебе, он — веб Оптическая читабельность, в свою оче-
— остается преимущественно текстовой сре- редь, складывается из следующих моментов,
дой. Истоки развития всемирной паутины — в которые мы подробно рассмотрим:
реализации обмена текстовой информацией
(вспомните первый урок). Примерно две тре- ◆◆ Выбор гарнитуры, начертания.
ти информации, которая расположена в вебе ◆◆ Выбор метрик шрифта: высота кегля, ин-
сегодня, приходятся на текст. терлиньяж, ширина абзаца и т.д.
Итак, главнейшим парадоксом в развитии ◆◆ Обеспечение должного уровня контраста
всемирной паутины является то, что пользова- между фоном и текстом.
тели посещают сайты ради получения инфор-
мации, которая расположена там в виде текста, Адаптация текстового массива под бе-
но, при этом, читать эту самую информацию глое чтение, т.е. работа над структурой и со-
держанием.
Введение
Самое время вспомнить
то, что изучалось в курсе
Здесь нас ожидают вопросы, наименее (параграф) и заголовок вошли в число первых «Основы типографики».
Загляните в конспек-
«дизайнерские». По-большей части, это — во- тегов HTML. ты или уроки по этому
просы редакторов сайта, его авторов. Тем не С той поры прошло 20 лет, но принципи- курсу. Освежите знания
менее, эта область тесно связана с дизайном и, терминологии. Повтори-
ально ничего не изменилось. По-прежнему, те, пожалуйста, прежде
еще более тесно, с пользовательским опытом, текст веб-страницы состоит из абзацев и за- всего терминологию
т.е. UX. А это — область ответственности веб- головков разных уровней. В курсе HTML типографики и класси-
фикацию шрифтов. Все
дизайнера. вы, уверен, уже познакомились с тем, какие это очень пригодится
Применение общей типографики в веб- именно теги используются для передачи аб- нам здесь.
дизайне и ограничения типографики в брау- зацев и заголовков, как ведут себя элементы
зере. ими созданные в браузере и как выглядят по-
Когда в 1991 году Тим Бернерс-Ли создавал умолчанию.
всемирную паутину — единое информаци- Тем не менее, не лишним будет еще раз
онное пространство на основе гипертекста, перечислить теги, которые создают элемен-
типографика существовала уже сотни лет. Вы- ты текста веб-страницы. Другими словами,
дающиеся деятели этой сферы, разработали давайте вспомним из чего сделан текст веб-
принципы текстового оформления на все слу- страницы согласно спецификации HTML 5:
чаи жизни. Детально рассматривать эти вещи
мы, конечно же, не будем; для этих целей вы ◆◆ <h1></h1>, <h2></h2>, <h3></h3>, <h4></h5>,
изучали предмет «Основы типографики» в <h5></h5>, <h6></h6> — заголовки 6 уров-
прошлом семестре. ней. Основное средство создания струк-
Создание всемирной паутины привело к туры в тексте.
появлению еще одного средства передачи тек- ◆◆ <p></p> — абзац, т.е. обособленная по
стовой информации. Была ли какая-то спец- смыслу, самостоятельная, законченная
ифика в этом? На первый взгляд, не было. часть текста. «Рабочая лошадка» веб-
Поэтому базовые понятия, такие как абзац типографики.
Введение
◆◆ <blockquote></blockquote> — крупная ◆◆ <em></em> — выделение участка текста, т.е.
(блочная) цитата. Т.е. фрагмент текста, слова, которые должны привлечь внима-
представляющий собой высказывание ние, поскольку содержат какую-то важную
какого-либо автора, либо заимствовано информацию.
из другого документа. Может состоять из ◆◆ <strong></strong> — сильное выделение.
нескольких абзацев. Т.е. то же, что и <em>, но с более сильным
◆◆ <ul></ul>, <ol></ol>, <dl></dl> — списки, действием.
т.е. перечисления каких-либо сущностей. ◆◆ <small></small> — текст, набранный «ма-
Могут быть многоуровневыми. леньким шрифтом», т.е. примечания, сно-
◆◆ <address></address> — любая информа- ски, копирайты и т.д.
ция, которая может быть отождествлена ◆◆ <q> — используется для создания неболь-
с адресом. шой цитаты в пределах предложения.
◆◆ прочие элементы: таблицы, блоки иллю- ◆◆ <cite> —используется для указания на-
страций и т.д. Их нужно рассматривать от- звания книги, фильма, проекта и т.д., упо-
дельно. Прямого отношения к нынешней мянутого в тексте, а также, автора цитаты
теме они не имеют. или источника, из которого она взята.
◆◆ <abbr> — аббревиатура.
Как вы, надеюсь, знаете, перечисленные ◆◆ <i></i> — отрывок текста, который пред-
теги создают блочные элементы. Текст, распо- полагает несколько другую интонацию
ложенный в этих блоках, может делиться на или смысловую нагрузку. Это, к примеру,
относительно небольшие фрагменты, которые идиоматические фразы из другого языка,
можно назвать строчными элементами. Стоит транслитерация, мысли и др.
перечислить теги и строчных элементов также ◆◆ <b></b> — аналогично <i></i>, но предпо-
(это не все строчные элементы, предусмотрен- лагает более серьезные отличия в интона-
ные в спецификации HTML 5! ): ции и подаче текста.
Введение
Проектируя страницу, веб-дизайнер дол- Кстати, во всех почти современных бра-
жен хорошо представлять себе какими эле- узерах, значение по-умолчанию равно
ментами она будет отображаться и как они 16px. Это можно изменить, но чаще все-
будут выглядеть, создавая стиль для каждого го это именно так.
из возможных элементов страницы по при- • font-style — определяет начертание
веденным выше спискам. шрифта — обычное, курсивное или на-
Теперь давайте посмотрим на тот арсенал клонное, т.е. доступны значения normal,
возможностей по настройке внешнего вида italic, oblique.
перечисленных элементов, которые предостав- • font-variant — определяет, как нужно
ляет нам CSS. Почему именно CSS? Потому, представлять строчные буквы — оста-
что оформление — это и есть задача CSS, а не вить их без модификаций или делать
задача HTML. их все прописными уменьшенного раз-
Свойства CSS по форматированию текста мера. Значения: normal, small-caps.
условно можно поделить на две группы: • font-family — устанавливает семейство
шрифта, которое будет использоваться
◆◆ Работа с настройками шрифтов: для оформления текста содержимого.
• font-weight — устанавливает насыщен- Это важнейшее свойство CSS именно
ность шрифта. Мы можем сделать на- для веб-дизайнера. О нем подробнее
чертание полужирным (bold) или обыч- чуть ниже.
ным (normal). Также поддерживается ◆◆ Работа непосредственно с текстом
возможность указания величины жир- • text-transform — управляет преобразо-
ности, но это должно поддерживаться ванием текста элемента в заглавные или
гарнитурой. прописные символы.
• font-size — определяет размер шрифта • text-indent — управляет абзацным от-
элемента, т.е. кегль. Измеряется во всех ступом;
доступных в CSS единицах измерений.
Введение
• text-align — управляет выравниванием К примеру, если графический редактор
текста в абзаце позволяет вписать текстовый блок в фигуру
• line-height — устанавливает высоту неправильной формы или разместить его по
строки. Фактически речь идет о рассто- кривой, при этом выведя символы в слове раз-
янии между базовыми линиями сосед- ного кегля, то браузер воссоздаст эту картинку
них строк в абзаце. По-умолчанию опре- с очень большой неохотой или вообще не смо-
деляется настройками самого шрифта, жет это сделать.
что создает массу проблем при верстке, Другими словами, несмотря на общность
если не задать этот параметр явно. подходов в реализации полиграфической
• word-spacing — устанавливает межслов- типографики и веб-типографики, особен-
ный интервал ности браузеров накладывают определен-
• letter-spacing — устанавливает меж- ные ограничения, которые обязан знать веб-
буквенный интервал дизайнер.
• text-shadow — оформляет эффект тени,
которую отбрасывают символы
По-большому счету, вся эта информация

важна для верстальщика, который будет опе-
рировать этими свойствами в коде. По этой
причине я и не планировал приводить здесь
подробную информацию о свойствах и тегах.
Дизайнер обязан знать об их существовании
для того, чтобы не создавать лишних слож-
ностей верстальщику, который будет потом
воплощать в жизнь, созданное дизайнером.
Введение
Так вот — браузер никаких шрифтов не
содержит. А как же он работает? Где он их бе-
рет? Там же где и другие приложения, т.е. из
системных шрифтов — шрифтов, установлен-
ных в системе, и предоставляемых системой
Использование электронных своим приложениям.
шрифтов в веб-дизайне Установка шрифтов — это знакомый
вам процесс. Если говорить об ОС семейства
Windows, то системные шрифты лежат в пап-
Системные шрифты ке: C:\Windows\Fonts
Первый вопрос, с которым сталкивается веб-
дизайнер в области типографики — это вы-
бор шрифта, а чаще всего шрифтов для текста
сайта.
Эта задача очень специфична для веба.
Если в области полиграфии, Вы должны ру-
ководствоваться вопросами читабельности и
стилистики, то в вебе нужно преодолеть также
и особенности браузеров по работе со шриф-
тами.
Во-первых, мы должны четко осознавать,
что любой текст на странице отображается с
помощью специальных электронных шриф-
тов, которые и задают начертание, форму,
размер и прочие характеристики выводимых
символов.
Использование электронных шрифтов в веб-дизайне

Когда Вы используете графический редак- ◆◆ Нельзя скопировать текст.
тор, например, чтобы нарисовать макет стра- ◆◆ Недоступность поисковым системам.
ницы, вы можете полностью контролировать ◆◆ Изображения более тяжелые, т.е. возрас-
набор используемых шрифтов, поскольку это тает трафик.
Ваш компьютер. Даже сверстав страницу и в
свойстве font-family указав тот шрифт, кото- Рассмотрим эту технологию в деталях.
рый Вам нужен, Вы обяжете браузер (снова Для начала определимся с системными
таки — Ваш браузер) взять его из системной шрифтами.
папки. Вы будете точно уверены в том, что В таблице Вы можете видеть полный спи-
браузер его там обнаружит, поскольку туда его сок шрифтов, которые поставляются вместе с
положили именно Вы. определенной ОС (черным цветом с Windows,
А теперь подумайте, можете ли Вы быть а синим с Mac OS). Другими словами — это
столь же уверены в отображении шрифта на шрифты, в наличии которых у пользовате-
чужом компьютере, куда Ваша страница по-
падет посредством Интернета? Вряд ли.
Как же быть? Естественно, заставить бра-
узер загрузить нужный шрифт пользователю
на компьютер, чтобы использовать его.
Не будем рассматривать низкотехноло-

гичный метод — заменить витиеватый текст
изображением. Это хоть и примитивно, зато
кроссбраузерно. Очевидные недостатки:
◆◆ Нередактируемость. Нужно перерисовы-

вать изображение.

SVG — язык разметки
масштабируемой век-
ля вы можете быть уверены. Если Вам нужен мента, который нужно написать декоратив- торной графики, создан-
ный Консорциумом Все-
какой-то другой шрифт, Вам нужно его за- ным шрифтом, генерирует набор специальных мирной паутины (W3C).
гружать. объектов, на которых буквально нарисован с Фактически является
Обзор технологий использования нестан- одним из применений
помощью команд JavaScript каждый глиф. XML. Поддерживает как
дартных шрифтов. font-face — официальная стандартная тех- неподвижную, так и ани-
Задача загрузки несистемных шрифтов нология, являющаяся частью CSS 2.1, предла- мированную интерак-
тивную графику. Разра-
стоит перед веб-дизайнерами уже около 10 гающая загрузку в браузер обычного шрифта батывается с 1999 года. В
лет. За это время было разработано несколько в стандартном формате. Полноценная под- 2001 году вышла версия
1.0,в 2011 версия 1.1 ко-
технологий. держка в браузерах появилась после 2009 года. торая остается актуаль-
sIFR — во время загрузки, текст подменя- С этой поры использование качественной ти- ной до сегодняшнего
дня. В настоящее время
ется флеш-объектом, который строится «на пографики стало мощным трендом, продолжа- в активной разработке
лету» с помощью связки скриптов JavaScript + ющимся до сих пор (см. первый урок). находится версия 2.
ActionScript. Достоинства: кроссбраузерность,
редактируемость, текст выделяется и копиру- Поскольку первые два варианта относятся
ется. Но есть и недостатки: требуется наличие к нестандартным решениям, которые стремят-
включенного js и установленного flash, пара- ся обойти официальные технологии, если нет
метры текста (вроде цвета, размера, жирно- их поддержки, то третья технология является
сти) так просто не изменить, дополнительные на сегодняшний день максимально эффектив-
внешние файлы, что не лучшим образом ска- ной. Мы рассмотрим детально именно её.
жется на скорости загрузки, много флеша на
странице тоже не лучшим образом скажется
на скорости работы сайта.
Cufon — дополнение (плагин) на JavaScript,
которое использует технологию SVG. Т.е рабо-
тает это так: подключается специальный файл
JavaScript, который вместо определенного эле-

существует несколько форматов электронных
шрифтов. Об этом говорит также и специфи-
кация CSS от W3C (http://www.w3.org/TR/css3-
fonts/#src-desc).
@font-face Название Формат шрифта

WOFF (Web Open
Расширение файла
«woff» .woff
Font Format)
Речь идет о директиве CSS @font-face, которая
«truetype» TrueType .ttf
может присутствовать в любом месте таблицы «opentype» OpenType .ttf, .otf
стилей. Общий синтаксис и использование «embedded-opentype» Embedded OpenType .eot
таково: «svg» SVG Font .svg, .svgz
@font-face { К сожалению, единства в поддержке фор-

font-family: Gentium; матов разными браузерами нет и близко. Си-
src: url(http://example.com/fonts/ туация примерно такова:
Gentium.ttf);
} Формат Поддержка браузерами
/*---------------------------------------*/ EOT IE6+
IE9+, FF 3.6+, Opera 11+, Chrome 6+,
h1 { font-family: Gentium, serif; } WOFF
Safari 5.1+, Opera mobile 11+
FF 3.5+, Opera 10+, Chrome 4+, Safari3.2+,
TTF и OTF
Opera mobile 10+, iOS 4.2+, Android 2.2+
На первый взгляд, все понятно. Для ото-
Opera 9+, Chrome 4+, Safari3.2+, Opera
бражения текста в h1 будет загружен файл SVG
mobile 10+, iOS, Android 3
Gentium.ttf по указанному в свойстве src URL’у.
Но, не все так просто. Сложность заключа- Как видим, самый «привередливый» —
ется в форматах шрифтов. Давайте обратимся Internet Explorer, понимающий только форма-
к урокам по типографике и вспомним, что ты .eot или .woff.

Как же быть с форматами? Очень просто. шрифт. Если да, тогда шрифт загружается,
Мы можем указать несколько свойств src. Бра- если нет, тогда браузер не загружая текущий
узер загрузит только первый из тех, который шрифт, читаем следующую строку @font-face.
сможет. Логично указывать их в порядке уве- Если же не указать format, браузер будет за-
личения веса. Самый легкий — .woff, но для гружать все шрифты подряд пока не доберется
IE старых версий, стоит поставить на первое до того, который ему понятен.
место .eot. Таким образом, правило font-face Вывод: использование декларации обя-
может выглядеть примерно так: зательно, если подключается более одного
формата шрифта и мы заботимся о скорости
@font-face { загрузки страницы.
font-family: «JournalRegular»; Как известно, электронные шрифты могут
src: url(«journal-webfont.eot»); иметь массу настроек. Мы можем настраи-
src: url(«journal-webfont.eot?#iefix») вать жирность и начертание путем указания
format(«embedded-opentype»),
свойств font-style и font-weight прямо в @font-
url(«journal-webfont.woff»)
format(«woff»), face:
url(«journal-webfont.ttf»)
format(«truetype»), @font-face {
url(«journal-webfont. font-family: ‘JournalRegular’;
svg#JournalRegular») format(«svg»); src: url(journal-webfont.woff);
} font-weight: normal;
font-style: normal;
Обратите внимание на дополнительную }
декларацию format. Она сообщает браузеру ка-
кой формат шрифта находится по заданному Безусловно нужно помнить, что если вы
URL. Браузер, прочитав данную декларацию, загружаете шрифт только в одном начертании,
определяет сможет ли он отобразить данный то эти настройки не имеют смысла.

чениям толщины, наклона и ширины. Также
огромное значение имеет выбор опции Script,
т.е. набора символов.
Как видно на рисунке, я ограничил на-
бор шрифтов довольно жесткими критериями
Веб-сервисы по (sans-serif, кириллица, наклонный) и получил
подключению шрифтов. всего 5 вариантов на выбор.
Для выбора одного из них нужно клик-
Прочитав все это, думаю, вы озадачены до- нуть по кнопке Quick use возле нужного шрифта
вольно очевидной громоздкостью и слож- (или Add to Collection, если вы собираетесь вы-
ностью кода. Существуют способы сильно брать несколько шрифтов). На открывшейся
облегчить себе жизнь в деле подключения не- странице вы сможете выбрать начертания,
стандартного шрифта. Рассмотрим несколько которые вас интересуют, а также ограничить
из них.
Сервис Google Web Fonts предназначен для
быстрого и удобного подключения шрифтов
на веб-страницу. Позволяет использовать не-
сколько сотен бесплатных оптимизированных
для веба шрифтов. Есть, кстати, и кирилличе-
ские шрифты.
Работа с Google Web Fonts предельно про-

ста. Слева, в боковой колонке, можно с по-
мощью фильтров выбрать нужные категории
шрифтов (доступны serif, sans-serif, display и
handwriting), а также ограничить выбор по зна-

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

таблицы стилей к своему документу:
2. Можно импортировать эту таблицу сти-
лей:
3. Продвинутый вариант — через Java Script
Заметьте, что исходный файл шрифта вы

в любом случае не получите — браузер будет
загружать его с сервера Google по необходи-
мости. Зато вы гарантировано избавлены от
юридических проблем, поскольку используя
эти шрифты, вы точно уверены в законности
этого.
Что же делать, если у вас иная ситуация? У
вас есть права на использование определенно-
го шрифта (или вы его автор), но он у вас есть
только в одном формате. Скорее всего, это,
TrueType. Тут на помощь придет сервис http://
www.fontsquirrel.com/fontface/generator. Здесь
можно конвертировать шрифт в те самые фор-
маты, которые мы рассмотрели чуть выше.

Вы загружаете туда свой шрифт и можете
воспользоваться тремя вариантами настроек:
1. Basic — если Вас интересует минимальный
вес и скорость загрузки
2. Optimal — оптимальное соотношение веса
и качества конвертации
3. Expert — если есть желание повозиться с
настройками (см. рисунок). В этом режи-
ме вы можете сформировать себе точный
набор символов, а также много всего про-
чего.
Этот сервис может не суметь обработать

лицензионные шрифты. Это даже хорошо, по-
скольку способствует соблюдению авторских
прав.
Самое главное, что после того, как вы
определитесь с настройками, вы скачаете не
только набор с конвертированными шрифта-
ми, но и готовый набор CSS-кода для вставки
в проект. Таким образом, особо вникать в тон-
кости задания свойств в правиле @font-face не
всегда нужно.
В качестве резюме хочу добавить, что нуж- Настройки уровня Expert (для удобства на иллюстрации длинное окно разделено на две части)
но здраво подходить к вопросу использования
несистемного шрифта. Если подключаемым

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

1. Основной текст — крупные текстовые бло-
ки, предназначенные для чтения. Они не-
сут основную информацию.
2. Акциденции — заголовки, подписи, над-
писи, врезки, выноски и т.д. Это блоки
Выбор гарнитуры (шрифта) текста, которые содержат небольшое его
для сайта количество и могут быть поняты пользо-
вателем при беглом взгляде, без особого
Как выбрать нужную гарнитуру? Тут можно
провести определенные параллели с выбором
цвета. Во всяком случае, очевидно, что:
◆◆ шрифтов на сайте будет использоваться

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

ничить области применения на сайте на две
основные группы:
Выбор гарнитуры (шрифта) для сайта

вчитывания. Они работают на привлече-
ние внимания.
Подходы к оформлению этих текстовых

групп порой противоположны.
Шрифт основного текста должен подби-
раться исходя из соображений читабельности.
Т.е. этот шрифт должен быть максимально Вот акцидентный текст — это совсем дру-
простым, без витиеватых элементов. Поэтому, гое дело. Здесь можно поэкспериментировать.
очень часто, для основного текста выбирают Акциденции — это обычно несколько слов,
один из системных шрифтов, поскольку, кроме которые должны привлечь внимание. Вчиты-
читабельности, важным моментом является ваться там не нужно. Скорее всего пользова-
также надежность его загрузки. Если выбрать тель осознает смысл написанного при беглом
в качестве основного шрифта загружаемый с взгляде. Поэтому ничего страшного. Если
помощью @font-face, то нужно очень тщатель- здесь применить какой-либо шрифт ориги-
но его тестировать для всех браузеров, иначе, нальной конструкции, если это требуется по
если он не будет загружен, браузеры отобразят общей стилистике.
его тем шритфом, которым смогут. С другой
стороны, если с загрузкой все в порядке, то
это как раз тот случай, когда утяжеление сай-
та оправдано, поскольку этого шрифта будет
много.
Кстати, на картинке, представлен скрин-
шот с сайта http://smashingmagazine.com. Здесь
в качестве основного выбран шрифт Proxima
Nova Regular. Т.е. нестандартный шрифт.
Здесь использован шрифт Lubalin Graph

Medium. Он, кстати, бесплатный
А вот пример сайта, где вообще нет ос-
новного текста! Одна сплошная акциденция:
www.denisechandler.com. Очевидно, что это
промосайт. Рекламирует он услуги дизайне-
ра. Если же заглянуть в раздел Blog, то мы
найдем там основной текст, где использован
старый добрый системный Arial. (Ну вообще-
то Helvetica, но для машин с Windows, она все
равно будет заменена Arial). Зато в заголовках
мы найдем здесь Hand Slab Regular. На главной
же используется также и ProvaRegular.

Ну, хорошо, исходя из вышесказанного,
думаю, что мы можем сформулировать очень Вот пример организации
важное утверждение: шрифтовая схема для шапки сайта http://www.
сайта содержит от одной до трех (максимум 1. Внутригарнитурное сочетание — уни- kylemkramer.com/designs/
Hosting3:
четырех) гарнитур. версальный рецепт. Довольно легко реа- Здесь мы видим шрифты
Lobster1.4Regular и Nevis
Гораздо сложнее выбрать и обозначить лизуется в вебе, поскольку опирается на Bold.
какие-то очевидные правила для подбора со- встроенные в CSS средства управления.
четаний шрифтов. Очевидно одно — между Прекрасно подойдет для выдержанных,
выбираемыми шрифтами должно быть един- строгих, утонченных проектов. Опасность
ство и, одновременно, контраст. Без изрядной — возможен недостаточный конраст меж-
доли субъективности тут не обойтись. Также ду соседними начертаниями. Стоит более
стоит помнить о том, что рациональность — тщательно подбирать их.
это хорошо, поэтому вырабатывая какое-либо 2. Serif и sans-serif (Антиква и гротеск) —
решение, нужно обходиться малыми сред- самое распространенное сочетание, кото-
ствами. Я имею в виду, что, если вы выбираете рое подходит там, где недостаточно вну-
шрифт для простого выделения в тексте, то не тригарнитурной сдержанности. Что для
стоит менять гарнитуру — достаточно изме- чего стоит применять? По-разному. Чаще
нить начертание. Другое дело, если вы пишете встречается применение засечных шриф-
теглайн или слоган проекта, тогда нужно, на- тов для акциденций, а незасечного шрифта
оборот, подчеркнуть отличие от всего осталь- в качестве основного, хотя нынешние реа-
ного. Тут должно быть серьезное изменение в лии ничуть не мешают сделать и наоборот.
гарнитуре. Если же и с начертанием порабо-
тать, то можно и переборщить, искусственно Тут нужно отметить такую исторически
утяжелив эту часть страницы. сложившуюся закономерность. Долгое время
Все же, давайте попробуем рассмотреть мониторы не в состоянии были отобразить за-
некоторые варианты сочетаний: сечки символов должным образом на неболь-

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

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

выбранная шрифтовая схема (какая-бы она ни
была) должна повторяться на всех страницах
сайта без исключений.
В конце, хочу порекомендовать простой и
эффективный сервис по подбору и сравнению
гарнитур для сайтов: Typetester.org. Также, ду-
маю, полезным будет и Typechart.com

внимание именно px, а не pt! Во-
обще, когда собираетесь созда-
вать дизайн сайта, лучше сразу
настройте графический редактор
так, чтобы у вас все измерялось
Метрики текста для сайта только в px, даже текст.
Эти стандартные 16px вы-
Важно не только каким шрифтом набрать браны не случайно. Они лучше
текст на странице. Не менее, а порой даже и всего соответствуют удобочита-
более, важными вопросами являются: емости и не стоит пренебрегать
этим. 16px лучше всего сразу
◆◆ Кегль основного текста и кегль в заголов- принять за 100% и дальше раз-
ках меры всех текстовых элементов
◆◆ Ширина строки задавать не абсолютно, а относи-
◆◆ Межстрочный интервал тельно, т.е, если нам нужно сде-
◆◆ Выключка лать кегль какого-то элемента в
Настройка параметров
20px, то мы укажем его размер шрифта в Google Chrome и в
Все это также влияет на оптическую чи- в 125%. Тем самым создавая пропорциональ- Mozilla Firefox.
табельность страницы, а значит, правильный ность всей страницы, т.е. если пользователь
выбор этих параметров повысит вероятность сайта увеличит размер шрифта в настройках
того, что пользователь прочтет написанное на браузера, то пересчитается вся страница.
вашей странице и останется довольным.
Соотношение между px и pt
Как известно, px (пиксель) — это относительная единица измерения. Размер пикселя зависит
Кегль от экрана устройства. Так чему же равен размер пикселя? Это регулируется разрешением
(resolution), которое измеряется, как известно из предыдущих семестров в dpi (dots per
Размер шрифта по-умолчанию практически во inch), т.е. точках (пикселях!) на дюйм.
всех современных браузерах — 16 px. Обратите Также, уверен, вам известно, что для печати, изображение должно быть не менее 300 dpi,
а для экрана достаточно и 72 dpi. Какое разрешение использует браузер? Это зависит от
операционной системы. К примеру, Windows использует разрешение в 96 dpi.
Мы можем посчитать соотношение между пунктом (pt) и пикселем (px) по такой формуле.
В одном дюйме 96 пикселей и 72 пункта, поскольку пункт — это и есть 1/72 дюйма. Таким
образом, получается, что 1pt = 1,333 px.
Ну ладно, это знать дизайнеру, конечно странице в 13px. Сегодня, как можно заметить,
же полезно, но не критично, поскольку это, это — уже 16px и более. Таким образом, мак-
по-большей части, проблема верстальщика. симальное соотношение размера основного
Поэтому разберемся с соотношением размера текста и текста в заголовке составляло 29 / 13
основного текста и размера текста заголовков. ≈ 2,2. Если спроецировать это на нынешние
Известный журнал http://smashingmaga реалии, то мы получим примерно 35px. Это
zine.com провел довольно серьезное исследо- — справедливо.
вание этого вопроса. Хоть оно и датировано С другой стороны, заголовки бывают раз-
2009 годом, определенные выводы все же ак- ными. Мы знаем 6 уровней заголовков. Думаю,
туальны и по сей день. что справедливой будет следующая законо-
Итак, в этом исследовании был поставлен мерность:
вопрос: Какой средний размер шрифта для
заголовка страницы? (What is the average Font
Size For Headlines?). Для ответа на этот вопрос
было проведено изучение 50 наиболее попу-
лярных сайтов. Конечно же, американских, но
это сути не меняет. Результаты представлены
на диаграмме.
Не надо иметь глубоких познаний в ан-
глийском языке, чтобы увидеть, что наиболее
популярными являются размеры от 20 до 29
px. Придется это скорректировать. В послед-
ние несколько лет проявились тенденции к
общему увеличению размеров текста на стра-
ницах. В этом же исследовании указано, что
наиболее часто встречается размер текста на

body { font-size: 16px; } при проектировании какого-то текстового
h2 { font-size: 220%; } ресурса, т.е. где нужно много читать.
h3 { font-size: 180%; } Кстати сразу же стоит подумать и об об-
h4 { font-size: 140%; } ратном факторе, т.е. минимальной ширине ко-
h5 { font-size: 120%; } лонки. Вряд ли удобно читать слишком узкие
h6 { font-size: 110%; } колонки, где буквально по одному слову на
строке. В книге The Elements of Typographic
Куда делся h1? Заголовок первого уровня, Style, Роберт Брингаст большое внимание уде-
как правило, это особая сущность. Это — на- ляет значению в 45 и 75 символов. Вот эти 45
звание всего сайта. Частенько он либо высту- символов и есть нижним пределом.
пает в виде логотипа, т.е. просто изображения,
либо, будучи, текстовым, все равно выбивает- Межстрочный интервал
ся из общей схемы, имея собственный шрифт Межстрочный интервал определяется значе-
и собственный кегль. Т.е. в качестве заголовка нием свойства line-height — высота строки,
страницы работают элементы от h2 и ниже. которое равно кеглю плюс межстрочный ин-
Ширина строки
Обратимся все к тому же исследованию от
http://smashingmagazine.com. Здесь исследуется
вопрос: Каково количество символов в строке?
(How many characters per line?). Снова график.
Получаем значение в районе 82 — 84 сим-
вола. При кегле в 16px мы получаем примерно
500px. Эти значения стоит принять как опти-
мальные для определения ширины колонки

тервал. Его можно задавать в любых единицах выключкой. Самый распространенный ва-
измерения, но удобнее всего в относительных риант — это left. Каждая строка начинается
единицах, т.е. em. В этом случае, высота строки слева, но длины строк разные, и справа обра-
будет рассчитываться от кегля. зуется рваный эффект.
Все тот http://smashingmagazine.com снова Возможно, вам нравится выравнивание
может предоставить нам данные. На вопрос: текста по ширине (justify), но тут есть про-
Какова оптимальная высота строки основного блема. Она заключается в интервалах между
текста? (Optimal Line Height For Body Copy?) символами. В печати используется перенос
получены следующие ответы: (hyphenation), если слова не влезают на одну
строку. Это приводит к тому, что в строке
◆◆ Отношение высоты строки к кеглю ≈ 1,5 появляется больше компонентов (слова и ча-
◆◆ Отношение высоты строки к её длине, т.е. сти слов), что в свою очередь оптимизирует
колонке получено около 27 насыщенность строки словами и уменьшает
межбуквенный интервал. В браузере такой
Наиболее ценным является первое соотно- роскоши, как автоматический перенос слова,
шение. Поэтому очень правильным будет за- нет. Да, можно, в принципе, и в ручную рас-
дать line-height как 1,5em для всей страницы ставить переносы с помощью псевдосимвола
сразу, а потом варьировать локально при не- , но представьте себе объем работы в этом
обходимости. Заметьте, что в печатном тексте, случае и вообще, возможно ли это для онлай-
высота строки часто несколько меньше, чем в новых изданий, которые обновляют новости в
электронном тексте. реальном времени?!
Таким образом, если в печати желательно
Выключка иметь колонку с аккуратными краями, то для
У нас есть свойство CSS text-align, которое веба предпочтительным является
может принимать следующие значения: left, использование левого выравнива- В CSS3 есть свойство text-justify, которое
помогает нам обрести больше контроля
right, center, justify. Это и есть управление ния. над форматированием текста, но как ни
странно, доступен этот инструмент сейчас
только для Internet Explorer. Но пока дру-
гие браузеры не подключились к общей
тенденции, кроссбраузерное решение воз-
можно только с помощью JavaScript.
Цвет текста
Вроде бы цвет на сайте мы обсудили в про-
шлый раз, но тут речь пойдет немного о
другом. Напомню, что цветовая схема сайта
призвана создавать определенный эмоцио-
нальный фон. Цвет текста нас интересует пре-
жде всего в прикладном плане. Он должен обе-
спечивать достаточный контраст при чтении.
Лучший контраст — это, несомненно, бе-
лый и черный, но, если нужно все таки что-
то пооригинальнее, то можно использовать и
другие сочетания. Для экранного текста слиш-
ком сильный контраст (черный и белый) не ◆◆ желтый текст на красном фоне
всегда лучшее решение, потому что текст на- ◆◆ зеленый текст на красном фоне и тому по-
чинает мерцать. Попробуйте #333 на #fff. добное…
Простой способ проверить достаточность
контраста в макете — это убрать насыщен- Есть онлайн инструмент, который опреде-
ность вплоть до градаций серого. Если и в та- ляет контрастность цветовой схемы для тек-
ком виде текст будет читабелен при масштабе ста.
в натуральную величину, то, скорее всего, и с
цветом будет все нормально.
Избегайте таких сочетаний:
◆◆ светло серый текст на легком сером фоне

или белом фоне
◆◆ серый текст на желтом фоне

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

чувствуете в себе мотивацию прочитать это? нужно пробежать по горячему песку на пляже
Ну ладно не до конца, хотя бы просто ознако- от остановки к морю. Сразу все расстояние не
миться. Понять, стоит ли статья того, чтобы осилить, тяжело. Мы будем преодолевать путь
её все же прочесть до конца? Кстати на скрин- перебежками, т.е. от кустика с тенью к кустику.
шоте показана примерно половина. Так и пробежим до конца.
У меня этот скриншот вызывает страшную С чтением страницы нужно поступить
тоску и заставить меня это прочесть можно также. Текст должен быть сегментирован. Дру-
только силой. гими словами, разбит на очевидные, визуально
Что здесь не так? Как сделать правильно? очерченные фрагменты, каждый из которых
Одно из главнейших правил юзабилити по отдельности не представляет ничего непре-
гласит: «Веб страницы не читают, а просма- одолимого.
тривают!». То есть, пользователь Интерне-
та (подчеркиваю, это совсем не относится к Способы сегментирования текстовых бло-
читателям печатных изданий) воспринимает ков:
страницу с текстом так же, как и страницу с
изображением. Можно привести метафору ◆◆ Списки. Они решают сразу несколько
Стива Круга: пользователь воспринимает веб- задач. Во-первых, они действительно от-
страницу как «рекламный щит, проносящийся деляют массу текста одну от другой, а
мимо него со скоростью 60 миль в час». Куда во-вторых они содержат важную инфор-
там читать… Тут хоть бы в принципе понять мацию в концентрированном виде. Обра-
что к чему… тите внимание на обилие списков в этом
Итак, пользователь немотивирован чи- уроке, например. :) Все, что можно пере-
тать ваш текст. Как мы обычно поступаем, числять, нужно оформлять списком. Даже
когда хотим заставить человека что либо сде- если перечисление содержит два пункта
лать? Мы предлагаем ему делать это частями, — то это все равно уже стоит оформить
микрозаданиями. Представьте себе, что Вам именно списком. Будет ли это маркиро-

ванный или нумерованный список не • Изменение размера (кегля). Не годится
принципиально. Естественно, список дол- потому, что «рвет» строку, нарушая вер-
жен быть оформлен аккуратно и строго. В тикальный ритм. Это очень плохо.
особенности это касается многоуровневых • Заглавные буквы. За 20 лет существо-
списков. вания сетевой коммуникации четко вы-
◆◆ Иллюстрации с подписями. Тут, уверен, работалась условность того ,что верх-
что и комментариев особых не потребует- ний регистр (uppercase) — это либо крик
ся. Мы все, будучи даже взрослыми, все либо признак непрофессионализма. Не
равно любим рассматривать иллюстрации используйте это никогда.
в тексте и читать подписи к ним. Други- • Подчеркивание. Снова мы падаем
ми словами, разумным будет сделать так, жертвами условности веба о том, что
чтобы увидев иллюстрацию, пользователь подчеркнутый текст — это, вероятно,
захотел прочитать текст рядом, чтобы уз- ссылка. Не используйте подчеркивание
нать больше. для выделения не только в вебе, но и в
◆◆ Выделения в тексте курсивом и полу- печатной типографике.
жирным. Начнем с того, что выделения • Курсивный текст. Подходит для легкого
в принципе должны быть в тексте. Что выделения довольно крупных фрагмен-
выделять? Интересное. Или ВАЖНОЕ!!! тов текста, поскольку, если выделить
Теперь давайте подумаем, какие у нас есть одно или два слова, то это не очень кон-
для этого приемы: трастно. Тем не менее, весьма подходя-
• Изменение цвета. Не годится. В вебе щий вариант.
очень сильна условность представления • Полужирный текст. То, что не сильно
ссылок в тексте другим цветом. Не та- заметно выделением курсивом, можно
ким как основной цвет, таким образом, выделить полужирным.
выделяя что либо цветом, мы говорим Так что, как видите, особой альтернативы
пользователю о том, что это — ссылка. курсиву и полужирному нет.

◆◆ Заголовки и подзаголовки. У меня, к ◆◆ Предпочтение «английских» абзацев
примеру, есть одна очень странная при- перед «русскими». Английский абзац —
вычка: я не могу начать читать какой-либо это абзац без отступа первой строки, но с
кусок текста (не только на сайте, вообще четкими вертикальными отступами меж-
любой), не выяснив предварительно его ду абзацами. Русский же абзац исполь-
объем. Очевидно, что выяснение объема зует «красную» строку, но без отступов
опирается на пространство от заголовка к между абзацами. Думаю, всем очевидно,
заголовку. Если в книге или журнале этот что английские абзацы значительно луч-
объем может быть довольно серьезным, ше подходят для веба. И действительно,
то на веб-странице, возьмите себе за пра- по-умолчанию, настройки CSS в браузе-
вило, нужно стараться сделать так, что на рах для абзацев ориентированы именно
одном экране умещался фрагмент текста на английский стиль. Кстати, не стоит их
полностью от заголовка до заголовка. Это смешивать, т.е. одновременно применять и
не значит, что нужно ставить заголовки вертикальный отступ и «красную» строку.
после каждого абзаца, но разбивать текст ◆◆ Врезки. В веб врезки пришли из журналь-
на подразделы, готовя его для публикации ного дизайна. Работают они довольно не-
на сайте, нужно чаще, чем для печати. плохо.
◆◆ Короткие абзацы. Стремитесь делать не-
большие абзацы. Примерно — 5–6 строк.
Есть также еще одно наблюдение. Многие
люди читают первые пару строк абзаца и
последние пару строк. Если все понятно,
то абзац целиком, так и останется непро-
читанным. В вебе это еще критичнее, по-
этому не пугайте пользователя абзацами
на полэкрана.

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

наложило определенный исторический от-
печаток.
Итак, рассмотрим главные «камни прет-
кновения»:
Пунктуация в текстах Дефисы, тире и прочие «черточки»

для веб‑страниц Не буду рассказывать об областях примене-
ния каждой из разновидностей тире, дефисов
Одним из показателей квалификации гра- и минусов. Замечу только, что различать их
фического дизайнера всегда было качество стоит и в HTML они выводятся с помощью
верстки текста, что включает в себя скрупу- таким символьных подстановок:
лезную работу над символами пунктуации.
Настоящий дизайнер без труда отличит тире ◆◆ Дефис &#х2010
от дефиса и правильно расставит кавычки. ◆◆ Минус &minus
Говоря о том, как правильно сегментиро- ◆◆ Короткое тире &ndаsh
вать текст на сайте, нельзя не упомянуть и ◆◆ Длинное тире &mdаsh
печальную судьбу пунктуационных символов
на веб страницах. Кавычки
Почему печальную? В первую очередь Кавычка (") (&#х0022) — в Unicode имеет назва-
из-за того, что правильно использовать эти ние «QUOTATION MARK». Не является ни ка-
символы в вебе можно, зачастую, только ис- вычкой, ни знаком дюйма, ни знаком угловых
пользуя символьные подстановки, что боль- секунд. Используется в программировании.
шинству разработчиков делать банально лень. Разрешается использовать только в том слу-
К тому же, долгие года, как мы выяснили еще чае, если нет возможности заменить на другой
в первом уроке, дизайном веб-страниц зани- знак. Соответственно любое употребление в
мались непрофессионалы и это, безусловно, тексте ошибочно.
Пунктуация в текстах для веб‑страниц

Апостроф (') (&#х0027) — на самом деле любыми словами в букварях. Символ ставится
не является апострофом, в Unicode имеет на- после ударной гласной.
звание «APOSTROPHE», но его употребление
в тексте также не рекомендуется. Этот знак Скобки
не является знаком фута или знаком угловых Со скобками, слава Богу, все в разы проще, по-
минут. Используется в программировании. скольку нет спецсимволов для них. Они легко
Французские кавычки («ёлочки») (&lаquо; доступны с клавиатуры. Но тут есть несколько
и &rаquо;) — традиционные кавычки в русской правил, которые стоит напомнить:
типографике.
Немецкие кавычки („лапки“) (&bdquо; и ◆◆ После открывающей и перед закрывающей
&ldquо;) — традиционные вложенные кавыч- скобками пробелы не ставятся.
ки, или кавычки второго рисунка. ◆◆ Знаки препинания ставятся после скобок,
Английские одинарные кавычки (‘ма ́р причём пробелом отделяется только тире.
ровские’) (&lsquо; и &rsquо;) — используются ◆◆ Скобки не могут стоять в начале предложе-
филологами при составлении словарей (как ния, кроме случаев, когда перед скобками
показывает практика, используются не всегда). предложение закончилось. В таком случае
В обычных текстах не употребляются. после скобок ставится точка. Исключение:
Апостро ́ф (’) (&rsquо;) — английская оди- в оформлении пьес для описания состоя-
нарная закрывающая кавычка. Чаще всего ис- ний героев скобки могут стоять в начале
пользуется в иностранных именах и нараще- предложения, но после указания актёра.
ниях. Например: Д’Артаньян, Сара О’Коннор, ◆◆ Если изменяется начертание текста внутри
Intel’овский процессор скобок, то начертание самих скобок оста-
Знак ударения, аку ́т (´) (&асutе;) — исполь- ётся неизменным.
зуется только в тех случаях, когда от ударения
зависит смысл слова. Также употребляется с

Прочие символы
Если Вам нужен знак копирайта ©, торговой
марки ™ и т. д., то не имитируйте их, а исполь-
зуйте возможности символьных подстановок
для них.
Заботиться об этих премудростях, безус-
ловно, стоит, если Вы хотите, конечно же, де-
лать качественный продукт.
Рекомендую подробнее прочитать об
экранной пунктуации в «Ководстве» Лебедева
и в очень полезной статье на Хабрахабре.

сделать так, чтобы этот товар лучше продавал-
ся, т.е. оформить его должным образом.
Есть ли отличия в создании контента для
обычных, печатных, медиа и для веба? Да, они
есть. Рассмотрим их.
Работа с контентом Главное правило веб-копирайтинга: при
и микроконтентом написании контента будь лаконичен. Жела-
тельно, чтобы статья укладывалась в два-три
Напоследок, хочу сказать несколько слов на экрана, т.е. была в пределах от 500 до 700 слов.
очень специфичную для дизайнера тему — ра- Если кратко, то второе основное требование
бота над содержанием текста. Да, дизайнер — при написании контента для веб-страниц:
не копирайтер и, тем более не писатель. Тем не электронную версию большинства печат-
менее, знать о некоторых тонкостях не лишне. ных материалов следует делать вдвое короче.
Во первых, нужно четко отдавать себе от- Как же сократить текст не в ущерб содер-
чет о том, что главным на сайте является все жанию? Для этого существует несколько попу-
же контент. Великолепный, модерновый ди- лярных приемов. Например, если статья затра-
зайн и тщательно продуманная навигация гивает некоторые моменты из смежной темы,
не спасут проект, если он не будет содержать то не обязательно освещать их прямо в этой
авторского, полезного, интересного и актуаль- статье. Достаточно привести ссылки. Если же
ного контента. темы связаны значительно более тесно, и ав-
Content is the King — так говорят оптимиза- тор считает, что большинство читателей, так
торы сайтов, а точнее особая их разновидность или иначе, захочет обратиться к ним, то мож-
— контент-маркетологи. Фактически, содер- но сделать отдельные тематические разделы
жимое, сайта (которое, как мы помним, на 2/3 и дать на них ссылки в пределах одной веб-
— текст) — это товар. Задача веб-дизайнера страницы. Это облегчит пользователю процесс
чтения и распечатки.
Работа с контентом и микроконтентом

Заголовки в статьях на веб-странице долж-
ны точно отражать смысл раздела. Кроме того,
статью желательно снабдить аннотацией из
трех-четырех строк, в которой кратко изложе-
но содержание статьи. Такие аннотации часто
называют тизерами.
Еще одним важным правилом веб-копи
райтинга является следование принципу Особое внимание стоит уделить заголов-
«перевернутой пирамиды», т.е. абзац (да и кам, ведь их читают в первую очередь:
вообще весь текст) нужно выстраивать так,
чтобы сначала шла основная мысль и смысл ◆◆ Они должны быть предельно ясными и со-
статьи, а уже потом — подробное описание и держать основную мысль в первом-втором
пояснения. слове
Это очень противоречит оффлайновой ◆◆ Очень плохо, если несколько заголовков
манере изложения, где принято подводить начинаются одинаково. При сортировке
читателя к выводу рядом доводов, умозаклю- статей будет очень сложно отличить их
чений и фактов. Русскоязычных авторов чаще друг от друга.
всего всегда учили помещать значимое в конец ◆◆ При написании пользуйтесь нейтральным
предложения. Как видим, для веба нужно де- языком: ни какой игры слов, ни каких кру-
лать наоборот. тых или навороченных заголовков. При
Также веб-контенту присущ телеграфный написании пользуйтесь нейтральным язы-
стиль. То есть желательно, чтобы каждый раз- ком: никакой игры слов, никаких крутых
дел статьи был контентно независим и позво- или навороченных заголовков.
лял прочитать его отдельно, в отрыве от со-
седей.
Работа с контентом и микроконтентом

Андрей Пилипенко

© Компьютерная Академия «Шаг», 2013

www.itstep.org

#3 USE - Урок 03 (2015) PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

#3 USE - Урок 03 (2015) PDF

Загружено:

Авторское право:

Доступные форматы

Юзабилити

Электронные шрифты в веб-дизайне

По-большому счету, вся эта информация

Использование электронных шрифтов в веб-дизайне

Не будем рассматривать низкотехноло-

◆◆ Нередактируемость. Нужно перерисовы-

Использование электронных шрифтов в веб-дизайне

Использование электронных шрифтов в веб-дизайне

@font-face Название Формат шрифта

@font-face { К сожалению, единства в поддержке фор-

Использование электронных шрифтов в веб-дизайне

Использование электронных шрифтов в веб-дизайне

Работа с Google Web Fonts предельно про-

Использование электронных шрифтов в веб-дизайне

1. Добавляете подключение дополнительной

Заметьте, что исходный файл шрифта вы

Использование электронных шрифтов в веб-дизайне

Этот сервис может не суметь обработать

Использование электронных шрифтов в веб-дизайне

Использование электронных шрифтов в веб-дизайне

◆◆ шрифтов на сайте будет использоваться

Выбирая шрифт, стоит сразу же разгра-

Выбор гарнитуры (шрифта) для сайта

Подходы к оформлению этих текстовых

Здесь использован шрифт Lubalin Graph

Выбор гарнитуры (шрифта) для сайта

Выбор гарнитуры (шрифта) для сайта

3. Сочетание двух антикв или двух гроте-

Ну и, конечно, думаю, все понимают, что

Выбор гарнитуры (шрифта) для сайта

Выбор гарнитуры (шрифта) для сайта

Выбор гарнитуры (шрифта) для сайта

◆◆ светло серый текст на легком сером фоне

Выбор гарнитуры (шрифта) для сайта

Адаптация текста под беглое чтение

Адаптация текста под беглое чтение

Адаптация текста под беглое чтение

Адаптация текста под беглое чтение

Адаптация текста под беглое чтение

Пунктуация в текстах Дефисы, тире и прочие «черточки»

Пунктуация в текстах для веб‑страниц

Пунктуация в текстах для веб‑страниц

Пунктуация в текстах для веб‑страниц

Работа с контентом и микроконтентом

Работа с контентом и микроконтентом

Юзабилити и эргономика веб-страниц

© Компьютерная Академия «Шаг», 2013

Вам также может понравиться