Шрифты безопасные для web: «Безопасные» шрифты и их применение в веб-дизайне

«Безопасные» шрифты и их применение в веб-дизайне

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

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

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

*Шрифт “Century Gothic” содержится на 83% устройств, этот процент растет и в скором будущем он станет безопасным.

Увеличить количество доступных шрифтом можно за счет подключаемых шрифтов от Google Fonts.

Шрифты – иконки

1. http://fontawesome.io – Font Awesome
2. http://zurb.com/playground/foundation-icon-fonts-3 – Foundation icon
3. http://ionicons.com – ionicons
4. http://design.google.com/icons/ – Material Design Icons
5. http://octicons.github.com – Octicons
6. http://www.typicons.com – Typicons
Сервис для выбора иконок: http://glyphsearch.com

Web инструменты для работы со шрифтами

Подбор шрифтов

– http://fontstorage.com/ – База шрифтов с возможностью подбора и вывод в CSS
– http://www.typetester.org/ – Тестирование и подбор шрифтов, вывод в CSS.
– http://csstypeset.com/ – Работа с разными стилями и атрибутами текста и вывод в CSS.
– http://www.designerplaything.co.uk/designer-plaything.html – Подбор шрифта и цвета.
– http://www.texster.ru/ – Помощник в выборе шрифта.
– http://flippingtypical.com/ – Просмотр вашего текста в разном стиле.
– http://www.stcassociates.com/lab/fontbrowser.html – Аналогичен предыдущему (более расширен).
– http://www.blindtextgenerator.com/ru – Русский онлайн Lorem Ipsum генератор.
– http://wordmark.it/ – Просмотр вашего текста в разных стилях.

Распознавание шрифтов

– http://www.myfonts.com/WhatTheFont/ – Определение шрифта по образцу.
– https://www.fontspring.com/matcherator – Определение шрифта по образцу.
– http://www.identifont.com/identify.html – Выявляет шрифт через ряд вопросов о нем.
– http://www.typophile.com/ – Крупнейшее сообщество на тему шрифтов.
– http://www.bowfinprintworks.com/ – поиск шрифтов по образцам.
– http://www.fontshop.com/research/ – выясняет название по форме отдельных символов.
– http://www.flickr.com/groups/typeid/ – определяет названия шрифтов, используемых в различных изображениях.
– http://fount.artequalswork.com/ – бесплатный онлайн сервис для моментальной идентификации шрифта.

Скачать шрифты

– http://www.xfont.ru/ – Крупнейший сервис по шрифтам.
– http://www.fontov.net/ – бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
– http://ifont.ru/ – Большой русскоязычный сервис шрифтов.
– http://www.dafont.com/ – шрифты с просмотром вашего примера.
– http://www.fonts-online.ru/ – База шрифтов с просмотром Online

Прочее

– http://fontstruct.com/ – создание собственных шрифтов Online
– http://fontark.net/farkwp/ – Коструктор шрифтов Online
– http://www.fontsquirrel.com/fontface/generator – загрузка и доработка ваших шрифтов.
– http://pxtoem.com/ – Переводит одни единицы измерения шрифтов в другие.
– http://csswarp.eleqtriq.com/ – Онлайн сервис для подготовки эффектного текста.
– http://www.bestwebfonts.com/ – Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.

Источник: pomelnikov.com

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

Обычно используемые комбинации шрифтов

семейство шрифтов свойство является разнообразие названий шрифтов в качестве системы «штамма» для обеспечения максимальной совместимости браузера / операционной системы между. Если первый браузер шрифт не поддерживает, он пытается следующий шрифт.

Тип шрифта вы хотите, если браузер не может быть найден, он найдет от общего типа шрифта вам нравится:

Вот некоторые часто используемые шрифты, сочетания родовых шрифтов.

Serif шрифты

Sans — шрифт с засечками

Моноширинный шрифт

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

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

1.

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

2. Times New Roman

Times New Roman используется для шрифтов с засечками, как Arial для шрифтов без засечек.

Он один из самых популярных на устройствах с Windows и представляет собой новую вариацию старого шрифта Times.

4. Courier New

Courier New, похожий на Times New Roman, является разновидностью еще одной старой классики. Он также считается моноширинным шрифтом (в отличие от шрифта с засечками и без засечек, который мы только что видели).

