Как быстро определить «правильные» шрифты?
22-02-2016Время чтения ~ 5 мин.Блог 14151
Раньше на сайтах использовались только т.н. безопасные шрифты — это 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, в котором используется полноценный курсив:
В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!
Многие буквы по начертанию совпали с тем, что вы написали на бумаге. Ряд букв, имеющих другое начертание в курсиве, как раз и позволяют быстро выявить «неправильные» шрифты.
Если шрифт курсива сделан по-правилам, то отличаться будут все буквы. Но это редкость, как правило ограничиваются только самыми «изменяемыми».
Вот для примера стандартный Arial (частичная поддержка курсива):
Verdana (нет курсива):
Тahoma (есть поддержка):
Times New Roman (есть):
Основываясь на эту методику, вы можете подобрать «правильные» шрифты для своего сайта на Google Fonts. Я приведу некоторые из них:
- Open Sans
- Lora
- PT Sans
- Ubuntu
- PT Serif
А вот, скажем, расспиаренный Roboto не имеет полноценного курсива и не может использоваться для кириллических сайтов.