Лучшие шрифты для верстки веб-ресурса

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

веб cfqnf
Читать позже

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

Все шрифты допустимо классифицировать на две крупные группы:

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

 

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

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

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

Что мы рассмотрим в материале:

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

 

Что является стандартом?

Шрифты базового (стандартного) пула оказываются на устройстве пользователя при установке операционной системы. ОС бывают разными, поэтому и пакет шрифтов, как правило, отличается. Для Windows и яблочных платформ несложно найти основной перечень шрифтов. По ОС компании Майкрософт определить стандартные варианты несложно при помощи такой таблицы.

Чуть сложнее обстоят дела с операционками на базе Linux/Unix. В них четкие перечни не определены. Но в большинстве случаев пользователи данных операционных систем устанавливают набор DejaVu. Допустим в Ubuntu он считается списком по умолчанию. Опираясь на данные статистики, поклонники Linux либо Unix нередко устанавливают себе и другие наборы, к примеру, URW или же Free. Также проведенные опросы показывают, что у 60% Линукс-платформ установлен пакет CoreFontsForTheWeb, который до 2002 года был бесплатным: затем компания Майкрософт сделала доступ к ним платным.

Чтобы добиться корректного отображения веб-ресурса в Cascading Style Sheets (CSS, то есть таблицах стилей) для параметра font-family можно указать не единственный шрифт, а сразу несколько, разделяя их запятой. За счет этой особенности можно применять несколько шрифтов или их семейств.

В соответствии со спецификацией таблиц стилей CSS2 выделяют два вида имен семей шрифтов:

  1. Произвольные названия семей. Примеры: «Arial» либо «Times new Roman». Если в названии имеется пробел, то шрифт следует брать в кавычки. При их отсутствии любые символы перед или после имени будут игнорироваться, а различное число пробелов внутри названия будет преобразовываться в одинарный интервал.
  2. Родовые семейства, имеющие определенные характерные особенности. В спецификации указаны такие популярные семьи шрифтов:
    • serif - отличающиеся наличием засечек на хвостиках символов;
    • sans-serif - символы без каких-либо засечек;
    • cursive - курсивы, то есть шрифты с наклоном символов;
    • fantasy - декоративные (дополнительно украшенные) шрифты;
    • monospace - те шрифты, символы и знаки которых характеризуются одинаковой шириной относительно друг друга.

 

Наименования родовых семей при написании в стилистической таблице CSS не нужно ставить в кавычки.

В большинстве случаев еще на этапе дизайна веб-проекта выбирается стандартный вариант для операционки Windows, также подбирается максимально похожий на него визуально шрифт для MacOS (iOS) и/или Linux. Иногда поклонники «яблочных» устройств сперва подбирают шрифт для данной платформы, а затем находят схожие для Windows и семейства Линукс. В CSS задается одно семейство шрифтов. По сути дополнительная работа с шрифтами и не требуется.

Порой бывают более сложные ситуации, на чем стоит остановиться подробнее.

 

Обеспечение безопасности шрифтов для веб-сайта

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

Отдельные виды шрифтов можно считать «безопасными», но все же различные нюансы с их применением остаются. Основным принципом отнесения шрифта к «безопасному» является его наличие в пакете стандартных для операционной системы Windows и наличие в большинстве других операционок. Так, в соответствии со статистикой к весьма распространенным относится набор CoreFontsForTheWeb, активно применяемый пользователями Linux-платформ. В данном пакете присутствуют такие популярные и хорошо знакомые среднестатистическому пользователю шрифты, как Times New Roman, Arial либо Arial Black, а также Verdana, Georgia, Courier New, Webdings, Andale Mono и т.д. Все они относятся к кириллическим, что крайне важно при разработке веб-ресурсов для Рунета.

В стандартном наборе для Mac OS X, которая является одной из самых популярных у обладателей «яблочных» лэптопов, моноблоков и стационарных ПК, присутствуют все шрифты CoreFontsForTheWeb.

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

  • Комик Санс (Comic Sans MS);
  • Импакт (Impact);
  • Требушет (Trebuchet MS).

 

