Многие дизайнеры знают, как бывает сложно угодить всем требованиям клиента при вёрстке сайтов. К одному дизайнеру обратились с заказом «сделать так же, как у Apple», но с использованием собственного текста, цветовой гаммы и изображений. Естественно, результат сильно отличался от apple.com, но был весьма неплох. Заказчику постоянно что-то не нравилось, причём он сам не мог выразить что конкретно его не устраивает и что нужно исправить. Макет можно переделывать до бесконечности, в надежде, что клиент наконец то согласится. Но может есть возможность решить проблему каким-то другим способом с меньшими потерями времени и сил? Как же лучше поступить дизайнеру в таком случае, как можно решить возникшую проблему и, в целом, как можно охарактеризовать ситуацию в современной веб-типографике? Об этом будет подробно рассказано в статье ниже.
Сразу сложно догадаться о причине возникновения разногласий дизайнера с клиентом. Оказывается, основные проблемы кроются в использовании для вёрстки сайта стандартных шрифтов. Вряд ли кто-то вообще об этом задумывается.
Для того, чтобы понять причины, необходимо проанализировать всю ситуацию с самого начала.
Когда веб-типографика только появилась, язык html не позволял изменять тип гарнитуры, размер же шрифта можно было задавать только лишь относительно какой либо средней величины в нескольких градациях, т.е. только больше или только меньше.
Тогда в качестве стандартного шрифта широко использовался шрифт Times с засечками, причём довольного крупного размера. Это делалось для того, чтобы на мониторах с невысоким разрешением и сильными искажениями из-за выпуклости экрана, которые чаще всего использовались в то время, текст легко мог быть прочитан.
Шрифт Times был реализован по разному в различных операционных системах.
Версию шрифта компании Microsoft, которая носила название Times New Roman, можно отнести к одной из худших, так как текст маленького размера ( теги <font size=»2″> и тем более <font size=»1″>) было практически невозможно прочитать. Отсутствие алгоритма экранного сглаживания приводило к слипанию засечек на буквах, весь текст превращался в сплошную неразличимую кашу, где невозможно что-либо прочитать и понять.
Но шрифт выглядел неудачно не только в маленьком размере. Текст большого размера (<font size=»5″> и выше) выглядел некрасиво и угловато, курсив и жирное начертание были абсолютно лишены изящества и смотрелись топорно и резко.
В операционных системах Unix и MacOS дела со шрифтом Times обстояли немного получше. Однако, самый лучший вариант исполнения шрифта с засечками Times удался в операционной системе BeOS, которая в данный момент уже давно заброшена. Скорее всего такой успех можно объяснить наличием функции сглаживания шрифта Times.
Браузеры тех лет позволяли устанавливать в качестве шрифта по умолчанию любую имеющуюся и установленную в системе гарнитуру. В операционной системе Windows помимо шрифта Times пользователь мог выбрать гротесковый шрифт Arial (не самая удачная переделка легендарной Гельветики) , моноширинный Courier и полурукописно-насмешливый ComicSans. Шрифт Courier был разработан Ховардом Кеттлером в 1955 году и стал самым привлекательным и удачным вариантом отображения программного кода. Стоит отметить, что этот шрифт до сих пор широко используется по умолчанию во многих современных средах программирования. Шрифт класса нео-гротеск Arial, созданный в 1982 году оказался немногим лучше Times New Roman. В операционной системе Unix использовался шрифт Helvetica (близкий к оригинальному шрифту от Linotype), а на MacOS — гарнитура Geneva.
Язык Html стремительно развивался, и к 1995 году появилась возможность помимо размера задавать конкретную гарнитуру, используя <font face=»»>. Это привело к массовому увлечению насильственным использованием конкретного шрифта.
Дизайнеры стали писать что-то аналогичное <font face=»ZapfChancery»> и довольно быстро обнаружили, что вся созданная ими красота отображается только на их собственных персональных компьютерах, посетители же сайта видят совсем всё по-другому. При отсутствии указанного шрифта используется гарнитура по умолчанию, и тщательно сделанный сайт представляет собой кучу отдельных блоков.
Для решения этой проблемы в спецификацию HTML были внесены исправления, появилась возможность указывать одновременно несколько шрифтов и на случай, если требуемого шрифта не окажется, объединяющее семейство. Чтобы на разных компьютерах текст выглядел одинаково, несмотря на то, что требуемого шрифта по каким-то причинам нет в наличии, можно было написать так: <font face=»Arial, Helvetica, Geneva; sans-serif»>. Тогда браузер использует любой шрифт из тройки Arial, Helvetica и Geneva либо назначенного по умолчанию семейства гротесков (sans-serif). Семейств предполагалось 7: monospaced (моноширинные шрифты для отображения программного кода, например: Courier), serif (шрифты с засечками, например: Times), sans-serif (гротескные шрифты без засечек, например: Arial, Geneva), cursive (рукописные шрифты, например: ZapfChancery), fantasy (декоративные шрифты, например: ComicSans), symbol (шрифты для определённых символов, например: ZapfDingbats) и класс other (все остальные шрифты, например: техногенные, гранжевые, готические и т.п.). Семейства можно было настроить для конкретных случаев. К примеру, вместо Courier назначить MonoCondensed, и тогда всё, что должно отображаться моноширинным шрифтом, будет выполнено с помощью шрифта MonoCondensed.
C развитием таблиц стилей в HTML 4.0 появилась возможность указывать размер шрифта и в относительных, и в абсолютных значениях с помощью единиц измерения. Единица px (пиксель) не давала никаких альтернативных вариантов — то есть как написал дизайнер, так и будет выглядеть текст. А зависящие от разрешения экрана и от других факторов величины, такие, как, pt (пункты), em (эм) и %, предполагали некоторые манипуляции с размером текстов.
К концу 90-х годов стала модной пиксельная графика и нечитаемые маленькие размеры шрифтов. Часто можно было встретить такую конструкцию: <font face=»Arial, Helvetica; sans-serif» style=»font-size: 9px;»>. И как бы читателю не хотелось увеличить в браузере едва различимый шрифт, ему всё равно приходилось смириться. Если на мониторах с разрешением 800 на 600 ещё можно было хоть что-то рассмотреть, то на современных экранах с разрешениями от 1024 на 768 задача становилась крайне сложной.
Возможно именно поэтому сайты с плохой графикой и минимальными размерами шрифтов, которые были популярны на рубеже веков, сейчас не представляют никакого интереса и можно сказать доживают свои последние дни.
В 1996 году специально для операционной системы Windows были разработаны шрифты Verdana, Georgia и Tahoma. Постепенно они вошли и во все остальные операционные системы. Этому скорее всего способствовала популярность новых шрифтов среди веб-девелоперов. Для создания модных сайтов начала XX века использовались гарнитуры Tahoma или Verdana. Использование гарнитуры Arial стало старомодным и не приветствовалось. Действительно, Tahoma и Verdana в некрупных кеглях (даже до 9 пикселей) читались гораздо лучше, чем Arial. 
Но в большом размере Arial всё равно выигрывал и смотрелся лучше. Шрифт Verdana не имеет засечек, а размер букв увеличены за счёт уменьшения интервала между строками.Verdana — шрифт самый безопасный для зрения человека, при чтении текстов, выполненных этим шрифтом глазные мышцы напрягаются меньше.
В последствии шрифты Verdana и Tahoma подверглись сильной обоснованной критике дизайнерами. Был вынесен вердикт, что у шрифта Verdana неприятный курсив и тяжеловесное жирное написание, также в этом шрифте некорректно отображались некоторые знаки и символы. У шрифта Tahomа написания курсивом не было вообще, буквы часто слипались вместе , что делало чтение неудобным и практически невозможным, а при крупном размере шрифта жирное начертание выглядело слишком тонким и мало отличалось от простого написания.
Стоит отметить, что на распечатках и шрифт Tahoma и Verdana смотрелись не идеально. Не всем нравится также форма используемых в шрифте Verdana кавычек. Однако, до сих пор Verdana и Tahoma являются одними из самых популярных и часто используемых шрифтов.
Гарнитура Georgia была разработана по заказу компании Microsoft дизайнером с сорокалетним стажем Мэттью Картером в 1993 году. Она оказалась особенно удачной и успешно заменила элементарный Times New Roman. Шрифт Georgia выглядел округло и более органично на экране монитора, курсив и жирное начертание были реализованы очень удачно. Сейчас, если необходимо создать классический сайт в духе вёрстки серьёзных деловых изданий, чаще всего используется как раз гарнитура Georgia. Georgia одинаково хорошо смотрится и в крупных и в мелких кеглях, на мониторах с любым разрешением, от низкого до очень высокого, как без использования сглаживания, так и с его использованием.
Но помимо явных достоинств шрифт имеет и недостатки. Одним из них можно назвать «прыгающую» манеру отображения цифр (некоторые цифры отображаются в одном размере с буквами, другие же заметно выступают вверх или вниз от базовой линии). Кому это может казаться стильным и интересным, но чаще всего этот недостаток порождает трудности восприятия напечатанной информации. Шрифт Georgia плохо смотрится при написании светлым по тёмному фону. Из-за своих округлых плавных форм шрифт Georgia менее компактен, чем тот же Times New Roman, на странице, набранной шрифтом Georgia помещается гораздо меньший объём информации, что не выгодно для различных интернет-ресурсов и интернет-магазинов, где важно компактное и наиболее полное размещение информации.
В настоящее время шрифт Georgia пользуется повышенной популярностью в различных блогах и социальных сетях, так как здесь, в первую очередь, важны удобство чтения, аккуратность и простота (чтобы не отвлекать читателя от более полезного содержимого статьи в виде фотографий и картинок), а не количество информации и её как можно более компактное размещение.
С дальнейшим развитием HTML появлялись всё новые и новые возможности для вёрстки сайтов без привлечения громоздких структур и жёстких определений размера шрифта. При этом оставалась возможность гибкого управления на странице. Стереотип о том, что для чтения с экрана компьютера подходят только шрифты без засечек со временем потерпел крах. В это время в журналах и газетах в качестве гарнитур используются исключительно антиквенные гарнитуры, например, Times. Здесь важную роль играют два фактора, о которых будет рассказано в продолжении статьи. Также в продолжении можно будет узнать о некоторых хитростях и тонкостях веб-типографики.
