Сайт вебмастера

Как быстро определить «правильные» шрифты?

22-02-2016Время чтения ~ 5 мин.Блог 13508

Раньше на сайтах использовались только т.н. безопасные шрифты — это Arial, Verdana, Times New Roman, то есть те, которые гарантировано установлены у пользователей. С появлением Google Fonts и woff-формата, ситуация кардинально изменилась — появилась возможность загружать произвольный шрифт для сайта.

Наиболее популярны: Open Sans, Roboto, Ubuntu и другие. У этих шрифтов, помимо начертания, есть еще и «адаптация к экранному сглаживанию». Именно поэтому на мониторе с включенным сглаживанием привычный Arial проигрывает Open Sans, хотя их начертания и похожи.

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

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

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

В типографике существует понятие гарнитура. Многие его путают с понятием шрифт. Так вот, гарнитура — это набор шрифтов. Например гарнитура Arial состоит из набора шрифтов обычного начертания (normal), курсив (italic), жирный (bold) и жирный курсив (bold italic).

Обычно, вместо «жирный» используется слово «полужирный». Если говорить строго, то «жирность» — это степень насыщенности. Скажем normal — это 400, bold — это 700. Браузеры не могут правильно определять все градации, поэтому используется только bold, который по значению всё-таки ближе к «полужирности», поскольку «совсем жирный» будет иметь значение 900.

Иногда в гарнитуру включают и другие начертания, например сейчас встречается ultra bold и light.

В печатной полиграфии это очень активно используется, а вот для вебсайтов приходится довольствоваться ограничениями HTML и CSS. Нам доступны normal, bold (тэги B и STRONG), italic (тэги I и EM) и комбинации bold italic.

Когда мы указываем курсив, браузер использует текущую гарнитуру и ищет наличие его курсивного шрифта. Это происходит автоматически. Тоже самое происходит и с жирным начертанием. Если же такого шрифта нет (bold или italic), то браузер попробует сымитировать их: для курсива текст наклоняется, а для жирного немного увеличивается по горизонтали.

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

С шрифтами для веба немного сложней. Как правило для сайта устанавливается только одна гарнитура. (Реже — еще одна для заголовков.) И поэтому гарнитура должна содержать как минимум основные начертания, включая курсив и жирный.

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

С курсивом посложней. Часто создатели шрифтов упрощают себе жизнь и вместо курсива используют наклон. Но наклонный шрифт — это далеко не курсив. По своему смыслу курсив — это текст, как бы написанный от руки («беглый почерк»).

Ради интереса, возьмите бумагу и напишите фразу

В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!

А теперь сравните начертание букв на экране и своё. Обратите внимание, что ряд букв имеет разное начертание.

У меня сайт использует Open Sans, в котором используется полноценный курсив:

В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!

Многие буквы по начертанию совпали с тем, что вы написали на бумаге. Ряд букв, имеющих другое начертание в курсиве, как раз и позволяют быстро выявить «неправильные» шрифты.

a — a

г — г

т — т

и — и

п — п

е — е

Если шрифт курсива сделан по-правилам, то отличаться будут все буквы. Но это редкость, как правило ограничиваются только самыми «изменяемыми».

Вот для примера стандартный Arial (частичная поддержка курсива):

a — a

г — г

т — т

и — и

п — п

е — е

Verdana (нет курсива):

a — a

г — г

т — т

и — и

п — п

е — е

Тahoma (есть поддержка):

a — a

г — г

т — т

и — и

п — п

е — е

Times New Roman (есть):

a — a

г — г

т — т

и — и

п — п

е — е

Основываясь на эту методику, вы можете подобрать «правильные» шрифты для своего сайта на Google Fonts. Я приведу некоторые из них:

Open Sans
Lora
PT Sans
Ubuntu
PT Serif

А вот, скажем, расспиаренный Roboto не имеет полноценного курсива и не может использоваться для кириллических сайтов.

Как быстро определить «правильные» шрифты?

Проекты

Ссылки