Шрифты стандартные web: Выбираем шрифты для сайта из 15 лучших вариантов

Leave a Comment / Разное / By /

Содержание

Выбираем шрифты для сайта из 15 лучших вариантов

  • Шрифты для сайта, совместимые с HTML и CSS
  • Шрифты для сайта — что может быть не так?
  • Самые популярные шрифты для веб-страниц
    • Arial
    • Helvetica
    • Times New Roman
    • Times
    • Courier New
    • Courier
    • Verdana
    • Georgia
    • Palatino
    • Garamond
    • Bookman
    • Comic Sans MS
    • Trebuchet MS
    • Arial Black
    • Impact
  • Заключение

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit, были созданы в качестве альтернативы с целью предоставить что-то новое.

Их очень просто использовать. Рассмотрим в качестве примера сервис Google Web Fonts.

Выбираете шрифт Open Sans, Droid Serif или Lato. Пишите код и вставляете его в элемент <head> HTML-документа. Все готово, чтобы ссылаться на него в CSS! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.

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

Такого не случится, если реализовать резервный вариант.

Насколько важно применение безопасных веб-шрифтов?

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

А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.

Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите, — один из стандартных вариантов. Например, Times New Roman.

Поэтому как на вашем экране текст может выглядеть просто ужасно.

А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows, Mac, Google, а также Unix и Linux.

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

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

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

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.

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

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

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

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

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

Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.

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

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

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

Comic Sans MS — забавная альтернатива для шрифтов с засечками.

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

Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica. А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию.

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

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

А если нет? Helvetica не подкачает!

СМСергей Марочканичавтор статьи «15 Best Web Safe Fonts»

Выбираем шрифты для сайта из 15 лучших вариантов

  • Шрифты для сайта, совместимые с HTML и CSS
  • Шрифты для сайта — что может быть не так?
  • Самые популярные шрифты для веб-страниц
    • Arial
    • Helvetica
    • Times New Roman
    • Times
    • Courier New
    • Courier
    • Verdana
    • Georgia
    • Palatino
    • Garamond
    • Bookman
    • Comic Sans MS
    • Trebuchet MS
    • Arial Black
    • Impact
  • Заключение

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit, были созданы в качестве альтернативы с целью предоставить что-то новое.

Их очень просто использовать. Рассмотрим в качестве примера сервис Google Web Fonts.

Выбираете шрифт Open Sans, Droid Serif или Lato. Пишите код и вставляете его в элемент <head> HTML-документа. Все готово, чтобы ссылаться на него в CSS! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.

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

Такого не случится, если реализовать резервный вариант.

Насколько важно применение безопасных веб-шрифтов?

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

А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.

Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите, — один из стандартных вариантов. Например, Times New Roman.

Поэтому как на вашем экране текст может выглядеть просто ужасно.

А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows, Mac, Google, а также Unix и Linux.

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

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

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

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.

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

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

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

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

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

Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.

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

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

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

Comic Sans MS — забавная альтернатива для шрифтов с засечками.

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

Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica. А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию.

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

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

А если нет? Helvetica не подкачает!

СМСергей Марочканичавтор статьи «15 Best Web Safe Fonts»

Выбираем шрифты для сайта из 15 лучших вариантов

  • Шрифты для сайта, совместимые с HTML и CSS
  • Шрифты для сайта — что может быть не так?
  • Самые популярные шрифты для веб-страниц
    • Arial
    • Helvetica
    • Times New Roman
    • Times
    • Courier New
    • Courier
    • Verdana
    • Georgia
    • Palatino
    • Garamond
    • Bookman
    • Comic Sans MS
    • Trebuchet MS
    • Arial Black
    • Impact
  • Заключение

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit, были созданы в качестве альтернативы с целью предоставить что-то новое.

Их очень просто использовать. Рассмотрим в качестве примера сервис Google Web Fonts.

Выбираете шрифт Open Sans, Droid Serif или Lato. Пишите код и вставляете его в элемент <head> HTML-документа. Все готово, чтобы ссылаться на него в CSS! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.

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

Такого не случится, если реализовать резервный вариант.

Насколько важно применение безопасных веб-шрифтов?

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

А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.

Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите, — один из стандартных вариантов. Например, Times New Roman.

Поэтому как на вашем экране текст может выглядеть просто ужасно.

А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows, Mac, Google, а также Unix и Linux.

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

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

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

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.

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

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

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

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

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

Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.

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

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

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

Comic Sans MS — забавная альтернатива для шрифтов с засечками.

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

Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica. А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию.

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

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

А если нет? Helvetica не подкачает!

СМСергей Марочканичавтор статьи «15 Best Web Safe Fonts»

Двадцатка лучших веб-шрифтов / Хабр

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

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

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

Спонсор перевода: Студия Айкен*

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

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

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

По этой причине почти каждый из двадцати ниже представленных шрифтов имеет свой платный вариант. Также представлены бесплатные версии из так называемого «шрифтохранилища» Typekit.

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

20. Avenir


Семейство: Sans serif
Дизайнер: Adrian Frutiger
Скачать или купить: Fonts.com

Дизайн Avenir’a разработан на основе вездесущего шрифта Futura (который был задуман как «Die Schrift für die Neue Zeit» — «Шрифт Нового времени»). Однако, по словам дизайнера Адриана Фрутигера, в шрифте Avenir заключено гораздо больше человечности. Несмотря на свою популярность в корпоративных кругах, его округлые геометрические формы и тонкая индивидуальность придадут дружественную улыбку даже самому серьезному содержимому.
Несколько лет спустя Акира Кобаяши завершила Avenir Next, шрифт, который стал усовершенствованной версией оригинала (в новую версию добавили курсив и капитель. )

19. FF Kava

Семейство: Sans serif
Дизайнер: Yanone Kaffeesatz
Скачать или купить: FontShop
Бесплатная версия шрифта вышла в свет во времена, когда поддержка браузерами правила @font-face была широко распространена, чем и заслужила свою популярность среди дизайнеров. В результате чего молодой немецкий дизайнер Янон попал в поле зрения одного из самых крупных в мире производителей цифровых шрифтов — компании FontShop FSI, что позже привело к рождению профессиональной версии данного шрифта.

18. Times New Roman

Семейство: Serif (cистемный шрифт)

Дизайнер: Victor Lardent, Stanley Morison
Каждый, кто создает списки на подобие нашего, не забудет об этом шрифте. Вероятно, самый распространенный шрифт. Разработан дизайнерами Стенли Морисоном и Виктором Лардентом.

17. Bree


Семейство: Sans serif
Дизайнер: José Scaglione, Veronika Burian
Скачать или купить: Typekit, Fontdeck


Полон индивидуальности, наглый и неряшливый, шрифт Bree может показаться годным лишь для заголовков, т.к. впервые мы увидели его на логотипе компании TypeTogether. Однако практика показывает, что Bree выглядит довольно изящно и в меньших своих размерах.
Bree является одним из немногих шрифтов, которые появились на свет в результате коллективной работы двух человек: Жозе Скаглионе и Вероники Буриан, студентов факультета Полиграфического Дизайна Британского Университета Reading. Который, в свою очередь, считается одним из лучших учебных заведений мира, подготавливающий талантливых полиграфических дизайнеров.

16. FF Trixie


Семейство: Печатная машинка
Дизайнер: Erik van Blokland
Скачать или купить: FontShop
Trixie — один из первых машинописных шрифтов.

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

15. Centro Sans pro


Семейство: Serif
Дизайнер: Panos Vassiliou
Скачать или купить: Fontdeck
Большое количество супер-семейств позволяет дизайнерам создавать смешанные виды шрифтов, где serif переплетается с sans serif. Это делается для улучшения читабельности и внешнего вида букв, одновременно. Шрифт Centro Sans pro и является одним из представителей таких супер-семейств.

14. Fedra Sans


Семейство: Sans serif
Дизайнер: Peter Bil’ak)
Скачать или купить: Typotheque
Еще один представитель супер-семейств, который начал свой путь в качестве корпоративного шрифта немецкой страховой компании Bayerische Rück.

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

13. Museo Slab


Семейство: Slab serif
Дизайнер: Jos Buivenga
Скачать или купить: Typekit, Fontdeck, Font Squirrel
Оригинальная версия Museo крайне популярна среди дизайнеров и является на половину бесплатной. Шрифт принадлежит к формату Opentype. Имеет поддержку большого количества языков.

12. Clarendon URW

Семейство: Slab serif
Дизайнер: Robert Besle, Hermann Eidenbenz
Скачать или купить: Typekit, Fontdeck, Font Squirrel
Классический британский шрифт с засечками (slab serif), без которого не обойдется ни один подобный список. Усовершенствованный Германом Эйденбенцом, он включает в себя несколько типов плотности и начертаний.

11. Proxima Nova


Семейство: Sans serif
Дизайнер: Mark Simonson
Скачать или купить: Typekit, Fontdeck
Невероятно гибкий и читабельный шрифт, является улучшенной версией Proxima Sans, используется во множествах сценариев. Имеет множество начертаний, что увеличивает количество шрифтов данного семейства до сорока двух.

10. FF Unit Slab


Семейство: Slab serif
Дизайнер: Эрик Спайкерман (Erik Spiekermann), Кристиан Шварц (Christian Schwartz), Крис Соверсби (Kris Sowersby)
Скачать или купить: FontShop
Шрифт успел полюбиться многим, не исключая меня. Может произвести кардинально противоположные впечатления на пользователя в различных своих плотностях. Что и делает его в каком-то роде уникальным шрифтом.

09. Calluna


Семейство: Serif
Дизайнер: Jos Buivenga
Скачать или купить: Typekit, Fontdeck, Font Squirrel
Появился на свет в качестве эксперимента над ранней версией Museo Slab и Calluna и стал первым серьезным шрифтом в карьере дизайнера Жоса Буйвенги.

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

08. Ronnia Condensed

Семейство: Sans Serif
Дизайнер: José Scaglione, Veronika Burian
Скачать или купить: Typekit
Самое подходящее слово для его описания — это универсальность. Лучше всего смотрится в заголовках. Используется в различных целях, поэтому вы можете увидеть его, как в заголовках новостей, так и в корпоративных отчетах предприятий.