Стоит отметить, что Webdings — по сути, является набором значков, так что для отображения текстового контента попросту не подходит. Другой представитель CoreFontsForTheWeb — Andale Mono — слабо распространен и не совсем приятен для регулярного чтения материалов с дисплея, плюс далеко не на всех ПК и других устройствах он установлен, что делает его не таким уж и «безопасным».

Самые «безопасные» шрифты — это те, что инсталлированы на устройствах, работающих на платформах Windows + Mac OS, а также у большинства пользователей, использующих дистрибутив Linux (Unix) и установивших соответствующий набор. Но ведь есть и другие платформы. Как добиться того, чтобы оригинальные замыслы дизайнеров смогли оценить все без исключения? И в данном аспекте добиться 100% «безопасности» шрифта точно нельзя.

 

Кириллические шрифты

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

Чтобы на экране устройства пользователя Рунета не появились различные непонятные символы, программистами был создан Unicode (Юникод). Это стандарт кодирования символов, позволяющий в рамках одного шрифта применять символы из разных языков. Так, применимо к текстам на русском языке необходимо использовать Юникод с поддержкой кириллических символов (русского алфавита).

Ниже приведены данные о внешней схожести различных шрифтов. К примеру, наиболее визуально близким к Arial Black (базовому для Windows) в системе Mac OS является Helvetica CY, а в Линукс-платформах — Nimbus Sans L, а их общим семейством считается Sans-serif.

топ хорошие

* значит, что аналогичного русскоязычного аналога шрифта Виндовс у конкретной операционной системы нет. Как правило, в конкретной ОС устанавливается именно это шрифт, а не его близкие версии.

 

Если базовым видом шрифта для ресурса выступает TimesNewRoman, то необходимо отыскать в указанной выше табличке данный шрифт и понять, какие считаются его аналогами. В CSS (таблице стилей) нужно указать следующие данные:

body {font-family: «Times New Roman», «Times CY», «Nimbus Roman No9 L», serif;}

Код такого вида означает следующее: если на устройстве пользователя имеется шрифт Таймс Нью Роман (а он однозначно есть в Виндовс и на MacOS X), то текстовое содержимое сайта будет демонстрироваться на нем. Если же этот шрифт по каким-то причинам отсутствует (допустим, удален), то пользователю Рунета с «яблочным» гаджетом будет демонстрироваться текст на системном шрифте Times CY, а в ситуации с Юником либо Линуксом — на NimbusRomanNo9L, который установлен на 9 из 10 персональных компьютерах на базе Линукс. Более того, если у пользователя нет всех этих трех шрифтов, то текстовое содержимое на его ПК будет отображено в виде базового шрифта с засечками.

Стоит обратить внимание на то, что к шрифтам «яблочных» платформ помимо указания названия, вроде Times идет дополнение в виде CY (причем для всех шрифтов). Что это такое?

До того, как появилась операционная платформа MacOS X, указанный выше код имел более простой вид: для MacOS 9 указывался стандартный вариант Times, а все, у кого он не установлен, увидели бы шрифт с засечками. Правда, есть одно «НО». У стандартного Times в MacOS 9 нет кириллических символов. Что это значило бы для пользователей Рунета:

  • так, человек, использующий Windows, увидит текст на Таймс Нью Роман;
  • пользователь девятой версии MacOS увидит шрифт Times, который не сможет вывести русскоязычный текст, а значит человек увидит просто набор непонятных символов;
  • все остальные будут лицезреть либо NimbusRomanNo9L, либо шрифт с засечками.

 

Чтобы исключить проблему отсутствия кириллицы в Times (а также допустим Helvetica (аналоге Arial)), целесообразно использовать для «яблочных» платформ аналогичные шрифты с дополнением CY, то есть Times CY или Helvetica CY, которые имеют поддержку русского алфавита.

