Создание сайтов. Типографика сайта .

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

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

   Если слова – содержание вашего высказывания, то шрифт – манера, с которой вы его подаете: аристократичная или панибратская, снобская или нейтральная. Только не смейтесь, но в конечном счете от того, какой приговор сайту выносит посетитель: «Дешевка» или «Дорого сделано!», «Шик!» или «Да, сэкономили…», зависит, сколько своего времени и денег он будет готов вам отдать в дальнейшем (рис. 24). Так что верстка вкупе с типографикой – гормон роста для добавленной стоимости.

 

 

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

   • Слишком много шрифтов на сайте – мало проку. В среднем случае – максимум два- три. На автомобильном портале Am.ru без трений уживаются Tahoma, Arial и Helvetica, однако мы не знаем, каких трудов стоило верстальщикам и дизайнерам сделать их сочетание невырвиглазным.

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

   • Засечки: быть или не быть? По нашему мнению, для отображения на экране предпочтительны шрифты без засечек (так называемые гротески) – чуть расширяющихся штрихов на концах линий. Однако не бросайтесь в крайности. Например, в онлайн-издании Afisha.ru сами статьи набраны шрифтом Georgia (с засечками), а надписи в меню, подписях к иллюстрациям, служебных и рекомендательных блоках – Arial (без засечек) , что создает прекрасный контраст и помогает читателю интуитивно ориентироваться на портале. На такой игре нюансов и зиждется успех многих веб-проектов.

 

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

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

   • Правильный кегль. Кегль – упрощенно «высота шрифта», а точнее, высота строчной буквы с самым длинным выносным элементом по вертикали и пробельным расстоянием под ней. Традиционно измеряется в типографских пунктах (см. § 81 «Ководства» Артемия Лебедева), в Вебе – обычно в пикселях (фиксированная величина) или в em (масштабируемая).

   Немало веб-дизайнеров для основного шрифта оптимальной считают высоту 12–16 пикселей, или 10–12 пунктов: наблюдается устойчивый тренд на сравнительно крупные шрифты. Распространен стереотип, согласно которому не рекомендуется использовать кегль больше двенадцати пунктов, поскольку иначе не удастся разместить самую важную информацию на первом экране. Но если текст раздражающе мелкий, его с высокой степенью вероятности вообще читать не станут .

   В коде сайта часть экспертов советует указывать кегль не в абсолютных (пиксели и пункты), а в относительных величинах, например em. Хотя в предпочтениях дизайнеры и верстальщики не едины.

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

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

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

   Важно, чтобы и вы и верстальщик четко себе представляли, какие именно типы надписей будут в ходу на вашем сайте, насколько сложной будет иерархия заголовков. Чтобы рассчитать кегль заголовков и основного текста, часто применяется последовательность чисел Фибоначчи (или золотое сечение), где каждый член начиная с третьего равен сумме двух предыдущих, например: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 – и далее. Таким образом, кегль шрифта у основного текста может составлять 13 пикселей, у подзаголовка – 21, а у заголовка – 34; везде плюс-минус один-два пикселя. Или 14, 22, 36 соответственно.

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

   • Шрифт должен быть и разборчивым и удобочитаемым. Это не синонимы. Разборчивость означает, насколько легко читатель идентифицирует отдельные символы и различает их. Затейливые декоративные шрифты не годятся в качестве основных. А моноширинные, с одинаковой шириной символов, например Courier, при прочих равных обычно читаются хуже, чем пропорциональные.

 

  Обратите внимание  

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

 

   • Межстрочное расст ояние, или интерлиньяж. Стандартный, по умолчанию, интерлиньяж принимается за единицу. Его лучше избегать: когда строчки плотно утрамбованы, с нужной при чтении оказывается очень легко сбиться. Тексту требуется пространство. Оптимальное межстрочное расстояние в веб-верстке – приблизительно 1,4–1,5. Точное значение зависит от гарнитуры, размера шрифта и длины строки.

   • Цвет шрифта должен контрастировать с фоном. Джентльменское, по справедливости самое популярное сочетание – черный шрифт на белом фоне. В любой ситуации, когда необходимо иное, следует глубоко задуматься: а так ли оно необходимо? Трудно придумать, в чем сакральный смысл серых букв на желтом фоне. По рекомендации ранее упомянутого W3G, коэффициент контрастности текста по отношению к фону должен быть не меньше 4,5:1 (см. блок «Полезно знать»). Для проверки соответствующего показателя подходит онлайн-сервис Color Contrast Check.

   • Умеренная длина строки. Излишне короткие строки заст авляют глаза играть в чехарду, излишне длинные снижают скорость чтения. Золотая середина – семь-восемь слов, не считая предлогов, союзов и других служебных частей речи. Или 45–70 символов. При значительном отклонении в ту или другую сторону взгляду будет труднее скользить по тексту. Хорошо, чтобы вдобавок читатель сразу мог просканировать написанное на странице по диагонали. Если текст оформлен правильно, с выраженными подзаголовками, списками, выделением значимых слов, посетитель быстро схватывает его смысл и с большей вероятностью совершит действие, которого вы от него ждете.

 

  Обратите внимание  

   Хороший дизайнер или верстальщик не будет повсеместно использовать при верстке протухшую «рыбу» – стандартные тексты-заполнители, особенно набивший оскомину пассаж Lorem ipsum dolor sit amet… – вместо релевантных содержанию сайта материалов, и обязательно попросит вас предоставить таковые.

  Обратите внимание  

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

 

   Если вы вознамерились заниматься веб-проектами всерьез, то без изучения спецлитературы вам не обойтись. Первым делом штудируйте «Новую типографику» Яна Чихольда, которая подводит под типографику масштабную научную базу и обобщает принципы рационального использования шрифтовых решений. С 1928 года, когда книга впервые была опубликована, она не утратила актуальности. В пару к ней мы настоятельно рекомендуем фундаментальный труд «Основы стиля в типографике» Роберта Бринг*censored*ста.

   Не менее полезен «Справочник издателя и автора. Редакционно-издательское оформление издания» за авторством Аркадия Мильчина и Людмилы Чельцовой, рассказывающий о правилах оформления текста в практике советской и российской печати: из него вы узнаете, в частности , как грамотно составлять списки, расставлять знаки пунктуации при цитатах, сокращать слова, делать сноски и т. д. Да по большому счету не откуда-нибудь, а из «Справочника издателя и автора…» растут ноги у половины рекомендаций Артемия Лебедева, о которых мы говорим в конце главы.

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

 

   Итак, кавычки в русскоязычных текстах – либо исключительно «елочки» («»), либо «елочки» вместе с немец кими «лапками» („“). «Лапки» используются, когда внутри одних кавычек находятся другие, например: «Сайт „Студии Артемия Лебедева“ – кладезь информации для дизайнеров».

   Непосредственно в тексте используйте длинное тире (на десктопной клавиатуре при включенном NumLock набирается сочетанием Alt+0151, в HTML-коде обозначается как —), а не короткое или не дай бог два состыкованных дефиса. В свою очередь, короткое (Alt+0150 и – соответственно) находит применение в обозначении числовых диапазонов, дат и т. д.

   Ссылки должны быть подчеркнуты и выделены цветом. Правильно оформленная ссылка «реагирует» на действия пользователя: при наведении курсора на нее меняет цвет (например, красный вместо исходного голубого); если по ней совершили переход, принимает другой, третий цвет постоянно (по умолчанию сиреневый). Распространена рекомендация сопровождать URL дополнительными иконками, если по нажатии на них начнется скачивание файла или будет осущес твлен переход на RSS-канал, – в общем, такое действие, которое может оказаться неожиданностью для посетителя, гуляющего по страницам сайта. Ну а ссылки, ведущие на сторонние сайты, должны открываться в новом окне.

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

   Эти правила укоренились в Рунете главным образом благодаря «отцу российского дизайна» Артемию Лебедеву, чьи заслуги действительно трудно переоценить. Периодически вокруг его безапелляционных утверждений разгорается полемика, и по поводу оформления ссылок споров хватало. Однако в том, что касается типографики, советуем отталкиваться от постулата: «Лебедев прав почти всегда». Так что за прочими рекомендациями мы отсылаем вас к его «Ководству».

 

  Обратите вн имание  

   Не подчеркивайте текст на сайте, если он не является ссылкой.

 

   Для выверения части элементов типографики на сайте можно использовать онлайн-сервисы, такие как Typograf.ru (http://www.typograf.ru). Однако куда лучше будет, если вы сами научитесь разбираться по крайней мере в азах оформления текстов.

 

   Полезно знать

   «Рассылка SeoPult. Выпуск № 26: оптимизация сайта для “Яндекс. Картинок”»: http://seopult.ru/subscribe.html?id=26

   «Что такое Shema.org?» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1122752

   «Что такое микроформаты?» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1111670

   Основы веб-типографики: http://www.dejurka.ru/web-design/typography_basics/

   «Какой doctype выбрать…»: http://webcareer.ru/kakoj-doctype-vybrat.html

   Плагин д ля определения шрифтов на сайтах: http://chengyinliu.com/whatfont.html

   О разнице между пунктами, пикселями, процентами, em: http://habrahabr.ru/post/42151/

   Сопоставление шрифтов с засечками и без засечек: http://digilinux.ru/2013/05/13/sans-serif-legibility/

   Инструмент для проверки цветового контраста «шрифт – фон»: http://www.snook.ca/technical/colour_contrast/colour.html

   «Леттердей – проект о шрифтах, типографике, леттеринге и буквах»: http://letterday.ru

   «Руководство по обеспечению доступности веб-контента (WCAG) 2.0»: http://www.w3.org/Translations/WCAG20-ru/

   «Ководство» на сайте «Студии Артемия Лебедева»: http://www.artlebedev.ru/kovodstvo/sections/