5. Courier

Courier — это старый моноширинный резервный серверный шрифт, доступный почти для всех устройств и операционных систем.

6. Verdana

Вердана — настоящий веб-шрифт, потому что: 1) простые линии без засечек и 2) у него очень большой размер. Буквы почти вытянутые, что позволяет легко читать онлайн.

7. Georgia

Джорджия похожа на Вердану по размеру и высоте (с более крупными, чем обычно, буквами по сравнению с шрифтами того же размера). Поэтому, хотя он отлично подходит для определенных обстоятельств, избегайте сочетания этого шрифта с засечками с другими (например, Times New Roman), которые могут выглядеть незначительно в сравнении.

8.Palatino

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

9. Гарамонд

Garamond — еще один шрифт старой школы, восходящий к стилям, используемым в Париже 16 века. Эта новая и улучшенная версия была представлена ​​и включена в состав большинства устройств Windows (и с тех пор была принята другими).

10. Bookman

Книжник (или Bookman Old Style) — еще один идеальный вариант заголовка, который сохраняет читаемость (или читаемость) даже при использовании небольшого размера.

11. Tahoma

Тахома относится к шрифту без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых более ранних версиях Windows, таких как Windows 2000, Windows XP и Windows Server 2003.

12. Trebuchet

Требушет — еще один шрифт без засечек, получивший свое название в честь одноименной средневековой осадной машины. Он был выпущен в 1996 году и до сих пор остается одним из самых популярных шрифтов основного текста в Интернете.

13. Arial Black

Ариал Блэк — это более крупная, смелая и плохая версия вашего базового Arial. Как ни странно, он также имеет пропорции с Helvetica. Почему это важно? Чтобы они могли изначально использовать его для замены Helvetica и печати, не платя за лицензию.

14. Impact

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

15. Comic Sans MS

Comic Sans MS — забавная и причудливая альтернатива другим вариантам без засечек.

Это тоже довольно странно. Но с другой стороны, этот шрифт легко читать людям с дислексией.

Вывод

Веб-безопасные шрифты — это план Б. Резервный вариант, когда ваш первый вариант может не сработать.

Эти шрифты широко доступны и доступны на большинстве устройств.

CSS font safe

Часто используемые сочетания шрифтов

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы, чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт.

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

Пример

p {
    font-family: «Times New Roman», Times, serif;
}

Ниже приведены некоторые часто используемые сочетания шрифтов, упорядоченные по родовому семейству.

Шрифты с засечками

Шрифты без засечек

Monospace Fonts

Совет: Кроме того, проверьте все доступные шрифты Google и их использование.

CSS Веб-безопасные комбинации шрифтов. W3Schools на русском

Часто используемые комбинации шрифтов

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной системы», чтобы обеспечить максимальную совместимость между браузерами / операционными системами. Если браузер не поддерживает первый шрифт, он пытается использовать следующий шрифт.

Начните с нужного шрифта и завершите общим семейством, чтобы браузер мог выбрать аналогичный шрифт в общем семействе, если другие шрифты недоступны:

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

Serif шрифты (из засечками)

Sans-Serif шрифты (без засечек)

Моноширинные шрифты

Совет: Также вы можете ознакомиться со всеми доступными Google шрифтами и их использованием.

Убедитесь, что вы используете веб-безопасные шрифты

Автор Глеб Захаров На чтение 5 мин. Просмотров 54 Опубликовано

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

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

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

Ссылки на веб-шрифты

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

Sans Serif Web Safe Шрифты

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

• Arial
• Arial Black
• Tahoma
• Требушет М.С.
• Verdana

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

• В. Готика
• Женева
• Lucida
• Люцида Санс
• Люсида Гранде

Serif Web Safe Fonts

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

• курьер
• Новый Курьер
• Грузия
• раз
• Times New Roman

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

• MS Serif
• Нью-Йорк
• Palatino
• Палатино Линотип

Моноширинные шрифты

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

• курьер
• Новый Курьер

Эти шрифты также имеют некоторый охват.

• Lucida Console
• Монако

Курсивные и Фантазийные Шрифты

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

