Шрифты стандартные web – Стандартные шрифты в разных операционных системах (Windows, Mac OS) / Веб студия is.Digital

Содержание

Системные шрифты, подключение системных шрифтов к web странице

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

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

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

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

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

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

Свойство шрифтов font-family

Свойство font-family — семейства шрифтов, сгруппированные по определенным признакам.

Родовые семейства:
  • serif — шрифты с засечками на концах;
  • sans-serif — шрифты без засечек;
  • cursive — шрифты курсивного начертания;
  • fantasy — декоративные шрифты;
  • monospace — моноширинный шрифт(с буквами одинаковой ширины).

Таким образом просто подбираются похожие шрифты из разных операционных систем и через запятую подключаются к интернет странице.

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

Просто проследите логику и все станет предельно ясно.

body {     
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; 
}
Разберем написанное:
  • OC Windows — Arial;
  • OC Mac OS — Helvetica CY;
  • OC Unix/Linux — Nimbus Sans L;
  • Родовое семейство — sans-serif.

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

На основе OC Windows был составлен список из нескольких безопасных шрифтов.

  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

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

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

Таблица соответствия и принадлежности шрифтов к определенному семейству:

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

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

Подключение системных шрифтов к сайту

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

body {
    /* подлючаем шрифт к всему документу */
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
    /* дополнительно устанавливаем размер шрифта */
    font-size: 16px;
    /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */
    font-weight: 400;  
}

А вот так подключаются системные шрифты в Bootstrap 4 framevork: Шрифты подключаются с расчетом на мобильные устройства.

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
Назначаем шрифт для заголовков

h2, h3, h4, h5, H5, H6 — здесь аналогично, только устанавливаем значение жирности, для выделения заголовков:

h2, h3, h4, h5, h5, h6 {
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к заголовкам */
	font-weight: 600; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
}
Присваиваем шрифт только параграфам:
p {
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
	font-weight: normal;
	font-size: 16px; 
}
Построчно это выглядит так:
  1. Подлючаем шрифт к параграфам, можно применять к спискам li, блокам div, формам form и другим элементам;
  2. Устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold;
  3. Дополнительно устанавливаем размер шрифта параграфам.

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

<p>Здесь параграф с подключаемым шрифтом</p>

А в таблице CSS прописать следующий код:

.main-font { 
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; 
	font-weight: normal;
	font-size: 16px;
}

Теперь, каждому тегу — элементу html с классом .font (называйте как вам угодно), будет присвоен шрифт Arial, с нормальной (400), жирностью и размером 16 пикселей.
Аналогично можно присвоить разные шрифты к спискам li, таблицам table, к целым блокам div, к отдельным словам, или словосочетаниям.

Подключение шрифтов непосредственно в HTML документе

Непосредственно в HTML документ шрифты подключаются аналогично CSS файлу, разница лишь в синтаксисе. Можно подключит шрифты в заголовке документа — между тегами <head></head> (аналогично CSS файлу) , либо inline — присвоение свойств напрямую к html тегам.

Подключаем шрифты в заголовке, между тегами <head></head>. Для этого в html документ добавьте такой код:

<head>
<!--    Начало кода-->
    <style>
        body {
            font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
            font-size: 16px;
            font-weight: 400;
        }        
    </style>
<!--    Окончание кода-->
</head>

Все аналогично подключению в CSS файле.

Подключение шрифтов inline

Непосредственно к элементам сайта. Приведу несколько примеров:

Подключаем шрифт к параграфу
<p>Здесь параграф с текстом</p>
Выделяем жирным шрифтом отдельное слово и присваиваем отдельный от основного шрифт
<p>Здесь параграф с текстом, а это <span>слово</span>, которое нужно выделить жирным</p>
Выделяем жирным шрифтом ссылку и присваиваем отдельный от основного шрифт
<p>Это простой текст <a href="#">Здесь ссылка</a> это тоже простой текст</p>