С разработкой MacOS X ситуация поменялась, так как на этой операционной системе уже есть стандартные для Windows шрифты. Но вряд ли дизайнер (и владелец веб-ресурса) хочет, чтобы пусть небольшая часть пользователей девятой версии MacOS сталкивалась со сложностями при отображении информации на веб-ресурсе. Как раз для них и стоит указывать версию шрифта с поддержкой кириллических символов.

Получается, что на 100% безопасного выбора среди шрифтов для сайта попросту нет, но вот универсальные и «безопасные» линейки все же имеются. Их принято именовать CSS-стеками шрифтов или шрифтовыми стеками. В них кроме стандартного пула для MacOS X и Виндовс обычно добавляют близкие аналоги из набора MacOS 9 (а тут, в общем-то, полноценно «безопасных» шрифтов вообще нет), а также типовые и хорошо распространенные альтернативы для Линукс-оболочек.

Любой специалист, занимающийся версткой, в какой-то момент времени столкнется с ситуацией, когда дизайнер вставляет в свой макет шрифт, явно не подпадающий под критерий «безопасного». Это не значит, что нужно паниковать или жаловаться на дизайнера. Последние, к примеру, достаточно часто предпочитают задействовать Tahoma. Он не в числе стандартных для большинства ОС. Но грамотно подобранная линейка позволит применять не один лишь Tahoma, а рассчитывать на корректное отображение информации на визуально схожих шрифтах. Многие дизайнеры в курсе этого, как собственно и опытные верстальщики.

Ниже приводим вашему вниманию таблицу альтернативных шрифтов для тех, что не относятся к категории «безопасных», но тем не менее, их применение допустимо на дизайнерских макетах:

засечками виды

 

А что с латиницей?

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

ihbans комик

 

При оформлении CSS для популярных шрифтов, вроде Таймс Нью Роман, Эриал и Курьер Нью после указания шрифта для ОС Windows стоит указывать сперва вариант для Линукс-систем, а уже следом — для «яблочных» платформ. Это обусловлено не самой корректной работой набора шрифтов X11CoreFontsSet для Линукс-систем.

Альтернативные шрифты из тех, что не относятся к разряду «безопасных», но допустимы к применению в шаблонах при формировании CSS-стеков шрифтов:

lkz санс

 

Наличие прочерка в столбце Unix/Linux свидетельствует о том, что аудитория, использующая данные ОС в 99.9% случаев увидит исходный шрифт, к примеру, Lucida Console, поскольку, он изначально по умолчанию устанавливается для ввода текста.

** при прописывании данного стека шрифт Garuda стоит вносить перед Palatino, что поспособствует корректности отображения информации на сайте.

 

В качестве заключения

Гарантировать отсутствие каких-либо сложностей с отображением данных с использованием одного шрифта невозможно. На 100% «безопасного» и универсального шрифта для применения на веб-ресурсе нет. К наиболее безопасным можно отнести такие популярные, как Arial и Эриал Блек, Times New Roman, Courier New, Verdana, Комикс Санс МС, Georgia, Импакт и Trebuchet MS.

А вот сформировать максимально универсальные шрифтовые CSS-стеки под силу всем, в том числе с акцентом на те, что поддерживают кириллицу, и/или же только охватывают латинские символы. Подготовить код для таблиц стилей можно даже с помощью нашей публикации, ориентируясь на приведенные табличные данные.

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

