Скидка на веб-шрифты!

[idakuz]

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


В этой богато иллюстрированной книжке есть один раздел, где иллюстраций сравнительно мало, а текста, наоборот, много. Этот раздел написан нами и посвящен веб-шрифтам.
Всякий, кто прочитает этот раздел, может испытать соблазн купить пару-тройку веб-шрифтов и попробовать применить их на практике.
Чтобы сделать этот процесс не только полезным, но и приятным, мы решили устроить очередную распродажу. А чтобы об этом деле узнало как можно больше людей, распродажа будет двухуровневой - со скидками 90% и 50%.
Всем, кто сделает перепост данной публикации в своем ФБ, ЖЖ или Google+’е, мы пришлем промо-код, по которому можно будет купить веб-шрифты со скидкой 90%. Промо-код будет действовать на одну покупку на сумму, не превышающую $500 без учета скидки. Покупать можно будет только с помощью кредитной карточки. Эта скидка будет действовать до понедельника 20 мая. Надо успеть прислать нам на адрес websales@paratype.com ссылку на ваш перепост до полуночи воскресенья, чтобы у нас было время в понедельник с утра прислать вам промо-код, а у вас осталось время до вечера понедельника на то, чтобы воспользоваться этим кодом и, соответственно, скидкой.
Для остальных граждан, т.е. граждан без промо-кода, скидка будет составлять 50%, скидочный период продлится до конца мая, и покупка не будет ограничена какой-то суммой.

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



КАК ПОДКЛЮЧИТЬ ШРИФТЫ К САЙТУ

Веб-шрифты поставляются комплектом, состоящим из нескольких форматов. Это нужно для совместимости с разными версиями браузеров. Комплект веб-шрифтов включает четыре формата: EOT, WOFF, SVG и TTF. Вместе с шрифтовыми файлами в комплект входит файл DEMO.HTML с примером использования шрифта, файл CSS и файлы с текстами лицензий. Шрифты надо разместить на вашем веб-сервере, например, там где лежат CSS.

Способ подключения шрифтов к сайту можно посмотреть в файлах DEMO.HTML и CSS.

ТИПЫ ВЕБ-ЛИЦЕНЗИЙ

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

Это наше лицензионное соглашение, регулирующее использование веб-шрифтов.

СКОЛЬКО СТОЯТ ВЕБ-ШРИФТЫ

Цены на веб-шрифты у нас одни из самых низких.
Вот для примера такой условный запрос: шрифт Adonis Regular, 3 года использования, 55 тыс. просмотров в месяц (т.е. примерно 2 млн. просмотров за 3 года), один домен.

fonts.com - $2400
typekit.com - $150
webink.com - $150
fontshop.com - $100
myfonts.com- $60
ywft.com - $60
fonts.ru - $60

Разница в цене удивительная!

ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К ВЕБ-ШРИФТАМ

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




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

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


        

В Windows эта технология получила названия ClearType. В классическом варианте (GDI) мы имеем субпиксельное выравнивание по горизонтали и никакого сглаживания по вертикали. В Windows 7 появилась новая графическая подсистема DirectWrite, которая добавила в ClearType вертикальное сглаживание за счет градаций серого и субпиксельное позиционирование знаков в строке. Это привело к значительно более гладким контурам на скруглениях и диагоналях, а также более равномерному спейсингу. Пока только два браузера используют возможности DirectWrite: Internet Explorer, начиная с версии 9, и Firefox, начиная с версии 16.

Мас OS и iOS используют систему Quartz, приложения Адобе используют систему CoolType. Обе эти системы работают примерно так же, как и ClearType. Основное отличие этих технологий касается обработки хинтов, о которых речь пойдет ниже. Попросту говоря, Quartz и CoolType вообще игнорируют хинты. В итоге шрифты, на первый взгляд, выглядят вроде бы и неплохо, но, если приглядеться, то не очень-то и хорошо. Границы всех символов оказываются здесь равномерно размазаны и размыты. Преимущество такой технологии лишь в том, что шрифты формата PostScript (OTF) и TrueType (TTF) выглядят одинаково, но это неактуально для веб-шрифтов, так как они обычно строятся из TrueType’а.

В ногу с ClearType пытается идти FreeType, но Microsoft не очень любит публиковать свою документацию вовремя, и FreeType традиционно отстает на один шаг.

Хинты
Слово hint в английском означает «подсказка». В нашем контексте под хинтами понимают специальные инструкции, которые записываются в шрифт и управляют процессом растеризации. Одна часть инструкций относится к шрифту в целом. Другая - к знаку вне зависимости от его пиксельного размера. А третья - наибольшая и самая изощренная часть - к растеризации знака на определенном размере.

Последний тип хинтов имеет специальное название - delta hints. Расстановка «дельт» плохо поддается автоматизации и к тому же довольно трудоемка. Стандартный шрифт, поддерживающий европейские языки и кириллицу, включает порядка 400 знаков. Обычно дельта-хинты применяются к кеглям в диапазоне от 7 до 50 пунктов. Умножив эти значения, мы обнаружим, что при хинтовке одного начертания шрифта нужно просмотреть и расставить дельты примерно в 20 тысячах знаков.

В идеале полноценно обработанный шрифт имеет несколько групп хинтов для разных режимов рендеринга. Это важно, так как чаще всего неизвестно, какая именно комбинация «система-браузер» используется посетителем сайта. Для подавляющего большинства придирчивых пользователей достаточно, если в шрифте будет 3 комплекта хинтов: для серого сглаживания, которое используется по умолчанию в Windows XP, для ClearType GDI и для ClearType DirectWrite. При этом шрифт должен уметь определить, какая технология рендеринга используется, чтобы подставить нужный комплект хинтов.

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

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

Фичи
Feature - «функциональная возможность». Мы не будем постоянно повторять это громоздкое словосочетание, и, пока не принят закон о чистоте русского языка, станем называть это коротко и ясно - «фича». С появлением формата OpenType появилась возможность записывать в шрифт правила его применения при различных обстоятельствах. Например, подставлять лигатуры взамен комбинации некоторых знаков или использовать разные формы глифов, в зависимости от положения буквы в слове. Не все браузеры поддерживают фичи, а те которые поддерживают, делают это пока в очень ограниченном объеме.

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

РЕЗЮМЕ

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

Удачных покупок!