Аналогично назначаем шрифты любому html тегу.

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

На заметку — Системные шрифты в Bootstrap 4

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Смотрите также

Стандартные веб шрифты кириллица. Верстальщику о шрифтах. Безопасные шрифты

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts ). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены

в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц и его новое свойство @font-face ; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family , облегчающее эту задачу.

Список
Значение @font-family Windows Mac Семейство
Arial, Helvetica, sans-serif Arial Arial, Helvetica sans-serif
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget sans-serif
"Comic Sans MS", cursive Comic Sans MS Comic Sans MS 5 cursive
"Courier New", Courier, monospace Courier New Courier New, Courier 6 monospace
Georgia, serif Georgia 1 Georgia serif
Impact,Charcoal, sans-serif Impact Impact 5 , Charcoal 6 sans-serif
"Lucida Console", Monaco, monospace Lucida Console Monaco 5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans-serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, Book Antiqua 3 Palatino 6 serif
Tahoma, Geneva, sans-serif Tahoma Geneva sans-serif
"Times New Roman", Times, serif Times New Roman Times serif
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS 1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol 2 Symbol 2 -
Webdings Webdings 2 Webdings 2 -
Wingdings, "Zapf Dingbats" Wingdings 2 Zapf Dingbats 2 -
"MS Sans Serif", Geneva, sans-serif MS Sans Serif 4 Geneva sans-serif
"MS Serif", "New York", serif MS Serif 4 New York 6 serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings - в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua - с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции

Скриншоты
  • Mac OS X 10.4.8, Firefox 2.0, ClearType включён (за скриншот спасибо Juris Vecvanags)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType включён
  • Mac OS X 10.4.11, Safari 3.0.4, ClearType включён (за скриншот спасибо Nolan Gladius)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType включён (за скриншот спасибо Eric Zavesky)
  • Windows Vista, Internet Explorer 7, ClearType включён
  • Windows Vista, Firefox 2.0, ClearType включён (за скриншот спасибо Michiel Bijl)

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

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

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

Что же может быть не так?

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

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

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

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

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

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

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

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

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

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

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

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

  1. Arial

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

  1. Helvetica


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

  1. Times New Roman


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

  1. Times


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

Разработка web сайтов, шрифты для web

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

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

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

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

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

  • шрифты с засечками
  • рубленые шрифты (шрифты без засечек)

Шрифты с засечками — (англ. serif — засечка) шрифты начертание которых начинается и заканчивается штрихами. Например Times New Roman.

Шрифты без засечек (рубленые шрифты) — (англ.sans-serif —без засечки) шрифты со строгими ровными линиями без засечек. Например Arial.

Ниже Вы можете увидеть скриншот шрифтов с засечкой и без.

шрифты для web

Шрифты для web дизайна:

  • Arial
  • Arial Black
  • Arial Narrow
  • Book Antiqua
  • Century Gothic
  • Comic Sans MS
  • Courier New
  • Franklin Gothic Medium
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Microsoft Sans Serif
  • Palatino Linotype
  • Sylfaen
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings  (различные символы и знаки)
  • Wingdings (различные символы и знаки)

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

курсивный и наклонный шрифты

Из стандартных шрифтов  в Windows не имеют курсива:

  • Arial Black
  • Comic Sans MS
  • Franklin Gothic Medium
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Microsoft Sans Serif
  • Sylfaen
  • Tahoma

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

Из стандартных шрифтов  в Windows имеют жирное начертание изначально:

  • Arial Black
  • Impact
  • Lucida Console
  • Lucida Sans Unicode

Также есть шрифты, в которых отсутствует жирное и нормальное начертание.

Несколько статей о шрифтах:

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

Классификация шрифтов для сайта | Vaden Pro

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

Классификация шрифтов

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

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

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

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

  1. что поддерживаются большинством устройств;
  2. что на большинстве устройств не отображаются.

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

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

CSS