07. Droid Sans

Семейство: Sans Serif
Дизайнер: Steve Matteson
Скачать или купить: Typekit, FontsLive, Webtype
Семейство шрифтов Droid было разработано дизайнером Стивом Маттесоном осенью 2006 года.

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

06. FF Tisa

Семейство: Serif
Дизайнер: Mitja Miklavcic
Митя Маклавчич создал шрифт для удовлетворения технологических и эстетических требований современных журналов. Он поставил перед собой цель разработать более мягкую и динамичную версиию шрифта. Благодаря невысокому контрасту своих очертаний Tisa великолепно читается даже в самых малых размерах, будь то на страницах книг, или, напечатанный лазерным принтером с низким разрешением.

05. FF DIN

Семейство: Sans serif
Дизайнер: Albert-Jan Pool
Скачать или купить: Typekit, FontShop
Современный шрифт, разработанный голландским дизайнером. Аббревиатура «DIN», в переводе с немецкого означает «Немецкий Институт Нормирования». Изначально использовался как текст на дорожных знаках и номерах квартир. Но вот уже на протяжении многих лет его сугубо деловые геометрические формы украшают немецкий веб-дизайн. В 1995 году был обновлен Альбертом-Яном Пулом, обновление включило в себя больше стилистических вариантов, а также новый формат DIN Rounded.

04. Helvetica

Семейство: Sans Serif
Дизайнер: Max Miedinger, Eduard Hoffmann
Скачать или купить: Fonts.com
Кажется, невозможно обсуждать предмет типографии без упоминания Helvetica. Шрифт заслужил статус легенды благодаря тому, что его использует чуть ли не каждый дизайнер в мире. Его имя и стиль известны общественности.
Helvetica был разработан, чтобы создать конкуренцию шрифту Akzidenz-Grotesk, и его первоначальным названием было — Die Neue Haas Grotesk. Шрифт олицетворяет Швейцарский стиль графического дизайна из далеких 1950-х. Но его широкое применение во всех формах дизайна привело к тому, что он в некоторой степени «приелся», поэтому и было разработано еще несколько его под-форм, таких как Arial. Тем не менее, он остается современной классикой.

03. Alternate Gothic No.1

Семейство: Sans serif
Дизайнер: Morris Fuller Benton
Скачать или купить: Fontdeck
Фантастический шрифт для написания заголовков. Alternate Gothic и его варианты остаются чрезвычайно популярным выбором для тех, кто нуждается в нелицеприятном, почти наглом шрифте. Четкий при относительно малых размерах. Являясь частицей американского индустриализма, выглядит великолепно и в цифровую эпоху.
Стал чрезвычайно популярен после того как Студия дизайна «The League of Moveable Type» создала его обновленную версию с открытыми исходниками.

02. FF Meta Serif

Семейство: Serif
Дизайнер: Christian Schwartz, Erik Spiekermann, Kris Sowersby
Скачать или купить: Typekit, FontShop
Эрик Шпикерман описывает свое семейство Meta как «приближенное к классике», и при этом откровенно скромничает, потому что шрифт Meta действительно является классикой, особенно версия без засечек. Это авторитетный шрифт, который великолепно работает с различными сценариями.

01. Georgia

Семейство: Serif
Дизайнер: Matthew Carter
Скачать или купить: Typekit, FontShop
Что? Системный шрифт во главе рейтинга? Как бы в это не было сложно поверить — Georgia является любимцем людей, работающих в сети. Возможно ответ кроется в том, что он был разработан в большей мере для «экрана» нежели для печати, а может быть, потому, что сумел воплотить в себе бесконечную красоту и понятность благодаря своей простоте.
Чрезвычайно четкий при малых размерах и величественный в своем курсивном варианте, Georgia подтверждает свою ценность, несмотря на изобилие альтернатив, и напоминает, что иногда, лучшие инструменты находятся прямо у нас под носом.

Впервые эта подборка была опубликована в .net Issue 208

* Мало что из этих шрифтов есть для кириллицы, поэтому эта подборка больше подойдет для «аутсорсеров». Будем надеятся, что скоро появится хоть часть этих и не только шрифтов для славянских языков на кириллице.

P.S. Для кого интересны только кириллические веб-шрифты, посмотрите вот эту подборку: lyncis.info/en/post/274

Стандартные и безопасные шрифты CSS

Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).

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

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

body {
	font-family: шрифт_1, шрифт_2, семейство;
}

CSS

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

'Times New Roman', Times, serif Съешь же ещё этих мягких французских булок
Georgia, serif Съешь же ещё этих мягких французских булок
Arial, Helvetica, sans-serif Съешь же ещё этих мягких французских булок
'Arial Black', Gadget, sans-serif Съешь же ещё этих мягких французских булок
Verdana, Geneva, sans-serif Съешь же ещё этих мягких французских булок
'Trebuchet MS', Helvetica, sans-serif Съешь же ещё этих мягких французских булок
Impact, Charcoal, sans-serif Съешь же ещё этих мягких французских булок
'Comic Sans MS', cursive, sans-serif Съешь же ещё этих мягких французских булок
'Courier New', Courier, monospace Съешь же ещё этих мягких французских булок

Далее о каждом шрифте подробнее:

1

Windows MacOS Unix/Linux Семейство
Times New Roman Times Nimbus Roman No9 L serif
CSS:
body {
	font-family: 'Times New Roman', Times, serif;
}

CSS

Пример шрифта:

2

Windows MacOS Unix/Linux Семейство
Georgia Georgia – serif
CSS:
body {
	font-family: Georgia, serif;
}

CSS

Пример шрифта:

3

Windows MacOS Unix/Linux Семейство
Arial Helvetica Nimbus Sans L sans-serif
CSS:
body {
	font-family: Arial, Helvetica, sans-serif;
}

CSS

Пример шрифта:

4

Windows MacOS Unix/Linux Семейство
Arial Black Gadget Nimbus Sans L sans-serif
CSS:
body {
	font-family: 'Arial Black', Gadget, sans-serif;
}

CSS

Пример шрифта:

5

Tahoma не является безопасным шрифтом.

Windows MacOS Unix/Linux Семейство
Tahoma Geneva – sans-serif
CSS:
body {
	font-family: Tahoma, Geneva, sans-serif;
}

CSS

Пример шрифта:

6

Windows MacOS Unix/Linux Семейство
Verdana Geneva DejaVu Sans sans-serif
CSS:
body {
	font-family: Verdana, Geneva, sans-serif;
}

CSS

Пример шрифта:

7

