Александр Тарбеев

(Опубликовано в журнале «Connect», №1–2, М., 1997).

ИНТЕРНЕТ—С КОЛОКОЛЬНИ ШРИФТОВОГО ДИЗАЙНЕРА

Некогда думать—работать надо!
Народная мудрость.

«Сегодня типографика окружает нас—в вывесках, архитектуре, в книгах и журналах и в телевидении. Короче, мы встречаем типографику повсюду, где бы и когда бы ни возникала нужда в графической передаче информации».
(Аарон Бёрнс. Типографика. Цит. по Э. Рудер. Типографика. М., Книга, 1982, стр. 279)

В то время, когда Аарон Бёрнс писал это, мало кто знал слово Интернет, да и существовало ли оно вообще? Сегодня возникла нужда в передаче графической информации через глобальную компьютерную сеть и типографика появилась на Интернете, поскольку типографика, согласно определению Стэнли Моррисона, «...искусство подобающего расположения наборного материала сообразно конкретному назначению».
Для издателя, графического дизайнера и типографа возникли новый инструмент и новое поле деятельности. О том, что дают новые технологии Интернет для издателя, написано и не раз. Ну, например, в статье Константина Крайна «Книжники на перепутье» http://www.piter-press.ru/koi/int-wrld/no_3/text/mi_n3_5.html. Работа типографа и дизайнера, в силу ряда причин, интересны автору больше.

Сегодня, когда у дизайнера, связанного с полиграфией, исчезают последние остатки боязни компьютера, работа по проектированию Интернет сайта, (от англ. site 1. место, участок; 2. местоположение, местонахождение. Прошу прощения за использование кальки с английского. Читатель, если ты знаешь, как назвать это по-русски, поделись! Узел не предлагать!) на первый взгляд не представляет собой ничего нового, непривычного. Используются привычные инструменты подготовки печатного издания, с той лишь разницей, что последние этапы отсутствуют. Отсутствует этап изготовления печатных форм, печать и послепечатные процессы.
Однако есть неожиданные проблемы и особенности технологии публикации на Интернете. Остановлюсь на тех, которые мне кажутся основными.

Полиграфия

Интернет

Формат издания

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

Обусловлен размерами и разрешающей способностью мониторов, применяемых в настоящее время. Формат не задаётся дизайнером, а определяется возможностями оборудования у читателя.

Способ печати

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

Теоретически может быть любым, если издание вообще будет кем-нибудь напечатано, а не только прочитано с экрана. Как и на чём печатать, выбирает читатель.

Количество красок

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

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

Шрифт

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

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

Иллюстрации

Традиционные статические иллюстрации.

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

«Боже мой!,—скажете вы,—где же здесь дизайн? Кругом произвол читателя!» И будете правы. По сей день дружный хор Web-дизайнеров жалуется на скудость функций вёрстки, предоставляемых языком HTML (Hyper Text Markup Language). И неправы, поскольку, с одной стороны, HTML стремительно развивается (я думаю, скоро возможности вёрстки на экране будут такими же как и на бумаге), а с другой—и существующими инструментами можно выполнить задачу дизайнера: создать структуру, хорошо работающую в заданных обстоятельствах.
Так, что же делать с форматом переменных размеров? Если автобус не вписывается в поворот, можно спроектировать автобус покороче или сделать его изгибающимся. В нашем случае можно попросить читателя установить ширину окна браузера равной ширине выбранного вами элемента композиции (заголовка, линейки и т.п.), пообещав изумительную по красоте страницу. Можно поместить всё содержание вашей страницы в таблицу фиксированной ширины. В обоих случаях у читателей с большими мониторами либо не будет использоваться часть площади экрана, либо возникнут поля неконтролируемой величины. Тем не менее вы сможете избежать появления слишком длинных и неудобочитаемых строк. Хорошим вариантом может оказаться применение фреймов. С их помощью вы можете разбить сложную композицию страницы на несколько простых частей, изменение размера которых не будет существенно влиять на общую композицию страницы.

Что делать с размерами иллюстрационных файлов? Нещадно уменьшать. Чем меньше размер файлов (при приемлемом качестве изображения), тем больше вероятность того, что читатель дождётся «перекачки» вашей страницы и прочтёт её.
Основными форматами для передачи изображений через Интернет являются GIF и JPEG. Не вдаваясь в подробности, замечу лишь, что GIF лучше сжимает изображения с большим количеством ровных заливок и позволяет получить небольшие файлы за счёт уменьшения количества цветов, JPEG лучше обрабатывает изображения с большим количеством цветовых переходов. Сделайте несколько вариантов иллюстрации и выберите наименьший файл, который устраивает вас по качеству воспроизведения.

Сохраняйте файл без preview, это также поможет вам сократить размер файла, хотя и несколько осложнит жизнь при редактировании сайта. И последнее замечание. Дайте возможность читателю самому решить, хочет ли он получить более подробные и крупные варианты ваших иллюстраций, смотреть ваше видео и дожидаться перекачки звука.
Более подробно о подготовке иллюстраций для Интернет сайта вы можете узнать на адресах: http://webreference.com—The webmaster’s reference library, http://www.webreview.com—Web Review. А на сайте с адресом http://www.raspberryhill.com/gifwizard.html (GIF Wizard from Raspberry Hill Publishing Inc.) вам помогут сделать файл минимального размера.


Вверху—1 бит на пиксел. Внизу—использованы оттенки серого для сглаживания краевых эффектов.