Оцените статью: 4.8 (4)
Следующая статья: Слайдер нового образца: перспективные горизонты для бизнеса
Предыдущая статья: Создание сайта: от шрифта до работы с пришедшим клиентом
Написать статью для вас?
Отправьте заявку на статью: если проблема окажется актуальной и массовой – мы опишем ее решение и разместим статью на сайте.
Хочу статью
При заказе
продвижения
Скидка на
разработку
сайта
Заказать
Приведи
друга
получи
скидку
Подробнее
Специальное
предложение
против
вируса
Получить кп
Комментарии
Показать сначала:
Новые Старые
Рещиков Александр
23.11.2020, 22:40
0
–  0
Уже очень давно у меня было множество вопросов в этой области. Искал я на разных сайтах, но так я и не чего не смог найти. Пока не прочёл эту статью. Я сразу нашёл всё-то что мне было нужно даже чуть больше. Спасибо большое.
Владимир
23.11.2020, 22:40
0
–  0
Ну на мой взгляд самым беспроигрышным вариантов на сегодня является шрифт Эриал Блек. Он везде отображается плюс минус одинаково. Конечно ,что то может пойти не так,но это скорее исключение из правил.
Маша
23.11.2020, 22:40
0
–  0
Некоторые шрифты выглядят очень эффектно и красиво. Они помогают легче воспринимать информацию. Хотя, конечно, это вопрос вкуса. Лучше всего действительно использовать стандартные шрифты.
Максим
03.12.2018, 08:04
0
–  0
Мне кажется, что самый популярный и часто используемый - TimesNewRoman, по крайней мере у меня с ним никогда проблем не было с отображением, хотя допускаю, что вероятно, это тоже не эталон.
Написать комментарий
captcha

Новые исследования

2021-03-03 00:00:00

Повышение продаж применяя данные из отчетов Google Search Console

Google Search Console - это бесплатный  SEO-инструмент, обозначенной в самом названии системы. Способы взаимодействия и примеры практического применения рассматриваются далее.
Читать 5

2021-02-28 00:00:00

Гугл Новости и SEO - все, что нужно знать владельцам сайтов, которые хотят больше трафика из Google News

Владельцы новостных сайтов и медиа-холдинги стремятся занимать первые места в поисковой выдаче среди наиболее популярных сайтов, предоставляющих доступ к контенту разного типа. Как опытные SEO-специалисты, работающие в том числе с публикациями, мы хотим поделиться некоторыми идеями и советами по ранжированию в Google. Речь пойдет исключительно о новостных проектах, имеющих шанс попасть в индекс приложения “Новости Google”. Мы определили ряд практик и методов по оптимизации контента, которые применимы к поисковому продвижению новостных сайтов (страниц, приложений и прочих форматов сети).
Читать 21
Больше исследований

Интервью и мнения SEO-гуру

Для глубокого погружения в профессию оптимизатора, мы настоятельно рекомендуем совмещать чтение с просмотром видео.

Евгений Аралов: главные прогнозы на 2020 (сервисы и методы)

Далеко не каждый специалист может быстро и качественно продвинуть сайт в непростой тематике. Например, букмекерская площадка для ставок в спорте, где SEO чуть ли не ед...

Анализ SEO для СМИ: ведущий эксперт отрасли Галина Бакушева

Для одних Галина Бакушева ассоциируется с каналом Телеграм «Сеошница», для других, она создатель собственного ТВ на фейсбук. Однако такая популярность не г...

Ксения Пескова: качественный продукт приятно рассматривать даже краулерам

Всего два года потребовалось, чтобы стажер SiteClinic, Ксения Пескова, стала не просто тимлидом компании, но и трастовым экспертом в области SEO. Все началось почти ср...

Кирилл Рамирас: лучшие рекомендации по ведению блога для ИМ

Кирилл Рамирас интересен владельцам бизнеса в сети своими успешными проектами, опытом работы в SEO с 2007 года. Регулярное обновление публикаций на Altblog.ru &nd...

Алексей Алексеич: рост и боль в продвижении 2020 - какие прогнозы сбылись?

Сам о себе говорит, что он точно не Андрей, любит котов и смотрит «Битву Престолов». Если серьезно, эксперту 25 лет и с 2011 года основательно занимается с...

Андрей Буйлов: проблемы seo клиента не волнуют!

Андрей Буйлов – известный в сети эксперт по SEO продвижению сайтов. Свою карьеру начинал в конце 90-х. Тогда будущий спикер разнообразных конференций, семинаров ...

Все интервью
Нам доверяют крупные международные компании