Windows MacOS Unix/Linux Семейство
Trebuchet MS Helvetica Garuda sans-serif
CSS:
body {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

CSS

Пример шрифта:

8

Lucida Sans Unicode не является безопасным шрифтом.

Windows MacOS Unix/Linux Семейство
Lucida Sans Unicode Lucida Grande Garuda serif
CSS:
body {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

CSS

Пример шрифта:

9

Windows MacOS Unix/Linux Семейство
Impact Charcoal CY – sans-serif
CSS:
body {
	font-family: Impact, Charcoal, sans-serif;
}

CSS

Пример шрифта:

10

Windows MacOS Unix/Linux Семейство
Comic Sans MS Monaco CY – sans-serif
CSS:
body {
	font-family: 'Comic Sans MS', cursive, sans-serif;
}

CSS

Пример шрифта:

11

Windows MacOS Unix/Linux Семейство
Courier New Courier Nimbus Mono L monospace
CSS:
body {
	font-family: 'Courier New', Courier, monospace;
}

CSS

Пример шрифта:

12

Lucida Console не является безопасным шрифтом.

Windows MacOS Unix/Linux Семейство
Lucida Console Monaco – monospace
CSS:
body {
	font-family: 'Lucida Console', Monaco, monospace;
}

CSS

Пример шрифта:

Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

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

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

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

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

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

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

Стандартные шрифты

Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows, а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS. Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.

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

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:

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

Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.

Но не все так просто. Покопаем детальнее.

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

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

Отдельные шрифты можно назвать безопасными с некоторыми оговорками.

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.

В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они поддерживают кириллицу, что немаловажно для рунета.

В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.

Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Impact
  7. Times New Roman
  8. Trebuchet MS
  9. Verdana

Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Шрифты поддерживающие кириллицу

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

Ниже приведена таблица соответствий шрифтов.

WindowsMac OSUnix/LinuxРодовое семейство
Arial BlackHelvetica CYNimbus Sans LSans-serif
ArialHelvetica CYNimbus Sans LSans-serif
Comic Sans MSMonaco CY* (см. ниже)cursive
Courier New* (см. ниже)Nimbus Mono LMonospace
Georgia* (см. ниже)Century Schoolbook LSerif
ImpactCharcoal CY* (см. ниже)Sans-serif
Times New RomanTimes CYNimbus Roman No9 LSerif
Trebuchet MSHelvetica CY* (см. ниже)Sans-serif
VerdanaGeneva CYDejaVu SansSans-serif

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

Например, если основным текстом макета является Arial, находим в табличке этот шрифт и в CSS пишем соответствующую ему строчку:

body { font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; }

body {

font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif;

}

Эта запись означает, что если у пользователя есть шрифт Arial (а он есть у всех пользователей Windows и всех пользователи Mac OS X), то страница отобразися этим шрифтом. Если же у пользователя нет этого шрифта, то страничка русскоязычного пользователя Mac OS 9 точно отобразится стандартным системным шрифтом Helvetica CY, а у пользователя Unix/Linux отобразися шрифтом Nimbus Sans L который установлен у 90% пользователей Unix/Linux. Если же пользователь Unix/Linux принадлежит в тем 10%, у которых нет этого шрифта, то страница отобразится тем шрифтом с засечками, который установлен для просмотра Web-страниц по умолчанию.

Кроме того, что в таблице учитываются шрифты Unix/Linux, там еще после обычного Helvetica идет какой-то странный значок CY. Давайте разбираться, что же это такое!

До выхода Mac OS X эта линейка имела следующее значение: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере. Но опять же немаловажный нюанс! У стандартного Mac OS 9 шрифта Helvetica нет кириллицы! Для русскоязычной страницы это означало следующее: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, который выводит нечитаемую информацию, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере.

Для правильного отображения этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, имеет смысл указывать такой же стандартный для Mac OS 9 шрифт Helvetica CY, содержащий кириллицу.

Прочтение линеек после выхода Mac OS X изменилось. Теперь для Windows/Mac OS X указывается один общий стандартный шрифт. А если мы хотим, чтобы замысел дизайнера смогли увидеть пользователи Mac OS 9, для них нужно в линейке шрифтов прописать шрифт содержащий кириллицу.

Таким образом хотя и не существует безопасных шрифтов, существуют безопасные линейки шрифтов. Их еще называют шрифтовыми CSS стеками. В эти линейки помимо стандартных шрифтов Windows/Mac OS X можно включать также эквивалентные шрифты из стандартного набора Mac OS 9 (которая не содержит по умолчанию «безопасных» шрифтов) и распространенных шрифтов Unix/Linux.

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

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

WindowsMac OSРодовое семейство
Lucida ConsoleMonacoMonospace
Lucida Sans UnicodeLucida GrandeSans-serif
TahomaGeneva CYSans-serif

А если без кириллицы?

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

WindowsMac OSUnix/LinuxРодовое семейство
Arial BlackGadgetNimbus Sans LSans-serif
ArialHelveticaNimbus Sans LSans-serif
Comic Sans MSMonacoTSCu_Comiccursive
Courier NewCourierNimbus Mono LMonospace
Georgia* (см. ниже)Century Schoolbook LSerif
ImpactCharcoalRekhaSans-serif
Times New RomanTimesNimbus Roman No9 LSerif
Trebuchet MSHelveticaGarudaSans-serif
VerdanaGenevaDejaVu SansSans-serif

Для шрифтов Arial, Courier New и Times New Roman при составлении линеек лучше указывать сначала шрифт для Unix/Linux, а затем для Mac OS. Это связанно с некоторой кривостью набора Linux шрифтов X11 core fonts set.

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

WindowsMac OSUnix/LinuxРодовое семейство
Lucida ConsoleMonaco—Monospace
Lucida Sans UnicodeLucida GrandeGarudaSans-serif
Palatino LinotypePalatinoGaruda**Sans-serif
TahomaGenevaKalimatiSans-serif

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

** В данной линейке шрифт Garuda имеет смысл ставить перед Palatino (см. пояснение выше).

Выводы:

  1. Абсолютно безопасных шрифтов не существует. Условно безопасными можно назвать следующие шрифты:
    • Arial
    • Arial Black
    • Comic Sans MS
    • Courier New
    • Georgia
    • Impact
    • Times New Roman
    • Trebuchet MS
    • Verdana
  2. Безопасные CSS стеки, учитывающие поддержку кирилицы в шрифтах, можно посмотреть в статье Безопасные шрифтовые CSS стеки для рунета.
  3. Если на странице поддержка кириллицы не важна, используем CSS стеки из статьи Безопасные шрифтовые CSS стеки для англоязычных текстов.

Информация была взята с ресурса http://www.xiper.net/

Теги: css, fonts, html, linux, macosx, safe, web, Windows, безопасные, браузер, вёрстка, отображение, список, шрифты

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

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

Очень хорошее обсуждение истории шрифтов взято из http://www. xnet.se/xpo/typetalk/ и заархивировано здесь.

Еще одна страница сравнения шрифтов здесь, заархивировано здесь. На этом же сайте есть более превосходный информация о шрифтах здесь, заархивировано здесь.

Другой документ, связывающий шрифты, находится здесь.

Наиболее безопасными для использования являются следующие шрифты:

  • Arial/Гельветика
  • Times New Roman / Times
  • Курьер Новый / Курьер

Другие варианты, которые обычно работают кроссплатформенно:

  • Палатино
  • Гарамонд
  • Книжник
  • Авангард

Шрифты, которые работают в Windows и MacOS, но не в Unix+X:

  • Вердана
  • Грузия
  • Комикс Санс MS
  • Требюше МС
  • Ариал, черный
  • Воздействие
Распространенные шрифты без засечек

Helvetica здесь дедушка, но Arial чаще встречается на современные ОС.

Гельветика

ABCDE abcde 012345 &*!,.
Helvetica — шрифт без засечек. Это хороший выбор для краткости текст, возможно, абзац или два в длину. Юникс и Макинтош на компьютерах всегда была Helvetica, и это родной шрифт на принтерах PostScript.

Ариал

ABCDE abcde 012345 &*!,.
Arial — почти копия Helvetica, слегка обновленная. Windows использует Arial вместо Helvetica.

Обычные шрифты с засечками

Times — дедушка шрифтов с засечками, но Times New Roman чаще встречается в последних ОС.

Раз

ABCDE abcde 012345 &*!,.
 Times (также называемое Times Roman) – это традиционный шрифт с засечками. шрифт. Он доступен на компьютерах Macintosh и Unix и является основной шрифт PostScript. Times был разработан для использования в качестве газеты текст столбца. Он имеет небольшой размер по сравнению с большинством других шрифтов.

Times New Roman

ABCDE abcde 012345 &*!,.
Times New Roman — это версия Times от Microsoft. Это доступно на компьютерах с Windows и большинстве компьютеров Macintosh.

Обычные моноширинные шрифты

Эти шрифты, разработанные для имитации машинописного текста, часто используются при написании кода. Курьер — дедушка, а самый последний В ОС есть Courier New.

Курьер

ABCDE abcde 012345 &*!,.
Courier — традиционный моноширинный шрифт. Он доступен на Компьютеры Macintosh и Unix, а также основной шрифт PostScript.

Курьер Новый

ABCDE abcde 012345 &*!,.
Courier New — это версия Courier от Microsoft. Большинство окон и Компьютеры Macintosh будут иметь Courier New.

Менее распространенные шрифты без засечек

Verdana популярен, но все еще новичок на сцене. стиль Тахомы находится на полпути между Верданой и Ариалом. Comic Sans MS часто понравился своей неформальностью. Avante Garde большой и просторный. Impact и Arial Black предназначены для титров и заголовки. Все шрифты в этом разделе страдают от Проблема в том, что на большинстве машин Unix нет шрифтов.

Вердана

ABCDE abcde 012345 &*!,.
Примерно с 2000 г. до середины 2002 г. Microsoft распространяла набор Веб-оптимизированные шрифты для бесплатного использования. Они перестали разрешать загружает, но по-прежнему отправляет шрифты вместе с Windows. Вердана — это замена без засечек. Его строчные буквы очень большие, по сравнению с общим размером шрифта, что облегчает текст читать в сети.

К сожалению, растяжка строчных букв Verdana имеет два недостатка. Одна проблема заключается в том, что растянутые буквы не выглядят правильно при печати — сравните их с шрифтом Arial, потому что пример. Другая проблема заключается в том, что у некоторых людей нет Verdana, и у этих людей могут возникнуть проблемы с чтением веб-страниц. страница, использующая Verdana. Проблема в том, что хотя 9 pt Verdana читается, 9 pt Arial не читается, а человек, у которого нет Verdana, вероятно, будет иметь свою сеть Браузер выбирает Arial в качестве замещающего шрифта.

Тахома

ABCDE abcde 012345 &*!,.
Tahoma — еще один веб-шрифт Microsoft. Это не так широко доступны как Verdana или Arial.

Ариал, черный

ABCDE abcde 012345 &*!,.
Arial Black — версия Arial, предназначенная для заголовков.

Комик Санс MS

ABCDE abcde 012345 &*!,.
Comic Sans MS — это шрифт без засечек с мягким закругленным начертанием.

Воздействие

ABCDE abcde 012345 &*!,.
Impact — это веб-шрифт Microsoft, разработанный для заголовков.

Авангард

ABCDE abcde 012345 &*!,.
Авангард или Век Готика. Принтеры HP называют это Avant Гардская готика.

Менее распространенные шрифты с засечками

Georgia — это оптимизированный для Интернета шрифт с засечками, но он все еще новичок. Palatino так же стар и устоялся, как и Times, но выглядит ужасно на последних Unix системы. Учебник века, Гарамонд и Книжник кажутся доступны в системах Unix, но я не уверен, насколько широко они находятся в системах Windows/Mac.

Грузия

ABCDE abcde 012345 &*!,.
Georgia — это веб-шрифт Microsoft. Он имеет засечки, но также имеет большие строчные буквы, похожие на Verdana. это красиво читаемый экранный шрифт, но имеет те же проблемы, что и Verdana делает: это выглядит плохо при печати, а постранично разработано для Грузии будет плохо выглядеть при отображении в Times из-за разницы в размер букв.

Палатино

ABCDE abcde 012345 &*!,.
Palatino — реже используемый шрифт с засечками. Он доступен на Компьютеры Macintosh и Unix, а также основной шрифт PostScript. Это доступен на компьютерах с Windows под альтернативными именами шрифтов.

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

Книжник

ABCDE abcde 012345 &*!,.
Книжник, также известный как Книжник в старом стиле. Не поставляется с WinXP. Поставляется с MS Office 2000.

Гарамонд

ABCDE abcde 012345 &*!,.
Гарамонд. Существует множество вариантов этого шрифта. Не поставляется с WinXP.

Учебник века

ABCDE abcde 012345 &*!,.
Century Schoolbook — это основной постскриптумный шрифт. Вы не можете полагаться на он присутствует на компьютерах с Windows. Не поставляется с WinXP.

Менее распространенные моноширинные шрифты

Andale Mono похож на Verdana и Georgia; это новый шрифт, не широко распространен и недоступен в Unix или на некоторых компьютерах с Windows.

Андале Моно

ABCDE abcde 012345 &*!,.
Andale Mono — еще один моноширинный шрифт Microsoft. Это имеет некоторое сходство с Монако. Не поставляется с WinXP.

30+ лучших безопасных веб-шрифтов для вашего следующего дизайна в 2023 году

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

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

Именно для этого и был написан этот пост: мы рассмотрим 31 самый красивый веб-безопасный шрифт и покажем вам, как именно внедрить их на ваш сайт WordPress.

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

Какие шрифты являются веб-безопасными?

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

Примером может служить вездесущий шрифт Arial, породивший тысячи «побочных продуктов».

Нужны ли веб-безопасные шрифты в 2023 году?

Доля рынка браузеров в 2019-2020 гг. (Источник изображения: StatCounter)

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

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

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

Безопасны ли веб-шрифты Google?

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

Безопасные веб-шрифты уже имеют готовые файлы шрифтов на большинстве устройств. Но не беспокойтесь об отсутствии слова «безопасный». Google Fonts полностью безопасны для использования для улучшения дизайна вашего веб-сайта. Но дополнительные HTTP-запросы к внешнему серверу могут замедлить скорость загрузки вашей страницы.

Эти веб-безопасные шрифты: а) 100% бесплатны для использования ✅ и б) их не нужно размещать где-либо еще, чтобы ваши посетители могли их увидеть ✅ Найдите все 30+ вариантов здесь ⬇️Нажмите, чтобы твитнуть