Так выглядит на экране гарнитура Ньютон с использованием оттенков серого.

Прагматика с использованием оттенков серого.

ITC Официна Санс с использованием оттенков серого.

ITC Официна Санс—1 бит на пиксел.

1 бит на пиксел, с оттенками серого и шрифт без хинтов.

MS Вердана с серым.

MS Вердана1—бит на пиксел.

Выбор шрифта. Ночной кошмар. Со времён появления настольных издательских систем, исчезновения Советского Союза, демократизировавших издательскую деятельность, необходимость обдуманного, сознательного применения шрифта приходилось объяснять всего лишь нескольким тысячам издателей. Теперь, после появления российского Интернета повторять это придётся миллионам.
Как бы ни хотелось дизайнеру, чтобы посетитель сайта увидел выбранную им (дизайнером) гарнитуру... Увы, на сегодняшний день желание это почти неосуществимо.
Но, что же можно предпринять?

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

<FONT FACE="ИмяШрифта1, ИмяШрифта2, ИмяШрифта3">
...текст...
</FONT>

Можно заголовки выполнять в виде GIF-иллюстраций, не забывая, как важен в этом случае antialiasing. Посмотрите на иллюстрацию с надписью МЕМОРИАЛ. Обратите внимание на ступеньки, возникающие на диагональных и округлых элементах на верхнем изображении.
Во втором примере для сглаживания краевых дефектов применены несколько оттенков серого. Первый вариант взят с Интернета, второй подготовлен автором с использованием 8 градаций серого. Как это ни парадоксально—размер второго файла получился меньшим.

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

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

Какой шрифт легче читается с экрана?
Сегодняшний экран—обычное выводное устройство с низкой разрешающей способностью. Поэтому всё, что справедливо при выборе шрифта для печати на принтерах в мелких кеглях, справедливо и применительно к экрану.
Как вы видите, при разрешающей способности экрана 72 точки на дюйм и кегле шрифта 12 пунктов мелкие детали формы знака просто не воспроизводятся. Поэтому желательно, чтобы рисунок шрифта не содержал мелких и тонких элементов. То есть выбирать необходимо скорее из малоконтрастных, открытых гротесков с большим размером очка строчных знаков. Слегка помочь делу может всё то же использование оттенков серого. Если вы установите на своей на своей машине ATM 4.0, он будет генерировать экранные greyscale шрифты на лету. Учтите только, что шрифт должен быть хорошо отхинтован, иначе вместо среднего варианта буквы а вы получите правый. Глазами такие знаки будут восприниматься как несфокусированные. Ваша зрительная система будет безуспешно пытаться настроить фокусировку и глаза ваши довольно быстро устанут.

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

У фирмы Microsoft сейчас известно 3 таких экранных гарнитуры, каждая в 4-х начертаниях TrueType: Georgia, Verdana, Trebuchet. Ими можно пользоваться на своих компьютерах, но нельзя распространять со своими программами.

Из этих 3-х шрифтов Georgia — антиква, то есть контрастный шрифт с засечками, а Verdana и Trebuchet — открытые (гуманистические) гротески. Мне кажется лучшим из них Verdana. Это и не удивительно, поскольку ее спроектировал один из лучших шрифтовых дизайнеров современности Мэтью Картер (Matthew Carter). Он автор известных шрифтов ITC Galliard, Snell Roundhand, Shelley, Bell Centennial, ITC Charter и многих других. Кроме того, он один из основателей фирм Bitstream и Carter & Cone, председатель секции шрифтовых дизайнеров Международной Типографической Ассоциации (ATypI), обладатель множества наград и почетных званий. Шрифты Картера всегда были на переднем крае современной технологии, и вместе с тем они удивительно сильные по форме. Его ITC Galliard был чуть не первым шрифтом, разработанным с помощью компьютера, Bell Centennial предназначался для телефонного справочника бесплатно , Olympian для газетного набора, ITC Charter для печати с низким разрешением, и каждый из них в своем роде шедевр.

Так и сейчас, взявшись за создание экранного шрифта, Картер наряду с решением утилитарных задач достигает замечательных художественых результатов. Для того, чтобы Verdana хорошо читалась на экране, дизайнер нашел для каждого знака шрифта рисунок, который сохраняет читаемость в любом из 7 применяемых размеров. Насыщенность жирных начертаний и наклон курсивных специально подобраны с учетом низкого разрешения и хорошо дополняют основное начертание. Шрифт вручную отхинтован ведущим экспертом фирмы Monotype Томасом Рикнером (Thomas Rickner), его рисунок выдерживает тяжелые условия работы.
Между прочим, Картер готовит русскую версию своего шрифта Verdana, так что мы, наверное, скоро сможем ей воспользоваться.

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

10 лучших шрифтовых сайтов на Интернете
  1. Фирма Adobe: www.adobe.com
  2. David Carson: www.wysiwyg.de/carson/index.html
  3. Студия Emigre: www.emigre.com
  4. FontNet: www.type.co.uk
  5. Фирма FontShop: www.fontshop.de
  6. Luc(as) de Groot: www.is.in-berlin.de/~luc
  7. Max Kisman: www.vpro.nl/www/arteria/maxk/maxk-home.html
  8. Фирма LettError: www.boulevards.com/blvds/alleys/letterror/index.html
  9. Phil’s Fonts: www.philsfonts.com
  10. Фирма Jack Yan & Associates: www.fashion.net/jya