@font-face /*подключение уникального шрифта для сайта*/ {
 	font-family: "Roboto Condensed"; /*название шрифта*/
        src:url(fonts/Roboto-Condensed.woff); /*путь к файлу со шрифтом*/
}
.text /*подключение шрифта для
  определенного текстового блока*/  {
	font-family: Roboto Condensed, sans-serif, Verdana;
}

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

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

Стандартными шрифтами называются те семейства, которые встроенные в набор инструментов ОС устройства. Не сложно догадаться, что на белом свете не одна единственная операционка, из чего следует, что единой группы стандартных шрифтов тоже нет. К примеру, Windows и Mac OS имеют свой собственный индивидуальный набор стандартных шрифтов, а вот Linux не имеет своего единого перечня. Стандартные семейства шрифтов этой ОС отличаются друг от друга, однако наиболее распространенной среди них является DejaVu. По статистическим данным юзеры Unix/Linux также используют шрифты URW и Free. Более того, согласно источнику, более 60% пользователей Unix/Linux заявляют о том, что стандартным пакетом шрифтов их ОС является Core fonts for the Web.

Для справки
С 2002 года на сайте Microsoft, занимающейся выпуском ОС и не только, стало возможным бесплатно скачивать шрифт Core fonts for the Web.

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

Типы имен семейств делятся на два основных вида:

  1. Название типа семейства по своему желанию. К примеру, "Arial" или "Times new Roman". Очень важно запомнить, что названия шрифтов с пробелом обязательно должны быть заключены кавычки, иначе пробел не будет прочитан системой и название шрифта не будет воспринято корректно.
  2. Имя родового семейства. Спецификациями CSS установлен следующий список родовых семейств:
    • serif: символы этого семейства прописываются с засечками;
    • sans-serif: засечки на буквах отсутствуют;
    • cursive: курсивное начертание текста;
    • fantasy: особые шрифты, внешний вид которых имеют декоративный характер;
    • monospace: моноширинный шрифт.

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

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

Суть Web-безопасных шрифтов

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

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

Ключевую роль для определения универсального списка шрифтов отыграла корпорация Била Гейтса, так как их ОС является наиболее распространенной в мире. Именно из их стандартного списка производился выбор наиболее безопасных шрифтов. В подтверждение данного факта была приведена информация из статистических данных относительно ОС Unix/Linux и пакета шрифтов Core fonts for the Web. Ниже представлены семейства шрифтов, которые входят в этот пакет, с учетом особенностей представления их внешнего вида.

Andale Mono Arial Black Arial Comic Sans MS
Courier New Georgia Impact Times New Roman
Trebuchet MS Verdana Webdings

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

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

Исходя из этих фактов, был сформирован список Web-безопасных шрифтов, которые входят в список стандартных для большинства ОС:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

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

Подводя итог

Использование шрифтов значительно ограничивается возможностью ОС распознать указанный шрифт. Однако свойством font-family предусмотрено через запятую указывать несколько семейств шрифта, а также их родовое семейство. Также в этих целях был сформирован список Web-безопасных шрифтов, предназначенных для оформления основного контента. В тоже время стоит отметить, что на сегодняшний день не возникает проблемы подбора шрифта, который должен будет поддерживаться всеми ОС. Благодаря правилу @font-face, веб-разработчики размещают необходимый шрифт непосредственно на сервере, а это правило вытягивает его оформление из сервера, и таким образом, даже если шрифт на скачен на используемое устройство, задумка дизайнера не загубиться и все отработает без лишних проблем.

Оценок: 2 (средняя 5 из 5)

Стандартные шрифты для сайтов - SkillsUp

Каждый сталкивается с таким вопросом, какие же шрифты можно использовать, чтобы страничка выглядела так, как было задумано, на всех компьютерах и у каждого посетителя сайта? Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере у посетителей сайта. Конечно, каждый владелец компьютера может иметь набор разных шрифтов. Ниже приведен список стандартных шрифтов для операционной системы Microsoft Windows и MacOS X Apple. (источник http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) Таблица шрифтов для Windows и Mac, для безопасного использования во всех браузерах.