31+ лучший веб-безопасный Шрифты

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

Давайте сразу к делу.

1. Arial

Пример шрифта Arial

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Arial, Helvetica Neue, Helvetica, без засечек.

2. Baskerville

Пример шрифта Baskerville

Baskerville — относительно толстый шрифт с засечками, первоначально разработанный как гарнитура Джоном Баскервилем в 1750 году. типичный шрифт с засечками. Он хорошо поддерживается более новыми версиями ОС Apple и Microsoft.

Рекомендуемый набор шрифтов

Семейство шрифтов: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif.

3. Бодони МТ / Бодони 72

Пример шрифта Bodoni MT

Bodoni MT — это шрифт с засечками, такой как Times New Roman, который больше подходит для текста абзаца, чем для заголовков для большинства веб-сайтов. Bodoni MT по умолчанию доступен в Microsoft 10 и некоторых более ранних версиях. Bodoni 72 входит в состав macOS Sierra и более новых версий.

Рекомендуемый стек шрифтов

Семейство шрифтов: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif.

4. Calibri

Пример шрифта Calibri

Calibri — это стандартный шрифт Microsoft без засечек, который используется с момента его выпуска в Microsoft Office 2007. Он имеет мягкий, современный вид, с закругленными краями, чтобы подчеркнуть типичное ощущение без засечек, что делает его теплее, чем робот.

Рекомендуемый стек шрифтов

Семейство шрифтов: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, без засечек.

5. Calisto MT

Пример шрифта Calisto MT

Calisto MT — это шрифт с засечками, в котором засечки немного мягче и менее выражены, чем у большинства подобных гарнитур. Это стандартный шрифт Microsoft, включенный в большинство новых версий Windows. Эквивалентом macOS или iOS является шрифт Bookman Old Style.

Рекомендуемый стек шрифтов

Семейство шрифтов: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif.

6. Cambria

Пример шрифта Cambria

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Cambria, Georgia, serif.

7. Candara

Пример шрифта Candara

Candara — это шрифт без засечек. Это часть коллекции шрифтов Microsoft ClearType. Эквивалент macOS и iOS — Optima Regular. Неравномерная толщина штриха делает его немного менее современным и корпоративным, чем другие шрифты без засечек.

Рекомендуемый стек шрифтов

Семейство шрифтов: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, без засечек.

8. Century Gothic

Пример шрифта Century Gothic

Century Gothic — геометрический шрифт без засечек с очень чистым и сбалансированным видом. Это отличный шрифт для Интернета, особенно для заголовков и подзаголовков. Изначально он был разработан, чтобы составить конкуренцию шрифту Futura. Он включен в большинство операционных систем Microsoft и Apple.

Рекомендуемый стек шрифтов

Семейство шрифтов: Century Gothic, CenturyGothic, AppleGothic, без засечек.

9. Consolas

Пример шрифта Consolas

Consolas — это шрифт без засечек с уникальным подходом к дизайну. Все символы имеют одинаковую ширину, поэтому засечки используются только для буквы «I» и строчной «l». Это часть коллекции ClearType.

Рекомендуемый стек шрифтов

Семейство шрифтов: Consolas, monaco, monospace.

10. Copperplate Gothic

Пример шрифта Copperplate Gothic

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Copperplate, Copperplate Gothic Light, фэнтези.

11. Courier New

Пример шрифта Courier New

Courier New — моноширинный шрифт с засечками, в котором обычный текст намного тоньше, чем в большинстве других шрифтов с засечками и без засечек. Он имеет почти идеальное покрытие как Microsoft, так и Apple как на компьютерах, так и на мобильных устройствах.

Рекомендуемый набор шрифтов

Семейство шрифтов: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, моноширинный.

12. Dejavu Sans

Пример шрифта Dejavu Sans

Dejavu Sans — это шрифт без засечек с четкими прямыми линиями, почти возврат к классическим шрифтам без засечек, таким как Arial и Verdana.

Рекомендуемый стек шрифтов

Семейство шрифтов: Dejavu Sans, Arial, Verdana, без засечек.

13. Didot

Пример шрифта Didot

Didot — шрифт, вдохновленный оригинальными шрифтами Didot, использовавшийся 19Французское полиграфическое предприятие 19-го века, семья Дидо. Это опора Apple, поддерживаемая большинством их ОС и устройств.

Рекомендуемый стек шрифтов

Семейство шрифтов: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif.

14. Franklin Gothic

Пример шрифта Franklin Gothic

Franklin Gothic — это шрифт без засечек с необычно толстыми буквами, почти как жирная версия другого шрифта. Оригинальный шрифт был разработан в начале 20 века компанией American Type Founders. Это хороший выбор шрифта для заголовков, но не лучший выбор для основного текста.

Рекомендуемый стек шрифтов

Семейство шрифтов: Franklin Gothic, Arial Bold.

15. Garamond

Пример шрифта Garamond

Garamond — это шрифт с засечками, вдохновленный шрифтами, созданными парижским гравером XVI века Клодом Гарамондом. У него более мягкие и круглые края, чем у некоторых более стандартных шрифтов с засечками, таких как Times New Roman. Современные версии ОС Microsoft и Apple включают собственные версии шрифта Garamond.

Рекомендуемый стек шрифтов

Семейство шрифтов: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif.

16. Georgia

Пример шрифта Georgia

Близкий родственник Garamond, Georgia — еще один шрифт с засечками, в основном с закругленными краями и довольно теплым ощущением. Он был разработан для Microsoft в 1996 году и до сих пор является одним из самых распространенных шрифтов MS. Он поддерживается практически всеми версиями Windows и macOS.

Рекомендуемый набор шрифтов

Семейство шрифтов: Georgia, Times, Times New Roman, с засечками.

17. Gill Sans

Пример шрифта Gill Sans

Gill Sans — это шрифт без засечек с четкими четкими линиями, которые придают ему современный вид. Он не идеален для текста абзаца из-за отсутствия контраста между буквами и малого интервала. Но, как вы можете видеть в тексте примера, заголовок выглядит великолепно. Его поддерживают большинство устройств на базе iOS, macOS и Windows.

Рекомендуемый стек шрифтов

Семейство шрифтов: Gill Sans, Gill Sans MT, Calibri, без засечек.

18. Goudy Old Style

Пример шрифта Goudy Old Style

Goudy Old Style — это мягкий шрифт с засечками в старом стиле, с сильными засечками и старомодным внешним видом. Точки имеют форму ромба, а не обычные идеальные круглые круги большинства шрифтов с засечками. Он включен в большинство новых версий Windows.

Рекомендуемый стек шрифтов

Семейство шрифтов: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif.

19. Helvetica

Документальный фильм о шрифте Helvetica (Источник: Kanopy)

Helvetica, пожалуй, самый известный шрифт всех времен и, безусловно, один из немногих шрифтов, о котором есть собственный документальный фильм. Это современный шрифт без засечек, вдохновленный другими современными швейцарскими и немецкими шрифтами конца 19-го и начала 20-го веков.

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Helvetica Neue, Helvetica, Arial, без засечек.

20. Impact

Пример шрифта Impact

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

Он был частью исходных основных шрифтов для веб-пакета в 19 году.98. Он по-прежнему широко включен и поддерживается компьютерами и телефонами Apple и Windows по сей день.

Рекомендуемый стек шрифтов

Семейство шрифтов: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, без засечек.

21. Пример шрифта Lucida Bright

Lucida Bright

Lucida Bright — это шрифт с засечками в линейке шрифтов Lucida от Microsoft, разработанный для MS в 1991 году. Одной из отличительных черт этого шрифта является использование более квадратных и прочных засечек, например, на заглавной «Т» и «Л». Он включен по умолчанию в большинстве новых версий Windows, тогда как macOS обычно включает только шрифт без засечек Lucida Grande, что делает Georgia логичным запасным шрифтом.

Рекомендуемый набор шрифтов

Семейство шрифтов: Lucida Bright, Georgia, serif.

22. Lucida Sans

Пример шрифта Lucida Sans

Lucida Sans — это четкий гуманистический шрифт без засечек, разработанный специально для дополнения шрифтов с засечками в линейке Lucida. Разница в толщине обводки больше, чем в более чистых шрифтах без шрифтов, таких как Helvetica или Arial. Это заставляет его чувствовать себя немного менее футуристичным или роботизированным и более игривым. Из коробки это отличный шрифт для заголовков и CTA.

Рекомендуемый стек шрифтов

Семейство шрифтов: Lucida Sans, Helvetica, Arial, без засечек.

23. Microsoft Sans Serif

Пример шрифта Microsoft Sans Serif

Microsoft Sans Serif — это шрифт без засечек, впервые представленный в Windows 2000. Он является преемником шрифта MS Sans Serif, также известного как Helv (сокращение от Helvetica). Он вдохновлен и основан на Helvetica, ведущем шрифте без засечек в наше время.

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

Рекомендуемый стек шрифтов

