Регулярно почитываю заморские блоги, частенько там пишут про некую типографику, или по простому как правильно и красиво подобрать шрифты. Я,  в большей степени прогер, про подбор шрифтов знал мало что, точнее совсем ничего — пару строк:

font-family:Arial{Verdana};
font-size:10px;

Если просили покрасивее, то добавлял

color:#cecece;

Если просили поизящнее:

text-align:justify;

На этом все познания заканчивались.

Как-то увидел пару примеров шрифтов, например такой:

или такой:

и заинтересовался.

Данные примеры весьма приятно читаются. Шрифты, кстати, не какие-нибудь супер-пупер приватные, обычные. Первый Arial, второй Georgia. Весьма заинтересовало, поэтому решил немного расширить свой кругозор, почитать про шрифты и их использование.

Итак, типографика.

Если верить определению, то типографика, это ничто иное, как примеры хорошей печати.

Definitions of typographica
noun

1. (plural) Examples of fine printing.

Есть сайты, на которых тексты читаются легко, например блог Dimax’а . А вот у Котика не очень хорошо, слишком мелко, читать длинные тексты крайне неудобно, глаза сбиваются. Он обещал в новой версии дизайна все исправить ).

Как же сделать, чтобы глаза не уставали?
Первое — это сам шрифт и стили для него. Второе — цвета самого шрифта и фона. Еще имеет значение система конечного пользователя. Шрифты под разными системами смотрятся по разному. В линуксе некоторые смотрятся довольно убого,

в то время как в винде весьма неплохо

но это уже зависит от конкретных установок той или иной системы.

Итак, начнем по порядку.

Основные свойства стилей для шрифтов

Немного лирики из типографии.
Сами шрифты различаются по засечкам: serif (с засечками) и sans-serif(без засечек). Также различают шрифты по пропорциям — пропорциональные и моноширинные.
Типографы создали свои словари, в которых описываются шрифты и их свойства. Основные характеристики шрифтов это:

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

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

font-family:
Определят гарнитуру шрифта. Довольно неплохо смотрится Verdana,
Georgia(классика наверно),
можно Arial,
Trebuchet. Данные шрифты относятся к „безопасны“, поскольку имеются во всех системах и отобразятся корректно.

font-style
Это свойство определяет начертание шрифта, обычное, курсивное или наклонное. Курсив и наклонный весьма похожи, но имеют разное предназначение. Курсив иммитирует рукописный шрифт, наклонный просто наклоняет буквы вправо.

font-weight
Насыщенность цвета. Градируется от 100 до 900. Нормальное значение — 400, 700 полужирный.
Также насыщенность может задаваться словами — lighter|bolder|bold|normal. Некоторые шрифты при увеличении могут становится жирными, для можно задать более низкую принудительную насыщенность.

letter-spacing
Регулирует ширину между символами. Бывает обычное(normal), в этом случае расстояние регулируется в зависимости от настроек системы. Бывает заданное. Задается расстояние в любых единицах измерения, пикселях (px), точках(pt), дюймах(in). Может быть как положительным так и отрицательным.

font-size:
Размер шрифта. Читабельность появляется после 12px на маленьких мониторах. На моем 19“ нормально читаются шрифты в 16 пикселей. Однако, тут палка о двух концах. То, что будет хорошо выглядеть на большом разрешении, будет огромным на маленьком и если наоборот, то слишком мелким на крупных разрешениях. Поэтому лучше либо прописывать в „нейтральных“ пределах 12-14px, либо прописывать относительно в em.

Не так уж много вебмастеров знают, что em пришло из области типографии. Оно означает букву M, самую широкую букву в наборе букв. Этой мерой задается ширина этой самой буквы, ну и всех остальных относительно ее. Так же есть понятие en, это ширина буквы N. Есть еще ex, нетрудно догадатся что означает оно ширину буквы X. Все это типографические термины. Печатники называют их nut (en) и molly (em), чтобы лучше различать среди шума принтеров какое расстояние задать.

line-height
Задает расстояние между строками или интерлиньяж. В отличие от предыдущего свойства не может быть отрицательным. Может быть задан в любых единицах измерения css, также может быть задан в процентах. Текущее значение равно 100%, 120% увеличит, 80% уменьшит.

word-spacing
Выставляет расстояние между словами. Задается любыми единицами измерения css, может быть отрицательным.

text-indent
Указывает отступ для абзаца для первой строки.

text-transform
Указывает, в каком регистре отображать символы. Capitalize — каждое слово в предложении будет с большой буквы, lowercase/uppercase соответственно в нижнем/верхнем регистре.

Цвета шрифта/фона

Пожалуй, самый распространенный вариант это шрифт #959595 на #FFFFFF. Смотрится весьма неплохо.
Также удачные сочетания:

background-color:#2D3034;
color:#E3E1B8;

background-color:#0094B2;
color:#FFFFFF;

background-color:#8D7E61;
color:#DFD3B6;

Практика

Подобрать уже готовые решения можно на Typechart . Возможность выбрать шрифт по семейству/размеру/написанию. Много готовых вариантов „безопасных шрифтов“. Также показывают как данный шрифт выглядит в win и в macos, линукс обделили…

font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: -0.1;
line-height: 1.4em;

font-family: Cambria, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

font-family: Cambria, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

Для продвинутого пользователя есть сервис TypeTester. Возможность самостоятельно настроить шрифт/цветовую гамму.

Для подбора цветов я пользовался сервисом Kuler от ADOBE. Много готовых решений, возможность самому поковырять настройки.

На почитать

статьи на ангельском

Основы использования шрифтов под веб

Шрифты для веб от DEV.OPERA

Сайт целиком посвящен типографии под веб

Примеры сайтов с хорошей типографией

8 шрифтов, которые следовало бы использовать

40 гладких шрифтов для вебдизайна

P.S.
Еще я узнал, что типографы люто ненавидят людей у которых не такие вот „“ кавычки.
А если кто поставил минус − вместо тире —, тот вообще будет расстрелян через повешенье.
Срочно исправляемся, качаем плагин здесь