В Windows и Macintosh доступен только один рукописный шрифт, но не в Linux. Это Comic Sans MS. Не существует фэнтезийных шрифтов, которые бы хорошо охватывали браузеры и операционные системы.Это означает, что если вы используете на своем сайте курсив фэнтезийных шрифтов, вы, вероятно, используете их как веб-шрифты и ссылаетесь на соответствующий файл шрифта.

Смартфоны и мобильные устройства

Если вы разрабатываете страницы для мобильных устройств, выбор шрифтов, безопасных для Интернета, может быть различным. Для устройств iPhone, iPod и iPad общие шрифты включают в себя:

• Arial
• курьер
• Новый Курьер
• Грузия
• Helvetica
• Palatino
• Times New Roman
• Требушет М.С.
• Verdana

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

33 лучших веб-шрифта (и безопасных веб-шрифтов) для вашего веб-сайта

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

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

Содержание статьи

Веб-шрифты и веб-шрифты: в чем разница?

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

• Безопасные веб-шрифты: также известные как «системные шрифты» или «браузерные шрифты», веб-безопасные шрифты — это шрифты, установленные на всех устройствах и браузерах.
• Веб-шрифты: хотя и нечеткие, веб-шрифты относятся ко всем шрифтам, которые не веб-безопасным шрифтам, особенно коммерческим и независимо разработанным шрифтам.

Таким образом, веб-безопасные шрифты являются наиболее распространенными, доступными в Windows или Mac, Chrome или Safari. Таким образом, веб-шрифты не так легко доступны, и, как правило, вам придется загружать и устанавливать их сами.

Какой из них следует использовать в веб-дизайне?

У обоих есть свои преимущества и недостатки.

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

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

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

Если у вас возникли проблемы с принятием решения, воспользуйтесь этой полезной блок-схемой от Дэвида Гилбертсона из Hackernoon (имейте в виду, что он использует «системные шрифты» в значении «веб-безопасные шрифты»).

What об индивидуальной эстетике шрифта?

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

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

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

Когда использовать шрифты с засечками в веб-дизайне

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

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

Также стоит отметить, что шрифты с засечками удобны для чтения, поэтому их часто используют для основного текста, заголовков и подзаголовков. Это не значит, что шрифты без засечек плохо читаются; они отлично подходят для длинных блоков текста. Но есть причина, по которой высококлассные издания, такие как The New York Times и Boston Globe по-прежнему используют веб-шрифты с засечками для своих цифровых статей. И, не случайно, обе эти газеты склоняются к «формальному» и «классическому» стилям брендинга, продвигая при этом длинный текст.

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

Лучшие веб-шрифты с засечками:

] Лучшие веб-шрифты с засечками:

]

Когда использовать шрифты без засечек в веб-дизайне

Шрифты без засечек — полная противоположность шрифтам с засечками как по форме, так и по тому, как они воспринимаются зрителем. В данном случае sans буквально означает «без», поэтому все шрифты без засечек — это шрифты без засечек.

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

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

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

Лучшие веб-шрифты без засечек:

Лучшие веб-шрифты без засечек:

Когда использовать декоративные шрифты в веб-дизайне

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

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

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

Лучшие декоративные веб-безопасные шрифты:

Лучшие декоративные веб-шрифты:

Или вы можете просто использовать Comic Sans

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

Если это решение покажется вам слишком сложным, вы всегда можете просто использовать Comic Sans. В конце концов, какая вам польза от смертных, когда вы можете ходить среди богов?

Нужна помощь в разработке вашего сайта?

Наше сообщество талантливых дизайнеров всегда готово помочь.

25 великолепных веб-шрифтов для вашего веб-сайта

шрифтов. Мы видим их каждый день. В мире есть все виды шрифтов, от печатной рекламы до журналов.

Независимо от того, являетесь ли вы владельцем магазина электронной коммерции или начинающим блогером, все веб-сайты объединяет одна общая черта — использование текста для содержания.

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

Но еще важнее, чтобы они были безопасными для использования в Интернете.

Что такое безопасные веб-шрифты?

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

Почему важны веб-безопасные шрифты?

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

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

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

