Буквоедение

когда веб был совсем маленьким, он был на 100% текстовым. Прошло время, и теперь Интернет можно не только читать, как газету, но и слушать, как радио, смотреть, как телевизор, и просто просматривать, как картины в галерее. Тем не менее львиную долю информации на сайтах пользователь получает, читая тексты, и не важно, что это: анекдоты, новости или отрывки из диссертации. Поэтому, какой бы сайт вы ни рисовали, особое внимание уделите способу отображения текстов: шрифтам, цветам и размерам. Я просматриваю много макетов разных дизайнеров и часто замечаю, что форме уделяется значительно больше внимания, чем содержанию. Самый распространенный прием, который я не одобряю, - отношение к тексту, как к текстуре. Это значит буквально следующее: мелкий-мелкий текст ( 1 0 пунктов, не больше) и низкий контраст между фоном и текстом, например светло-серый текст на темно-сером фоне. Для продолжительного чтения контраст между фоном и текстом не должен быть стопроцентным, но и чрезмерно снижать его нельзя: глаза будут уставать в попытках вычленить буквы из фона. Уже знакомый вам Якоб Нильсен, наверное, плачет, когда видит подобные вещи. Если уж дизайнерам, обычно людям с хорошим зрением, размер текста 10 пунктов кажется мелким, то я представляю, каково тем, кто вынужден НОСИТЬ ОЧКИ! 1 36 Часть II. Ловкость рук Шрифт дпя основноrо текста Даже если вы никогда не делали из текста печитаемое серое пятно, все равно есть много прочих шрифтовых нюансов. Редкий веб-дизайнер от природы обладает шрифтовым чутьем ", но всему можно научиться. Wрифт заrоповков и акцидентных надnисей Что такое заголовки, я думаю, вы и так догадаетесь. Ну а акцидентной надписью применительно к веб-дизайну следует считать надпись, не являющуюся заголовком, но требующую увеличения размера и иногда использования особого шрифта для привлечения внимания зрителя. Это может быть елогаи компании или сайта, рекламная надпись или что-то в этом роде. Технические особенности Как осуществляется подбор шрифта для заголовков и акциденций? С технической точки зрения есть несколько нюансов. На информационных сайтах принято ценить время пользователя: сайт должен загружаться и открываться очень быстро и вообще хорошо отображаться без картинок, в любом браузере, на любом устройстве. Поэтому заголовки и акцидентные надписи традиционно выводятся с помощью стандартных шрифтов: так можно быть уверенным, что их увидят. На данный момент проблема сглаженных (с антиалиасингом) и несглаженных шрифтов на экране становится все менее актуальной: у редкого пользователя не установлено в настройках экрана сглаживание, поэтому иревращать текст (стандартным шрифтом) в картинку только ради сглаживания - бессмысленное действие. На всех остальных сайтах (на которых красота хоть немного, но важнее скорости) действуем следующим образом: если важно, чтобы заголовки и акцидентные надписи были выполнены нестандартными шрифтами да еще и с подобранным кернингом, их придется сохранять как отдельные картинки. Кернинг - это изменение расстояния между отдельными знаками в тексте с целью улучшения ритма в слове или фразе. В хорошем шрифте большинство кернинrовых пар, требующих коррекции, уже записано, но некоторые сочетания знаков все же требуют вмешательства дизайнера. Посмотрите на рис. 10.3: слева надпись набрана и оставлена как есть. Справа - та же надпись, но расстояния между знаками исправлены вручную. Вы можете заметить, что надпись справа выглядит гораздо лучше. Вот они - преимущества ручной работы по сравнению с результатами машинного труда! Управлять керниигам в тех надписях, которые отображаются на сайте, с помощью средств языка HTML невозможно. Но можно делать абсолютно все что угодно, с надписью, сохраненной в виде изображения в формате GIF, JPG или PNG. Однако в этом случае пользователь не сможет скопировать ваш текст, выделить в нем какую-либо строчку или увеличить размер шрифта. Именно поэтому не рекомендуется "загонять" в графику абсолютно все тексты. Большая часть тек Альтернативой картинке служит текст, оформленный средствами HTML и CSS. Как уже говорилось, в CSS можно задать практически любой шрифт, не забыв при этом загрузить его образец на свой сервер. Есть еще одна технология, позволяющая верстальщикам сэкономить время и при этом задать свой необычный шрифт для акцидентных надписей. Это сценарий на языке Javascript, который генерирует текст в виде картинки тем шрифтом, который вы задали. Вы пишете обычный текст, а на выходе получаете текст нужным вам шрифтом. Более того, если в окне браузера выделить эту область мышью, то текст, в отличие от простой картинки, будет доступен для копирования. Данная технология называется Cufon. Между прочим, она не единственная в своем роде, но именно ее мы изредка используем при разработке сайтов в качестве дополнительного модуля. Оказывается, это очень удобно: все тексты с определенными классами в таблице стилей автоматически приводятся к нужному нам виду. В то же время, если у пользователя в браузере загрузка графики отключена, он увидит обычный текст. Сайт проекта приведем ниже. http : / / cufon . shoqolate . com/genera t e / Разумеется, не стоит генерировать подобным образом основной текст - это слишком увеличит время загрузки страницы да и вообще не является разумным решением. А в целом проблема выбора "доступно или красиво" в наше время уже практически не стоит. Нужно просто знать, как это делать и когда применять. (Ответ на вопрос, что в каждом случае уместнее, внедрять шрифт с помощью стилей CSS либо генерировать картинку с помощью сценариев Javascript, определенно, знает опытный НТМL-кодер.) Декоративна• сторона вопроса Переходим к декоративным особенностям подбора шрифтов. Если допустить, что мы решили все технические проблемы, остается вопрос сугубо творческий. Для акциденции можно выбирать как наборные шрифты, т.е. предназначенные для набора 1 40 Часть II. Ловкость рук больших массивов текста, так и акцидентные - шрифты подчеркнуто декоративные, назначение которых состоит в том, чтобы украшать, создавать настроение, отображать какую-либо историческую эпоху или культурное явление. Проще всего, конечно, использовать наборные шрифты: они не такие яркие, как акцидентные, поэтому их проще сочетать один с другим. Но иногда сайт без красивого декоративного шрифта, использованного в качестве средства оформления, выглядит незаконченным, поэтому для подобных целей выбирается акцидентный шрифт. Первоначальную выборку с целью отбросить все ненужное можно провести, воспользовавшись несколькими правилами. Во-первьtх, не используйте или используйте минимально слишком популярные шрифты, такие как Comic Sans, Betina Script, Arbat, Ben Krush, Bolid и др. Этот список постоянно пополняется, и со временем у каждого профессионального дизайнера появляется свой набор "табуированных" шрифтов, непригодных для работы. На рис. 10.4 представлены образцы таких шрифтов. Наверняка вы их уже где-то видели и не раз. Вот именно своей популярностью эти шрифты и плохи: с их помощью уже невозможно создать что-то уникальное! Не выбрасывая все эти шрифты из каталога, я стараюсь обходиться без них и постоянно ищу что-то новое. Comic Sans MS Betina Script ArЬat Ben Krush Bolid Flash Во-вторьtх, и это гораздо важнее, каждому стилю и эпохе - свой шрифт. Небдизайнеру очень желательно знать хотя бы немного о самых популярных исторических и культурных стилях. Это классицизм, ренессанс, модерн, арт-деко, русский стиль, чиппендель, рустикальный, кубизм, авангард и т.д. Каждому из этих стилей соответствует своя группа шрифтов. Используя нужные шрифты, вы воссоздаете дух эпохи, определенную атмосферу на сайте, а выбирая наугад, рискуете попасть в неловкое положение. Вообще говоря, судя по нынешнему шрифтовому оформлению сайтов, можно сказать, что не каждого волнуют все эти историко-культурные моменты. Это незнание порождает, во-первых, неграмотный подбор шрифтов или, что случается чаще, Глава 1 0. Буквоедение 1 41 невероятную предсказуемость решений! Фаворитами в акциденции остаются группы рукописных шрифтов и всевозможные шрифты без засечек. Древняя Русь на большинстве сайтов показана с помощью шрифта Yermak или Izhitsa (шрифт, который стоило бы уже запретить), хотя на самом деле культура Древней Руси намного сложнее и разнообразнее, равно как и письмо, популярное в те времена. И в-третьих, акцидентных шрифтов на сайте должно быть максимум два-три (а лучше вообще один!), и они должны сочетаться. Нет ничего хуже, чем ярмарка шрифтов, когда один кричит громче другого "Посмотри на меня!" Если вы пока не знаете, можно ли сочетать один шрифт с другим, воспользуйтесь таким правилом: основной шрифт в нескольких начертаниях (обычное, полужирное, курсивное) плюс один декоративный. Здесь, пожалуй, не промахнешься. Несколько акцидентных шрифтов, используемых в одном дизайне, должны быть из одной эпохи и одного культурного слоя - в этом случае у них меньше шансов "подраться" за внимание зрителя. Пользуясь этими несложными правилами, вы не сделаете слишком грубых ошибок в дизайне. Но я все же рекомендую подробнее ознакомиться с историей шрифтов и культурных стилей, чтобы точно знать, как применять все это шрифтовое разнообразие. Наука о шрифтах очень интересна и позволяет по-новому взглянуть на то, как люди их используют и воспринимают. Эмиль Рудер и Юрий Гордон - вот авторы, написавшие довольно толковые книги о шрифтах. Вы также можете сначала прочитать мою книгу "Компьютерные шрифты на 100%': в которой о шрифтах рассказано просто и доступно, а затем переходить к более "тяжеловесной" литературе. Размер шрифта Желательно, чтобы для основного текста размер шрифта был не менее 12 п если это шрифт без засечек, такой как Tahoma, и не менее 14 пунктов, если с засечками, например Times New Roman. Пункт, точнее типографский ny1 это единица измерения кегля (т.е. размера) шрифта. В России 1 пункт ра1 0,3759 мм, а в США - 1/72 дюйма или 0,3528 мм (именно эта величина испол: при компьютерном наборе). Рисуя макет в Adobe Photoshop, вы устапавлива размеры в пунктах (points), и позднее НТМL-верстальщик должен придержив верстке выбранных вами размеров. И хотя пользователь при желании может чить шрифт в браузере, лучше изначально не мучить его мелкими буквами. Служебные, дополнительные, тексты, не предполагающие продолжительн ния, могут быть в угоду компактности набраны шрифтом размером 10- 1 2 П' Но мельче 10 выбирать не следует - это объективно слишком мелко. Межстрочное расстояние - расстояние от одной строки до другой - долж1 на 2-4 пункта больше размера шрифта. Иначе говоря, для шрифта размером ктов это 14- 1 6 пунктов, а 18 пунктов будет многовато: строки покажутся 01 ными одна от другой. Для крупных заголовков, например 24 пункта, межст расстояние может быть больше, скажем 28-32 пункта. В целом этот выбор оста совести дизайнера. Буквы не должны слипаться или висеть вдалеке одна от др Размер шрифта для заголовков и акциденций жестко не регламентируется. но, что заголовок должен выделяться размером шрифта относительно основнста, а если вы используете несколько уровней заголовков, размер их шрифта , меняться от большего к меньшему. Набор и верстка текстов Набор и верстка текстов на сайте - дело редактора или контент-менедже веб-дизайнера. Но это уже когда дизайн-макет превратился в полноценный с чистой совестью сдан заказчику. А на стадии макета хороший дизайнер сам ел только за подбором красивых картинок, но и за правильиостью набора и верс1 стов. Для начала разберемся в терминах: набор - это когда вы стучите пальu клавиатуре и в результате этих действий получаете некий массив текста. Вер это когда полученный текст вы по правилам (и без правил) располагаете на 1 сти: организуете колонки, абзацы и т.д. Набор текстов ДJIR веба Найдите-ка на клавиатуре символы © ® или длинное тире "-". Не нашJ в этом-то и заключается главная проблема с набором текста. На обычной кла нет многих важных и полезных символов, а где их взять, может догадаться далеко не каждый! Я уже не говорю о знаке фунта (f.), дробях (IA, например) и о многом другом. Правила "хорошего набора текста" очень обширны, и об этом вам с удовольствием поведает профессиональный верстальщик газеты - он знает их наизусть, поскольку сталкивается с текстом ежедневно. Правила разработаны не просто так, а с целью, во-первых, улучшить читабельмость текста, во-вторых, улучшить его красоту и, в-третьих, обеспечить точное его восприятие. Я не буду нагружать вас всеми правилами, примятыми в традиционном газетном наборе, но есть вещи, которые делают текст аккуратным и придают вашему дизайну законченный и более профессиональный вид. Самое главное - это специальные символы, знаки, которых вы не найдете на обычной клавиатуре, но которые есть в большинстве профессиональных шрифтов (как в анекдоте о суслике: "Видишь суслика? Нет? А он есть Где брать спецсимволы? Самый простой путь, если вы работаете в Windows (а я на 90% уверена, что именно Windows - ваша основная операционная система), - воспользоваться таблицей символов. Вы можете открыть это приложекие с помощью меню Пуск: Пуск