Сглаживание веб-шрифтов на CSS

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

Есть еще один фактор – сглаживание, с которым дружат не все браузеры (в том числе и Chrome) при использовании нестандартных шрифтов, хотя, и стандартные тоже не все сглаживают. Получается, что шрифт становится угловатым, а его границы резкими и это не очень комфортно для чтения.

В случае, если нужно использовать сторонний шрифт, например, с «Google.Fonts», то наиболее надежный метод – это создание полного набора форматов шрифта, включая SVG. Можно использовать его, например, только для заголовков.

Если шрифт стандартный, то можно сразу перейти к CSS-методу, расположенному ниже, так как он очень прост и понятен.

Основные CSS-методы, которыми можно сделать шрифт более читаемым

CSS метод

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

.title {
  text-shadow: -1px -1px 1px rgba(255,255,255, 0.2), 
                1px 1px 1px rgba(255,255,255, 0.2), 
                1px 1px 1px rgba(0,0,0, 0.7);
} 

CSS3 метод

При решении проблемы сглаживания шрифтов в движке «Сhromium», на Google.Code один программист предложил быстрое решение на CSS3. Это оказалось весьма рационально, ведь можно отказаться от SVG и сторонних веб-шрифтов шрифтов, которые весят порядка 200~500 Кб и требуют дополнительного времени загрузки.

Данный код нужно добавить в css-файл:

body {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

* этот хинт используется для всех заголовков данного сайта

Данный способ имеет пару недостатков:

Проблему с кернингом можно решить примерно таким css-кодом:

body {
  font-size: 125%;
  letter-spacing: 0.05em;
  line-height: 1.3em;
}

body > * {
  font-size: 85%;
  line-height: 1.3em;
}

* разумеется, данные параметры нужно слегка настроить под особенности сайта

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

SVG метод

Потребуется генератор веб-шрифтов fontsquirrel.com/tools/webfont-generator

Нужно загрузить нужный шрифт в формате «.otf или .ttf» и выставить данные настройки:

Согласиться с требованиями и нажать «DOWNLOAD YOUR KIT»

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

CSS-код для подключения шрифтов, который можно вынести в отдельный файл:

@font-face {
  font-family: 'Open Sans'; 
  src: url('/font/opensans.eot');
  src: url('/font/opensans.eot?#iefix') format('embedded-opentype'),
  url('/font/opensans.woff') format('woff'),
  url('/font/opensans.ttf') format('truetype'),
  url('/font/opensans.svg#OpenSansRegular') format('svg');
  font-style: normal;
  font-weight: normal;
}

* в данном случае все шрифты Open Sans лежат в папке «font» в корне сайта

Пару простых хинтов:

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