С другой стороны, чтобы избежать этого, веб-дизайнеры использовали основные шрифты для Интернета, которые Microsoft выпустила в 1996 году в качестве стандарта для большинства шрифтов веб-сайтов. Этот набор шрифтов в конечном итоге стал «веб-безопасными шрифтами», потому что независимо от компьютера шрифты будут безопасно отображаться на вашем веб-сайте.

Должен ли я использовать безопасные веб-шрифты для моего веб-сайта?

Краткий ответ: Совершенно верно.

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

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

Как мне добавить эти безопасные веб-шрифты?

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

Если вы все еще не уверены, то просто выполните следующие несколько простых шагов:

1. Загрузите файл header.php
2. Скопируйте исходный / стандартный код шрифта (см. Ссылку 1)
3. Вставьте код вверху ваш файл заголовка.
4. Загрузите свой style.css, поместите код шрифта, чтобы изменить текст шрифта по вашему выбору. (см. ссылку 2)

Ссылка 1

Ссылка 2

 body {font-family: 'Abel'; font-size: 22px;} 

25 великолепных веб-безопасных шрифтов для вашего веб-сайта

1. Arial

Ссылки / Источник: Fonts.com / CSS Font Stack

2.Calibri

Ссылки / Источник: Fonts.com / CSS Font Stack

3. Helvetica

Ссылки / Источник: Fonts.com / CSS Font Stack

4. Segoe UI

Ссылки / Источник: Fonts.com / CSS Font Stack

5. Trebuchet MS

Ссылки / Источник: Fonts.com / CSS Font Stack

6. Cambria

Ссылки / Источник: Fonts.com / CSS Font Stack

7. Palatino

Ссылки / Источник: Fonts.com / CSS Font Stack

8.Perpetua

Ссылки / Источник: Fonts.com / CSS Font Stack

9. Грузия

Ссылки / Источник: Fonts.com / CSS Font Stack

10. Consolas

Ссылки / Источник: Fonts.com / CSS Font Stack

11. Courier New

Links / Source: Fonts.com / CSS Font Stack

12. Tahoma

Links / Source: Fonts.com / CSS Font Stack

13. Verdana

Ссылки / Источник: Fonts.com / CSS Font Stack

14.Optima

Ссылки / Источник: Fonts.com / CSS Font Stack

15. Gill Sans

Ссылки / Источник: Fonts.com / CSS Font Stack

16. Century Gothic

Ссылки / Источник: Fonts. com / CSS Font Stack

17. Candara

Links / Source: Fonts.com / CSS Font Stack

18. Andale Mono

Links / Source: Fonts.com / CSS Font Stack

19. Didot

Ссылки / Источник: Fonts.com / CSS Font Stack

20.Copperplate Gothic

Ссылки / Источник: Fonts.com / CSS Font Stack

21. Rockwell

Ссылки / Источник: Fonts.com / CSS Font Stack

22. Bodoni

Ссылки / Источник: Fonts.com / CSS Font Stack

23. Franklin Gothic

Links / Source: Fonts.com / CSS Font Stack

24. Impact

Links / Source: Fonts.com / CSS Font Stack

25. Calisto MT

Ссылки / Источник: Fonts.com / CSS Font Stack

Инструменты шрифтов для проверки

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

Font Pair

Font Pair предлагает массу ресурсов, плагинов, электронных книг, руководств, видео и даже вдохновения по всему, что связано с типографикой.У них даже есть раздел, в котором представлены самые популярные шрифты, доступные в Google Fonts, и шрифты, которые лучше всего сочетаются друг с другом.

Wordmark.it

Если вам нужен быстрый предварительный просмотр того, как ваш текст будет выглядеть с определенным шрифтом, Wordmark.it дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах. Просто введите слово или фразу в строке их первой страницы, нажмите клавишу ВВОД, и он покажет вам текст с различными шрифтами, такими как Candara или Lucida Console.

WhatTheFont

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

Все дело в игре шрифтов

 p {font-family: Montserrat, Arial, sans-serif; } 

  .sans-serif-font {
    семейство шрифтов: Arial, Helvetica, sans-serif;
}
.serif-font {
    семейство шрифтов: "Times New Roman", Times, serif;
}
.monospace-font {
    семейство шрифтов: "Courier New", Courier, моноширинный;
}