Семейство шрифтов: MS Sans Serif, без засечек.

24. Optima

Пример шрифта Optima

Optima — это гуманистический шрифт без засечек с различной толщиной штриха и различной симметрией. Это делает его почти сделанным вручную, что борется с типичным ощущением массового производства шрифта без засечек. Это один из стандартных шрифтов Apple без засечек, который поддерживается большинством устройств iOS и macOS. Эквивалентом Microsoft является Segoe.

Рекомендуемый стек шрифтов

Семейство шрифтов: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, без засечек.

25. Palatino

Пример шрифта Palatino

Palatino — еще один шрифт с засечками в старом стиле, который отлично подойдет для любой интернет-газеты или журнала. Но он менее однороден, чем что-то вроде Georgia или Times New Roman, с разной толщиной штриха и формой.

Дизайнерский подход помогает смягчить резкие буквы, такие как k, l, x, y и z. Он также немного жирнее, чем другие шрифты с засечками. Эти два фактора помогают ему чувствовать себя немного теплее. Palatino входит в состав большинства устройств Windows и Apple.

Рекомендуемый стек шрифтов

Семейство шрифтов: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif.

26. Perpetua

Пример шрифта Perpetua

Perpetua — шрифт с засечками и уникальным дизайном, изначально созданный английским скульптором Эриком Гиллом. Есть резкий контраст в толщине штриха, например, посмотрите на строчную «е» или цифру «3». Это придает шрифту творческое, почти игровое качество. Обычно это шрифт Windows, но его близкий родственник Baskerville является стандартным для большинства устройств Apple.

Рекомендуемый стек шрифтов

Семейство шрифтов: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif.

27. Rockwell

Пример шрифта Rockwell

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, с засечками.

28. Segoe UI

Пример шрифта Segoe UI

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

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, без засечек.

29. Tahoma

Пример шрифта Tahoma

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

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Tahoma, Verdana, Segoe, без засечек.

30. Trebuchet MS

Пример шрифта Trebuchet MS

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

Рекомендуемый стек шрифтов

Семейство шрифтов: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, без засечек.

31. Verdana

Пример шрифта Verdana

Verdana, чистый шрифт без засечек, является еще одним основным продуктом Microsoft, который существует с 1996 года. Толщина штриха довольно мала для шрифта без засечек, что приводит к тонким, легко читаемым буквам. Вы можете без проблем использовать его как для текста абзаца, так и для заголовков. Он поддерживается практически всеми устройствами Apple и Windows.

Рекомендуемый стек шрифтов

Семейство шрифтов: Verdana, Geneva, без засечек.

Курсивные веб-шрифты

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

  • Segoe script
  • Ярость
  • Скрипт МТ
  • Снелл Раундхенд
  • Почерк Люсиды

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

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

Шрифты Web Safe Sans Serif

Sans в переводе с французского означает «без», поэтому sans serif, по сути, означает «без засечек». Засечка — это линия или штрих, добавляемый к более длинному штриху в письме. Например, маленькие вертикальные линии под верхней чертой заглавной буквы «Т», распространенные в заголовках газет или журналов. Шрифты без засечек являются наиболее распространенными и популярными в Интернете, поэтому у вас есть много вариантов на выбор:

  • Ариал
  • Калибри
  • Чандара
  • Век Готика
  • Консолас
  • Дежавю Санс
  • Франклин Готика
  • Джилл Санс
  • Гельветика
  • Люсида Санс
  • MS без засечек
  • Новая Гельветика
  • Оптима
  • Сего UI
  • Тахома
  • Требюше MS
  • Вердана

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

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

Но поверьте нам, это не так сложно, как вы думаете. Мы проведем вас через процесс шаг за шагом в нашем следующем разделе.

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

Если у вас есть сайт WordPress с последней темой Twenty Twenty, вы можете редактировать шрифты HTML, добавив пользовательский CSS в настройщик WordPress.

Откройте его, щелкнув ссылку Внешний вид > Настроить в меню, а затем развернув дополнительную вкладку CSS.

Настройщик WordPress — дополнительный CSS

Затем вам нужно использовать Chrome Dev Tools (или аналогичный инструмент для другого браузера), чтобы определить селекторы текста, который вы хотите изменить.

Например, вы можете проверить заголовок своего сообщения в блоге:

Chrome Dev Tools — проверить

Мы видим, что тема использует стандартный селектор «entry-title» для заголовка. Вы также можете выполнить поиск по атрибуту «font-family», чтобы увидеть, как тема стилизует текст и на каком уровне.

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

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

 h2.entry-title { семейство шрифтов: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold" ", "Arial Black", без засечек; }

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

WP Customizer — Новый шрифт заголовка

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

Например, если вы используете тег стиля в HTML-документах для применения кода CSS к каждой странице, вы можете редактировать там атрибут font-family.

Селектор Body CSS font-family

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

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

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

Пример таблицы стилей CSS 

Обычно это делается вверху. Если нет, вы можете выполнить поиск «font-family» с помощью редактора кода по вашему выбору.

Знаете ли вы, что переход на безопасные веб-шрифты может ускорить ваш сайт? 🚀 И что 70% потребителей говорят, что скорость страницы влияет на их решение о покупке? 😱 Две веские причины проверить этот список из 30+ веб-безопасных шрифтов ⬇️Нажмите, чтобы твитнуть

Резюме

Как и в случае с темами и плагинами, когда дело доходит до идей шрифтов, у вас нет недостатка в вариантах.

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

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

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

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

  • Простая настройка и управление на панели управления MyKinsta
  • Экспертная поддержка 24/7
  • Лучшее оборудование и сеть Google Cloud Platform на базе Kubernetes для максимальной масштабируемости
  • Интеграция Cloudflare корпоративного уровня для скорости и безопасности
  • Глобальный охват аудитории благодаря 35 центрам обработки данных и 275 точкам присутствия по всему миру

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

Web Safe и семейство веб-шрифтов с кодом HTML и CSS.

Стек шрифтов CSS


Полная коллекция стеков шрифтов CSS, безопасных для Интернета.

Arial

Win: 99,84%

Mac: 98,74%

Arial Black

Win: 98,08%

3

30601 Mac: 96.22%

Arial Narrow

Win: 88.39%

Mac: 94.77%

Arial Rounded MT Bold

Win: 59.53%

Mac: 95.14%

Avant Garde

Win: 0%

Mac: 1. 08%

Calibri

Win: 83.41%

Mac: 38.74%

Candara

Win: 83.08%

Mac: 34.41%

Century Gothic

Win: 87.62%

Mac: 53.15%

Franklin Gothic Medium

Win: 99.18%

Mac: 2.1%

Futura

Win: 1.26%

MAC: 94,41%

Женева

WIN: 2,08%

MAC: 99,64%

Gill SANS

WIN: 58,54%%

