Выбрать верные шрифты не всегда просто, хоть это и является одной из рабочих задач веб-дизайнера. Тут недостаточно подобрать пары по контрасту или подобию, нужно думать и о технических аспектах.
Если взять любой шрифт в Google Fonts, например Open Sans, или Droid Serif, или Лато, экспортировать код и вставить его на страницы сайта, то такая процедура займет минимум времени и будет бесплатна. Но подводные камни есть везде, и шрифты не исключение.
Потому что не у всех посетителей сайта будет доступ к шрифтам, которые указаны в стилях сайта. А при просмотре с мобильных устройств проблема станет появляться еще чаще, и тот красивый шрифт, который только что установили, может показываться не всем посетителям, заменяясь произвольными из числа установленных в системе пользователя.
Все из-за того, что выбор шрифтов во многом зависит от операционной системы, каждая из которых отличается наборами поддерживаемых гарнитур.
Устройства на базе Windows могут иметь одну группу, MacOS - другую, а в мобильных гаджетах на Android используется вообще третья группа шрифтов.
В веб-дизайне есть понятие «безопасные шрифты». Ими могут быть все стандартные, которые установлены в операционных системах (Windows, MacOS, Android, а также Unix и Linux).
Поэтому дизайнеры, программисты, могут указать в стилях сайта, какой именно шрифт использовать в качестве резервного. Они подбирают шрифты, максимально похожие на оригинальные по начертанию. Ведь именно они будет показаны пользователю, если основной окажется недоступным.
Безопасные веб-шрифты
1. Arial
Arial — стандартный шрифт для рабочих станций под управлением Windows. и один из наиболее широко используемых шрифтов без засечек (что означает отсутствие маленьких черточек в конце каждой буквы). Это шрифт гугл-документов, обладающий повышенной читаемостью и не делающий акцент на особой форме букв. Идеален для длинных текстов, как раз потому, что не отвлекает от смысла контента.
2. Times New Roman
Times New Roman является стандартом для шрифтов с засечками, как Arial для шрифтов без засечек. Один из самых популярных на устройствах с Windows и представляет собой новую вариацию старого шрифта Times, использовавшегося при наборе одноименного печатного издания. Его также любят использовать для печатных текстов и многие офисные документы набраны именно им.
3. Helvetica
Helvetica - эта гарнитура не нуждается в представлении. Любимая дизайнерами, она разработана в 1957 году швейцарским типографом Максом Мидингером при помощи Эдуарда Хоффмана и изначально называлась Haas-Grotesk. Четкая и лаконичная форма шрифта подчеркивается огромной высотой знаков, что позволяет видеть надписи издалека, а также небольшим интервалом между буквами. При использовании в вебе же важна геометрическая четкость Гельветики, позволяющая строить уверенные шрифтовые композиции.
4. Courier New
Courier New, похожий на Times New Roman, является разновидностью еще одной классики, о которой напишем ниже. Он является моноширинным шрифтом (в отличие от шрифта с засечками и без засечек, которые мы только что видели). Это значит, что все знаки шрифта имеют одинаковую ширину, которая не меняется при масштабировании.
5. Courier
Courier — это старый моноширинный шрифт, который используется к качестве резервного на серверах. Потому и доступен почти для большинства устройств и операционных систем. Его можно увидеть при работе с командной строкой старых UNIX-систем. Его целесообразность использования в веб-дизайне сомнительна, но может подойти для набора блоков программного кода в тексте, если ваш проект связан с IT-сферой. Ну или если хотите имитировать текст, набранный печатной машинкой.
6. Verdana
Вердана — настоящий веб-шрифт, потому что имеет простые линии без засечек и масштабируется до больших размеров. Буквы почти вытянутые, что позволяет легко читать тексты на мониторе. Этот гуманистический гротеск создан Мэттью Картером в 1996 году для Microsoft, и оптимизирован специально под отображение на экранах с низким разрешением.
7. Georgia
Джорджия похожа на Вердану по размеру и высоте (с более крупными, чем обычно, буквами, по сравнению с шрифтами того же размера). Поэтому, хотя он отлично подходит для веба, избегайте сочетания этой антиквы с другими, которые имеют недостаточные различия в начертании. Да и вообще, старайтесь не допускать использования двух шрифтов одного типа начертания на странице, потому что чаще всего гармония будет отсутствовать.
8. Garamond
Garamond — также шрифт старой школы, восходящий к стилям, использовавшихся в Париже 16 века. Эта новая и улучшенная версия была представлена и включена в состав большинства устройств Windows. А Apple пошла еще дальше, и в 1984 году, для брендинга серии Макинтошей, разработала собственный вариант Гарамона под названием “Apple Garamond”.
9. Palatino
Большое семейство шрифтов Палатино восходит к эпохе Возрождения и основано на почерках мастеров Ренессанса. Это также шрифт с крупными знаками, который идеально подходит для Интернета, но традиционно используется для заголовков и рекламы в печатном стиле.
10. Bookman
Bookman (или Bookman Old Style) — еще один идеальный вариант шрифта, который сохраняет читаемость даже при использовании небольшого размера. Пусть не смущает название, потому что этот шрифт популярен для печати рекламных листовок, как раз из-за хорошей читаемости в любых масштабах.
11. Trebuchet
Требушет — еще один шрифт без засечек, получивший свое название в честь одноименной средневековой машины для осады крепостей и городов. Он был выпущен в 1996 году и до сих пор остается одним из популярных шрифтов для основного текста в Интернете.
12. Tahoma
Относится к шрифтам без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых ранних версиях операционных систем, таких как Windows 2000, Windows XP и Windows Server 2003.
13. Arial Black
Ариал Блэк — это более крупная и дерзкая версия базового Arial. Как ни странно, он также имеет схожее начертание с Helvetica. Почему это важно? Чтобы получилось использовать его вместо Helvetica и печатать, не платя за лицензию.
14. Comic Sans MS
Comic Sans MS — самая непонятная альтернатива другим шрифтам без засечек. Он странный, и скорее его можно отнести к анти-примерам шрифта. Но с другой стороны, с его помощью раскроется юмористичный или несерьезный смысл текста.
15. Impact
Impact — еще один смелый вариант начертания, который отлично смотрится в заголовках, но совершенно не пригоден для набора основного текста. Жирный и плотный, в России он был популярен для оформления текстовых документов и выделения важной информации. Смотрелось жутко, поверьте. Наверно поэтому шрифту посвящена отдельная страничка на Лурке.
Веб-безопасные шрифты — это запасной вариант, который может помочь избежать проблем с отображением текстовой информации на стороне пользователя. Вернее, текст отображаться будет, но не так, как это задумывалось дизайнером. И если для лонгрида это не так критично, то читаемость заголовков на продающей посадочной странице может быть серьезно нарушена. И приведет это к уходу клиента
- Подпись автора