Значение @font-family Windows Mac Семейство
Arial, Helvetica, sans-serif Arial Arial, Helvetica sans-serif
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget sans-serif
"Comic Sans MS", cursive Comic Sans MS Comic Sans MS5 cursive
"Courier New", Courier, monospace Courier New 6 monospace
Georgia, serif Georgia1 Georgia serif
Impact,Charcoal, sans-serif Impact Impact5, Charcoal6 sans-serif
"Lucida Console", Monaco, monospace Lucida Console Monaco5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans-serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, Book Antiqua3 Palatino6 serif
Tahoma, Geneva, sans-serif Tahoma Geneva sans-serif
"Times New Roman", Times, serif Times New Roman Times serif
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol2 Symbol2 -
Webdings Webdings2 Webdings2 -
Wingdings, "Zapf Dingbats" Wingdings2 Zapf Dingbats2 -
"MS Sans Serif", Geneva, sans-serif MS Sans Serif4 Geneva sans-serif
"MS Serif", "New York", serif MS Serif4 New York6 serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE, поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты устанавливаются в Mac только при Classic-инсталляции

Вот как выглядят шрифты в различных браузерах

Windows Vista, Internet Explorer 7, ClearType включен (для оптимального просмотра сохраните файл себе на компьютер)

Windows Vista, Firefox 2.0, ClearType включен (для оптимального просмотра сохраните файл себе на компьютер)


Mac OS X 10.4.8, Firefox 2.0, ClearType включен (для оптимального просмотра сохраните файл себе на компьютер)

А вот как выглядят шрифты в старом добром Windows 2000, IE 6.0:


Источник: sergeykalugin.com/2011/11/13/standartny-e-shrifty-dlya-sajtov/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов

Использование шрифтового оформления и шрифтов в Adobe Muse

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

  • Веб-шрифты
  • Стандартные шрифты
  • Системные шрифты

Ниже приведено краткое описание каждого из этих вариантов.

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

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

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

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

R.I.P. стандартные шрифты для сайта

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

Так какой же шрифт использовать на сайте, чтобы максимально совместить приятное с полезным? Я предлагаю вам воспользоваться моей подборкой качественных и мега популярных шрифтовых гарнитур. Подключаются они до банального просто и быстро: либо через @font-face, либо через Google Fonts.

Подборка из 6 популярных кириллических шрифтов

1. Open Sans (Бесплатно)

opensans

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

Шрифт разработан Стивом Мэттисом и является полностью бесплатным. В 3 клика устанавливается на любой сайт через Google Fonts.

2. Proxima Nova (29$)

proximanova

Разработан, а точнее переделан в 2005 году из шрифта Proxima Sans. Имеет множество начертаний и не менее популярен, чем Open Sans, хоть и стоит 29$ / начертание. Отлично подходит не только для контентной части, но и для заголовков, чем предыдущий похвастаться точно не может.

3. PT Sans (Бесплатно)

ptsans

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

4. PT Serif (Бесплатно)

ptsherif

Еще одна бесплатная гарнитура от студии ПараТайп, выпущенная в 2009 году. Наилучшим образом подходит для заголовков всех мастей. Как вы могли догадаться, PT Serif и PT Sans — парные шрифты. Именно поэтому они очень хорошо взаимодействуют друг с другом, создавая единую типографическую картину.

5. Roboto (Бесплатно)

roboto

Наверняка, один из самых узнаваемых шрифтов среди дизайнеров, использующих Android устройства. Если предыдущий шрифт не очень хорошо подходит для «многа букав», то Roboto —  универсален. Он одинаково хорошо выглядит, как в заголовках, так и объемных текстах.

6. Geometria (40$)

geometria

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

В заключении

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

Если у вас есть чем дополнить данную подборку — добро пожаловать в комментарии.

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

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