63% 9000.
    2% 9000

    63%.0706 Helvetica

    Win: 7.34%

    Mac: 100%

    Impact

    Win: 0%

    Mac: 95.14%

    Lucida Grande

    Win: 0%

    Mac : 100%

    Optima

    Win: 2.52%

    Mac: 93.69%

    Segoe UI

    Win: 75.36%

    Mac: 0%

    Tahoma

    Win: 99. 95%

    Mac: 91.71%

    Trebuchet MS

    Win: 99.67%

    Mac: 97.12%

    Verdana

    Win: 99.84%

    Mac: 99.1%

    Big Caslon

    Win: 0%

    Mac: 92.61%

    Bodoni MT

    Win: 55.81%

    Mac: 0%

    Book Antiqua

    Win: 86.09%

    Mac: 49.01%

    Calisto MT

    Win: 58. 43%

    Mac: 46.31%

    Cambria

    Win: 83.35%

    Mac: 35.32%

    Didot

    Win : 0%

    Mac: 93.51%

    Garamond

    Win: 86.47%

    Mac: 49.91%

    Georgia

    Win: 99.4%

    Mac: 97.48%

    Goudy Old Style

    Win: 58.11%

    Mac: 47.57%

    Hoefler Text

    Win: 0. 99%

    Mac: 92.61%

    Lucida Bright

    Win: 76.12%

    Mac: 99.64%

    Palatino

    Win: 99.29%

    Mac: 86.13%

    Perpetua

    Win: 66.54%

    Mac: 0%

    Rockwell

    Win: 65.94%

    Mac: 0%

    Rockwell Extra Bold

    Win: 66.1%

    Mac: 0%

    Baskerville

    Win: 60. 35%

    Mac: 93,33%

    раза Новая Roman

    WIN: 99,67%

    MAC: 97,48%

    Consolas

    WIN: 82,97%

    9000 2

    01010101010.

      .
        .
          .
            .
              .
                .
                  .
                    .
                      .
                        .
                          .
                            .
                              .
                                .
                                  .
                                    .
                                      .
                                        947.9001.0002 Win: 99.73%

                                        Mac: 95.68%

                                        Lucida Console

                                        Win: 99.18%

                                        Mac: 0%

                                        Lucida Sans Typewriter

                                        Win: 74.81%

                                        Mac: 99.64%

                                        Monaco

                                        Win: 2. 74%

                                        Mac: 99.82%

                                        Andale Mono

                                        Win: 4.16%

                                        Mac: 94.59%

                                        Copperplate

                                        Win: 66.87%

                                        Mac: 92.61%

                                        Papyrus

                                        Win: 70.37%

                                        Mac: 92.43%

                                        Brush Script MT

                                        Win: 59.64%

                                        Mac: 90.99%

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

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

                                        Связанные инструменты:

                                        Веб-шрифты

                                        Цветовые коды HTML

                                        Генератор .htaccess

                                        • 3
                                        • 3 Присоединяйтесь, чтобы получить доступ к дискуссионным форумам и расширенным функциям сайта.


                                          20 лучших HTML-шрифтов для использования в 2023 году — Учебники Hostinger

                                          HTML

                                          29 января 2023 г.

                                          Ирфан Ф.

                                          9 минут Чтение

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

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

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

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

                                          Загрузить полную HTML-шпаргалку

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

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

                                          Наиболее популярные примеры веб-безопасных шрифтов включают Arial , Times New Roman и Helvetica .

                                          Каковы категории шрифтов HTML?

                                          В типографике каждый шрифт является членом одного из пяти семейств шрифтов, классифицированных в соответствии с их сходством дизайна. Их:

                                          Cursive

                                          Cursive Шрифты, имитирующие рукописный ввод, обычно имеют буквы, соединенные вместе в петлеобразной плавной манере.

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

                                          Fantasy

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

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

                                          С засечками

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

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

                                          Популярные шрифты Serif включают Times New Roman , Cambria и Garamond .

                                          Sans-serif

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

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

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

                                          Monospace

                                          Каждая буква и символ в шрифтах Monospace имеют одинаковую ширину.

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

                                          20 лучших веб-безопасных шрифтов HTML

                                          Ниже приведены 20 безопасных веб-шрифтов HTML, которые вы можете применить к своему контенту.

                                          1. Arial

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

                                          Arial был основным шрифтом экрана из-за его удобочитаемости при масштабировании до любого размера. Фактически, это шрифт по умолчанию для Google Docs.

                                          Помимо этого, этот шрифт также популярен в печатных СМИ, таких как газеты и реклама.

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

                                          2. Arial Narrow

                                          Arial Narrow — один из 38 стилей семейства шрифтов Arial. По сравнению с оригинальным шрифтом, этот стиль предлагает гораздо более гладкий дизайн.

                                          Буквы кажутся узкими и сжатыми, с небольшим пространством между ними. Это делает Arial Narrow отличным выбором для минималистичных веб-сайтов.

                                          Отличные варианты сочетания шрифтов включают более жирные шрифты без засечек, такие как Verdana и Geneva .

                                          3. Times

                                          Times — это хорошо читаемый шрифт с засечками благодаря его заметному контрасту и сжатому стилю.

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

                                          Первоначально Times в основном использовалась в печатных СМИ, таких как газеты, и с тех пор стала ассоциироваться с журналистикой и научными работами.

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

                                          Кроме того, этот шрифт подходит для веб-сайтов с длинными блоками текста, таких как онлайн-редакции новостей и блоги.

                                          4. Times New Roman

                                          Times New Roman является разновидностью Times шрифт из шрифта с засечками.

                                          Это популярный текстовый шрифт, широко используемый в печатных СМИ, таких как журналы и книги, а также очень популярный шрифт HTML из-за его универсальности и разборчивости.

                                          Благодаря своему профессиональному стилю шрифт Times New Roman стал любимым шрифтом для формального контента новостных изданий и образовательных веб-сайтов.

                                          5. Helvetica

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

                                          Это популярный шрифт без засечек, используемый многими известными брендами. Например, Jeep, Microsoft, Motorola и BMW используют этот шрифт для своих логотипов.

                                          Помимо этого, правительство США также использует Helvetica в своих налоговых формах.

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

                                          6. Courier

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

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

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

                                          7. Courier New

                                          Этот шрифт является более тонкой и разборчивой альтернативой Courier . По этой причине электронные устройства в основном имеют код Courier New .

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

                                          Courier New доступен в четырех стилях: обычный, курсив, полужирный и полужирный курсив.

                                          8. Verdana

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

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

                                          Если вы ищете HTML-шрифт с хорошей читабельностью, этот шрифт — отличный выбор.

                                          9. Candara

                                          Candara впервые стала популярной благодаря ОС Microsoft Vista для улучшения читаемости на ЖК-дисплеях.

                                          Этот шрифт хорошо читается благодаря большому интервалу между символами, что делает его идеальным шрифтом для дисплеев.

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

                                          10. Женева

                                          Женева предлагает чистый и современный вид благодаря одинаковой длине, ширине и расположению.

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

                                          11. Calibri

                                          Calibri — широко используемый и популярный шрифт. Это шрифт по умолчанию для различных известных программ, таких как пакет Microsoft Office и Google Docs.

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

                                          Кроме того, Calibri работает с текстом самых разных размеров. Он очень разборчив и подходит как для цифровых, так и для экранных дисплеев.

                                          Благодаря чистому дизайну этот шрифт подходит для всех типов веб-сайтов.

                                          12. Optima

                                          Optima черпает вдохновение в классических латинских заглавных буквах. Он используется для передачи элегантности благодаря большому интервалу и дополнительным штрихам.

                                          В Optima у вас также есть возможность определить интервал между каждым символом.

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

                                          Optima лучше всего подходит для использования на дисплеях, например, в логотипах таких элитных брендов, как Estée Lauder и Marks and Spencer.

                                          13. Cambria

                                          Модель Cambria с очень равномерными интервалами и пропорциями была разработана для удобного чтения с экрана даже при отображении небольших размеров.

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

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

                                          Этот шрифт бывает обычным, полужирным, курсивным и полужирным курсивом.

                                          14. Garamond

                                          Garamond классифицируется как шрифт с засечками старого стиля.

                                          Это классический тип шрифта, широко используемый как в печатных, так и в цифровых дисплеях, включая серию книг доктора Сьюза, тома о Гарри Поттере и логотип Google.

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

                                          15. Perpetua

                                          Perpetua формальный, классический и элегантный. Шрифт был создан английским скульптором, на которого повлияли памятники и мемориальные надписи.

                                          Характеристики этого шрифта побудили Penguin Classics и Пенсильванский университет использовать Perpetua в своих публикациях.

                                          В общем, образовательная или информационная страница может извлечь большую пользу из этого шрифта.

                                          16. Monaco

                                          Monaco — это шрифт, который можно найти в приложениях Terminal и Xcode для macOS X.

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

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

                                          17. Didot

                                          Didot — это неоклассический шрифт, сочетающий классический дизайн с современными элементами.

                                          Уникальный дизайн шрифта можно найти на CBS News и The Late Show со Стивеном Колбертом.

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

                                          18. Brush Script

                                          Brush Script — современный рукописный шрифт, неформальный и непринужденный.

                                          Отличается каллиграфическим стилем, основанным на почерке. Из-за этого Brush Script MT превращается в красивый, но читаемый шрифт для вашего сайта.

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

                                          19. Lucida Bright

                                          Lucida Bright классифицируется как шрифт с засечками. Это одна из версий шрифта Lucida с большей контрастностью.

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

                                          Известным пользователем этого шрифта является журнал Scientific American.

                                          20. Медная пластина

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

                                          На странице веб-сайта этот шрифт может стать отличным вариантом для заголовков и заголовков.

                                          Этот шрифт стал известен после того, как Who Wants To Be A Millionaire использовал этот шрифт в своей торговой марке.

                                          Dishonorable Mention: Comic Sans

                                          Comic Sans был основан на надписях из журналов комиксов и должен был быть дружелюбным и непринужденным.

                                          Однако многие считают этот шрифт непрофессиональным и детским. Существует даже сообщество, которое поддерживает запрет Comic Sans в качестве шрифта.

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

                                          Зачем использовать веб-шрифт HTML?

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

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

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

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

                                          Как добавить HTML-шрифты в WordPress?

                                          Есть несколько способов добавить HTML-шрифты в WordPress. В этом разделе мы рассмотрим два популярных метода:

                                          Добавление шрифтов HTML вручную

                                          Добавление шрифтов вручную — отличный вариант, если вы хотите избежать плагинов или хотите добавить собственный шрифт на свой сайт WordPress.

                                          Сначала выберите и загрузите пользовательский шрифт от поставщика веб-шрифтов, такого как Adobe Fonts, TypeNetwork или Fonts.

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

                                          После загрузки файла загрузите его в каталог wp-content/themes/your-theme/fonts .

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

                                          Популярный метод дальнейшего оформления шрифта — использование встроенного CSS. Он добавляет стили к одному элементу HTML с атрибутом стиля CSS.

                                          Вот пример того, как встроенный CSS может выглядеть как элемент HTML:

                                           
                                          Встроенный CSS в красном цвете
                                           

                                           Добавление HTML-шрифтов с помощью плагинов 
                                           Существует множество плагинов для добавления HTML-шрифтов на ваш сайт WordPress. Однако мы сузили список до двух наиболее популярных вариантов.
                                            Easy Google Fonts 
                                           Easy Google Fonts автоматически загружает шрифты из каталога Google Fonts. Этот плагин также работает с любой темой WordPress.
                                           Начните с установки и активации плагина. После этого перейдите к  Внешний вид  ->  Настройте  на панели администратора WordPress.
                                           Оттуда выберите  Типографика  ->  Типографика по умолчанию  , и вам будут представлены текстовые элементы, такие как заголовки и абзацы.
                                           Выберите элемент, который вы хотите стилизовать. Перейдите на вкладку  Font family  и щелкните раскрывающееся меню, чтобы выбрать шрифт.
                                           После того, как вы выбрали шрифт, вы можете продолжить настройку веса и стиля, размера шрифта и атрибута цвета, наблюдая за изменениями в реальном времени.
                                           Когда вы будете удовлетворены результатом, нажмите  Опубликовать  .
                                            Использовать любой шрифт (UAF) 
                                           С помощью этого плагина загрузите любой пользовательский шрифт, и UAF автоматически преобразует его в веб-безопасный шрифт.
                                           После установки плагина на панели администратора WordPress появится вкладка  Use Any Font . Нажмите на нее и активируйте свой ключ API.
                                           После завершения проверки добавьте свои  .ttf  ,  .otf  и  .woff  файлы шрифтов и нажмите «Загрузить», чтобы UAF преобразовал пользовательские шрифты в безопасные веб-шрифты.
                                           Кроме того, UAF также совместим с Flatsome для настройки живого шрифта в темах Flatsome.
                                           Заключение 
                                           Использование веб-шрифта HTML позволит вашему сайту выглядеть одинаково на разных устройствах. Кроме того, это поможет создать профессиональный, формальный или элегантный вид веб-сайта, в зависимости от используемого шрифта.
                                           В этой статье мы предоставили 20 лучших веб-безопасных шрифтов, которые помогут вам принять решение. Давайте вспомним некоторые из вариантов:
                                          •   Arial  — классический шрифт, который можно использовать на всех типах сайтов.
                                          •   Times New Roman  — отличный вариант для новостных и образовательных сайтов.
                                          •   Cambria  — универсальный вариант с обычным, полужирным, курсивным и полужирным курсивом.
                                          •   Monaco  — если у вас есть веб-сайт о программировании или играх, это отличный шрифт для декоративных текстов.
                                           Имейте в виду, что каждый шрифт уникален, поэтому убедитесь, что вы выбрали тот, который удобочитаем и представляет ваш бренд.
                                           Ирфан считает, что технологии и Интернет могут значительно улучшить нашу жизнь. Вот почему он делится своим опытом блоггера WordPress, чтобы обучать других. В свободное время Ирфан любит хорошие фильмы и книги.
                                           Подробнее от Ирфана Ф.
                                           Веб-шрифты и веб-шрифты, объяснение 
                                           Если вы хотите, чтобы ваш текст правильно отображался на всех устройствах, использование веб-шрифтов имеет решающее значение.
                                           Представьте, что вы создаете великолепный веб-сайт, обращая особое внимание на такие детали, как интервалы, выравнивание и общую эстетику, а затем обнаруживаете, что ваш текст выглядит по-разному на определенных устройствах. Внезапно ваш идеально разработанный дизайн омрачен неуклюжими разрывами текста или, что еще хуже, нечитаемыми символами.
                                           Вот почему вам нужно использовать веб-безопасные шрифты.
                                           Что такое веб-безопасные шрифты? 

                                           Безопасные веб-шрифты — это шрифты, предустановленные на большинстве компьютеров и устройств, независимо от операционной системы. Использование этих шрифтов дает вам больше шансов, что ваш текст будет отображаться так, как задумано.
                                           Лучшие веб-безопасные шрифты для использования в ваших проектах 
                                           Рассмотрите некоторые из этих шрифтов для своих веб-страниц.
                                           Доступные веб-безопасные шрифты 
                                           Веб-безопасные шрифты не всегда доступны. Помните — веб-безопасность относится только к тому, установлен ли шрифт по умолчанию на большинстве устройств. Чтобы шрифт был доступным, он также должен быть удобочитаемым для людей с нарушениями зрения и чтения. 
                                           Вообще говоря, лучшими безопасными веб-шрифтами, которые также доступны, являются:
                                          •  Arial (без засечек)
                                          •  Arial Black (без засечек)
                                          •  Tahoma (без засечек)
                                          •  Times New Roman (с засечками)
                                          • 2
                                          • 2
                                          •  Verdana (без засечек) 
                                           Но имейте в виду, что при использовании в веб-дизайне на доступность различных шрифтов могут влиять такие факторы, как декоративные элементы, размер и вес шрифта, цветовой контраст.
                                           Многие декоративные шрифты и шрифты с засечками затрудняют различение букв, особенно когда шрифты имитируют почерк или курсив. Ненужные украшения и переполненные буквы могут вызывать затруднения у многих читателей и замедлять их работу.
                                           Размер, вес и цветовой контраст также имеют большое значение. Например, тонкие шрифты очень трудно читать на экране, особенно в абзацах. И даже такие популярные шрифты, как Arial или Verdana, могут быть трудны для чтения, если существует низкий цветовой контраст между цветами шрифта и фона. 
                                           Дополнительные советы по доступной веб-типографике см. на уроке типографики Webflow University.
                                           Дополнительные веб-шрифты 
                                           Хотя эти шрифты не отмечены золотой звездой за доступность, они входят в стандартную комплектацию операционных систем Windows и Apple. Эти веб-безопасные шрифты могут хорошо работать при использовании в паре шрифтов — с более доступным шрифтом для больших блоков текста и стандартными веб-безопасными шрифтами для таких элементов, как заголовки и заголовки. 
                                           Популярные веб-безопасные шрифты:
                                          •  Courier New (моноширинный)
                                          •  Georgia (с засечками)
                                          •  Impact (без засечек)
                                          •  Trebuchet MS (без засечек)
                                            •  900 Популярные шрифты Helvetica Калибри отсутствуют в этом списке. Это фавориты дизайнеров — у Helvetica даже есть собственный документальный фильм — но они не являются стандартными для разных операционных систем. Windows больше не поддерживает Helvetica и обычно заменяет его на Arial, что может вызвать проблемы с пробелами. Calibri — это шрифт Microsoft, поэтому он не входит в стандартную комплектацию iOS.
                                             Мы не упомянули здесь  каждый  безопасный веб-шрифт, но будьте осторожны с заявлениями о более чем 30 безопасных веб-шрифтах. Иногда шрифты Microsoft, такие как Calibri, Cambria и Garamond, помечаются как веб-безопасные, потому что Microsoft Windows так широко используется. Однако мы не можем предполагать, что шрифты, созданные Microsoft, будут корректно отображаться во всех браузерах и на всех устройствах. В то время как ПК и Mac могут включать такие шрифты, как Comic Sans, по умолчанию, операционные системы iOS и Android могут не работать, а это означает, что эти шрифты могут не работать на мобильных устройствах. 
                                             Веб-шрифты и веб-безопасные шрифты 
                                             Как ни странно, веб-шрифты технически не являются веб-безопасными, поскольку они не устанавливаются на большинстве устройств по умолчанию. Но, как вы, наверное, заметили, веб-безопасные шрифты очень ограничены. Вот где на помощь приходят веб-шрифты.
                                             Веб-шрифты представляют собой прекрасную альтернативу безопасным веб-шрифтам, поскольку они размещаются в Интернете, а затем загружаются браузером при отображении веб-страницы. Чтобы использовать веб-шрифты, вам необходимо загрузить шрифты на свой веб-сайт и либо самостоятельно разместить (на своем собственном сервере), либо использовать стороннюю службу доставки шрифтов, такую ​​как Google Fonts или Adobe Fonts.
                                             Для самостоятельного размещения вам необходимо установить шрифт, а затем написать код @font-face, который ссылается на файл шрифта в ваших собственных таблицах стилей CSS. Службы доставки шрифтов генерируют этот код для вас, так что вам просто нужно скопировать пару строк кода в ваш HTML.
                                             В Webflow вы можете использовать интеграцию Google Fonts или Adobe Fonts, чтобы легко использовать веб-шрифты. 
                                             Как и где использовать шрифты, которые не являются веб-безопасными  
                                             Типографика — это само по себе искусство, поэтому может быть неприятно чувствовать себя ограниченным в выборе шрифтов, особенно если вы любите создавать свои собственные шрифты. Но то, что шрифт не является веб-безопасным или доступен как веб-шрифт, не означает, что ему не место в сети — вам просто нужно подумать, где и как вы его используете.
                                             Изображения и анимация 
                                             Если шрифт является частью изображения или анимации, вам не нужно беспокоиться о том, установлен ли этот шрифт на компьютерах посетителей веб-сайта. Главные изображения и текстовая анимация — отличное место, чтобы продемонстрировать свои навыки пользовательской типографики.
                                             Но не увлекайтесь этим обходным путем. Использование изображений для передачи информации может вызвать серьезные проблемы с доступностью, поскольку программы чтения с экрана не могут анализировать текст из файлов изображений. Средства чтения с экрана относятся к замещающему тексту, прикрепленному к изображениям, поэтому так важно включать подробный замещающий текст в каждое изображение, которое передает информацию. 
                                             С резервными шрифтами 
                                             Резервные шрифты позволяют использовать пользовательские шрифты на вашем веб-сайте, обеспечивая при этом возможность чтения текста большинством посетителей. Webflow автоматически назначает резервные шрифты для пользовательских шрифтов, но в некоторых конструкторах веб-сайтов вам потребуется установить резервные шрифты вручную.
                                             Имейте в виду, что ваш резервный шрифт не будет идеальной заменой — различия в межбуквенном интервале и толщине шрифта могут повлиять на то, как текст будет отображаться на странице.
                                             Узнайте больше об использовании пользовательских и резервных шрифтов. 
                                             Веб-безопасность не должна быть скучной  
                                             Никто не просит вас разрабатывать дизайн всего сайта, используя только Arial. Просто помните о том, как вы используете шрифты, которые не настолько безопасны для Интернета — резервируйте их для заголовков или изображений и всегда устанавливайте резервные шрифты.
                                             Узнайте больше об использовании пользовательских шрифтов или продемонстрируйте отличную типографскую работу, которую вы уже проделали, отправив свой сайт на Made in Webflow. 
                                             7 марта 2022 г. 
                                             Ресурсы 
                                             22 лучших веб-безопасных шрифта для использования на вашем веб-сайте 
                                             Независимо от того, являетесь ли вы начинающим профессиональным веб-дизайнером или занимаетесь созданием бизнес-сайтов своими руками, вы, возможно, сталкивались с термином «веб-безопасные шрифты». Это важный элемент любого успешного дизайна, но найти и использовать лучшие шрифты для Интернета может быть непросто.
                                             К счастью, веб-безопасные шрифты легче найти и внедрить на ваш сайт, чем вы думаете. Они не только обеспечивают единообразие вашего бренда, но и обеспечивают преимущества с точки зрения взаимодействия с пользователем (UX) и поисковой оптимизации (SEO).
                                             В этой статье объясняется, что такое веб-безопасные шрифты и почему они важны с точки зрения веб-дизайна. Затем мы поделимся некоторыми популярными примерами, ресурсами, где их можно приобрести, и инструкциями по их использованию. Не стесняйтесь использовать ссылки ниже, чтобы перейти к разделу, который вас больше всего интересует.
                                            •  Знакомство с веб-безопасными шрифтами
                                            •  22 веб-безопасных шрифта для использования на вашем веб-сайте
                                            •  Где скачать веб-безопасные шрифты
                                            •  Как добавить веб-безопасные шрифты на ваш сайт
                                             Нам предстоит многое рассказать, так что приступим!
                                             Введение в веб-безопасные шрифты (и почему они важны) 
                                             Веб-безопасный шрифт — это просто шрифт, который отображается на большинстве устройств, включая настольные и мобильные. Как правило, они предустановлены в каждой операционной системе (ОС).
                                             Это важно, потому что, если посетитель попытается просмотреть ваш веб-сайт и использует шрифт, не установленный на его устройстве, он увидит вместо него стандартный шрифт, такой как Arial или Times New Roman. В некоторых случаях ваш контент может даже стать нечитаемым на определенных устройствах.
                                             Конечно, последняя ситуация нежелательна, так как пользователи, как правило, не будут оставаться на вашем сайте, если они не могут читать ваш сайт. Однако даже необходимость отображать стандартное семейство шрифтов может нарушить общий дизайн вашего веб-сайта. Это также может привести к несоответствиям в вашем брендинге.
                                             В некоторых случаях использование веб-безопасных шрифтов может сократить время загрузки ваших страниц. Поскольку они предустановлены в большинстве популярных операционных систем, современным браузерам не нужно загружать их с вашего сервера при отображении вашего сайта. Это может улучшить как UX, так и SEO.
                                             22 лучших веб-безопасных шрифта для использования на вашем веб-сайте 
                                             К счастью, существует множество различных веб-безопасных шрифтов, которые вы можете выбрать при разработке своего сайта. Найти тот, который соответствует тону и индивидуальности вашего бренда, не должно быть слишком сложной задачей.
                                             Чтобы дать вам преимущество, мы собрали для вас несколько популярных вариантов. Давайте начнем с основ, а затем рассмотрим еще несколько уникальных вариантов.
                                             1. Ариал 
                                             Многие дизайнеры считают Arial простым или скучным, но вы не можете отрицать, что это проверенный и надежный веб-шрифт. Это идеально подходит для использования в качестве запасного варианта для более необычного (и не всегда доступного) шрифта. Кроме того, это очень разборчиво.
                                             2. Times New Roman 
                                             Если вы цените надежность и простоту Arial, но предпочитаете шрифт с засечками, вам подойдет Times New Roman. Хотя ему также не хватает индивидуальности, вы можете быть уверены, что его можно будет просмотреть на любом устройстве.
                                             3. Helvetica 
                                             Helvetica — это шрифт без засечек, который многие предпочитают в качестве альтернативы Arial. Он специально разработан, чтобы быть трудолюбивым и лишенным индивидуальности, что делает его полезным для документации или другого контента без излишеств, который вы хотите убедиться, что он читаем.
                                             4. Calibri 
                                             Calibri — еще один базовый шрифт без засечек, похожий на Helvetica и Arial. Уже несколько лет он является шрифтом по умолчанию для Microsoft Office и является отличным выбором для современных предприятий и сайтов электронной коммерции. Используя скромный, ненавязчивый шрифт, вы можете привлечь больше внимания к своим продуктам и услугам.
                                             5. Georgia 
                                             Стильный шрифт Georgia с засечками имеет неподвластный времени внешний вид, который добавляет тон и стиль вашему веб-сайту, не перегружая дизайн. Он идеально подходит для блогов, посвященных образу жизни, и для брендов, которым нужен более мягкий, не слишком резкий вид.
                                             6. Камбрия 
                                             Камбрия похожа на Джорджию, но немного более современная. Его засечки немного тоньше, что облегчает чтение, особенно на небольших экранах.
                                             7. Verdana 
                                             Verdana была разработана специально для использования на экране, поэтому ее особенно легко читать на всех устройствах. Он имеет классический вид и, конечно же, не будет отвлекать от вашего контента. Он хорошо адаптируется к заголовкам или основному тексту, поэтому вы можете использовать его практически для любого контента.
                                             8. Tahoma 
                                             Tahoma – еще один четкий и легко читаемый шрифт без засечек. Он достаточно гибкий, чтобы хорошо работать с бизнес-сайтами, блогами, творческими портфолио или чем-то еще, для чего он вам нужен. Персонажи чистые, однородные и приятные для глаз.
                                             9. Trebuchet 
                                             Разработанный для удобочитаемости и использования в вывесках, Trebuchet идеально подходит для заголовков и заголовков. Он также сохраняет свою читаемость при меньших размерах, поэтому не стесняйтесь использовать его и в основном тексте.
                                             10. Century Gothic 
                                             Гладкий, четкий и геометрический стиль Century Gothic делает смелое заявление в заголовках и названиях. Если Arial и Helvetica слишком просты на ваш вкус, но вам все же нужен четкий шрифт без засечек для вашего сайта, стоит рассмотреть этот шрифт.
                                             11. Didot 
                                             Классическая, элегантная Didot создает интеллектуальный образ, который хорошо подходит для университетского сайта или даже для некоторых блогов или стартапов. Он отличается чистыми прямыми линиями с минималистичными засечками, которые не слишком отвлекают от текста.
                                             12. Bodoni 
                                             Этот привлекательный шрифт с засечками представляет собой более интересную альтернативу стандартному Times New Roman. Более резкий, чем Джорджия, но не такой бросающийся в глаза, как Courier New или Rockwell, Bodoni – отличный компромисс, если вы хотите, чтобы ваш текст обладал изюминкой, но не брался за дизайн.
                                             13. Calisto 
                                             Мягкие линии и изящные засечки Calisto придают ему женственный вид, который идеально подходит для ведения блога о стиле жизни или стартапов, управляемых женщинами. Его узкий интервал может не подходить для длинных блоков текста, но он будет потрясающе смотреться в заголовках и названиях.
                                             14. Candara 
                                             Представленный в коллекции шрифтов ClearType от Microsoft, шрифт Candara часто считается одним из менее современных шрифтов без засечек. Он демонстрирует открытое и непринужденное отношение, которое может придать запоминающийся тон вашему веб-сайту и бренду.
                                             15. Optima 
                                             Может быть сложно придать индивидуальности гладкому и чистому шрифту без засечек, но Optima с этим справляется. Он достаточно запоминающийся, чтобы хорошо подходить для развития индивидуальности вашего бренда, но при этом длинные отрывки не будут казаться загроможденными или пугающими для читателей.
                                             16. Palatino 
                                             Palatino – классический шрифт с засечками, который идеально подходит для заголовков цифровых журналов и другого текста, который должен громко заявить о себе. Он кажется немного менее структурированным, чем Джорджия, и имеет гораздо больше индивидуальности, чем ваш стандартный Times New Roman.
                                             17. Quicksand 
                                             Quicksand – это современный шрифт, который хорошо смотрится на мобильных устройствах. Это просто и не слишком кричаще, но все же демонстрирует достаточно причудливую индивидуальность, чтобы ваш основной текст оставался интересным. Этот довольно обтекаемый шрифт также легко читается, что делает его хорошим выбором для сайтов с большим количеством текста.
                                             18. Courier New 
                                             Courier New — это причудливый шрифт, который хорошо узнаваем и обладает яркой индивидуальностью. Это идеальный выбор, если вы хотите, чтобы ваш сайт выглядел более винтажно, и ищете сильный шрифт, который передаст индивидуальность вашего бренда.
                                             19. Rockwell 
                                             Отличительные засечки Rockwell напоминают Courier New, только без чрезмерно винтажной атмосферы. Его может быть немного сложнее читать на небольших экранах и в меньших размерах, но это может быть забавным шрифтом для заголовков и заголовков.
                                             20. Garamond 
                                             Garamond — это вечный шрифт, разработанный в 1615 году. К сожалению, его легче читать в печатном виде, чем в Интернете. Тем не менее, вы все равно можете использовать его в качестве акцентного типографского шрифта в заголовках или, возможно, даже как часть вашего логотипа.
                                             21. Copperplate 
                                             Этот характерный шрифт трудно не заметить, он придает вашему тексту индустриальный, официальный вид. Copperplate – идеальный шрифт для привлечения внимания к заголовкам или логотипу. К сожалению, это может стать трудным для чтения при использовании для меньшего содержимого тела.
                                             22. Impact 
                                             Ударный шрифт с метким названием – это шрифт, который вы можете зарезервировать для заголовков и заголовков. Этот тяжелый шрифт производит впечатление и привлекает внимание читателей, когда они прокручивают ваш блог или просматривают ваши сообщения в поисках ключевой информации.
                                             Получите содержимое, доставленное прямо в ваш почтовый ящик 
                                             Подпишитесь на наш блог и получайте отличный контент, точно так же, как это, доставленный прямо в ваш почтовый ящик.
                                             Где скачать безопасные веб-шрифты 
                                             Короче говоря, вам не нужно загружать безопасные веб-шрифты. Поскольку они уже предустановлены во всех популярных операционных системах, вы можете просто закодировать их на своем сайте с помощью CSS, и они должны отображаться на всех устройствах должным образом.
                                             При этом, если вы по какой-то причине чувствуете необходимость загрузить веб-безопасный шрифт, вы можете найти его в большинстве популярных библиотек шрифтов, таких как Google Fonts, DaFont или FontSpace.
                                             Однако имейте в виду, что тот факт, что шрифт доступен через один из этих ресурсов, не означает автоматически, что он безопасен в Интернете.
                                             Как добавить безопасные веб-шрифты на свой веб-сайт 
                                             Вы можете добавить шрифты на свой веб-сайт с помощью CSS. Лучше всего указать предпочтительный шрифт (который может быть или не быть безопасным для Интернета) и резервный шрифт (который всегда должен быть безопасным для Интернета). Таким образом, если выбранный вами основной шрифт не совместим с операционной системой пользователя, вы все равно можете сказать о резервном шрифте, который отображается вместо него.
                                             Существует несколько различных вариантов добавления CSS для включения веб-шрифтов на вашем веб-сайте. Если вы используете WordPress, вы можете поместить его в раздел «Дополнительные CSS» настройщика.
                                             Кроме того, вы можете изменить шрифт вашего веб-сайта в его таблице стилей (style.css). В этом файле должен быть раздел шрифтов и гарнитур, где вы можете указать, какие шрифты следует использовать для разных типов текста.
                                             Вот пример:
                                             p {семейство шрифтов:Montserrat,Arial,sans-serif; } 
                                             В этом фрагменте мы настроили текст абзаца так, чтобы сначала отображался шрифт Montserrat.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *