15 безопасных веб-шрифтов

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

Если взять любой шрифт в 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

 

Эта гарнитура  не нуждается в представлении. Любимая дизайнерами, она разработана в 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 — еще один смелый вариант начертания, который отлично смотрится в заголовках, но совершенно не пригоден для набора основного текста. Жирный и  плотный, в России он был популярен для оформления текстовых документов и выделения важной информации. Смотрелось жутко, поверьте. Наверно поэтому шрифту посвящена отдельная страничка на Лурке.


 

Вывод

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

 

Оставить заявку