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

Содержание

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

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как 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 лучших вариантов

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как 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 лучших вариантов

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как 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» , подготовленная редакцией проекта.

Безопасные шрифты. 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 ConsoleMonacoMonospace
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/

Лучшие стандартные шрифты. Верстальщику о шрифтах

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

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

Список
Значение @font-familyWindowsMacСемейство
Arial, Helvetica, sans-serifArialArial, Helveticasans-serif
«Arial Black», Gadget, sans-serifArial BlackArial Black, Gadgetsans-serif
«Comic Sans MS», cursiveComic Sans MSComic Sans MS 5cursive
«Courier New», Courier, monospaceCourier NewCourier New, Courier 6monospace
Georgia, serifGeorgia 1Georgiaserif
Impact,Charcoal, sans-serifImpactImpact 5 , Charcoal 6sans-serif
«Lucida Console», Monaco, monospaceLucida ConsoleMonaco 5monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serifLucida Sans UnicodeLucida Grandesans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serifPalatino Linotype, Book Antiqua 3Palatino 6serif
Tahoma, Geneva, sans-serifTahomaGenevasans-serif
«Times New Roman», Times, serifTimes New RomanTimesserif
«Trebuchet MS», Helvetica, sans-serifTrebuchet MS 1Helveticasans-serif
Verdana, Geneva, sans-serifVerdanaVerdana, Genevasans-serif
SymbolSymbol 2Symbol 2
WebdingsWebdings 2Webdings 2
Wingdings, «Zapf Dingbats»Wingdings 2Zapf Dingbats 2
«MS Sans Serif», Geneva, sans-serifMS Sans Serif 4Genevasans-serif
«MS Serif», «New York», serifMS Serif 4New York 6serif

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)

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

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

Список
Значение @font-familyWindowsMacСемейство
Arial, Helvetica, sans-serifArialArial, Helveticasans-serif
«Arial Black», Gadget, sans-serifArial BlackArial Black, Gadgetsans-serif
«Comic Sans MS», cursiveComic Sans MSComic Sans MS 5cursive
«Courier New», Courier, monospaceCourier NewCourier New, Courier 6monospace
Georgia, serifGeorgia 1Georgiaserif
Impact,Charcoal, sans-serifImpactImpact 5 , Charcoal 6sans-serif
«Lucida Console», Monaco, monospaceLucida ConsoleMonaco 5monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serifLucida Sans UnicodeLucida Grandesans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serifPalatino Linotype, Book Antiqua 3Palatino 6serif
Tahoma, Geneva, sans-serifTahomaGenevasans-serif
«Times New Roman», Times, serifTimes New RomanTimesserif
«Trebuchet MS», Helvetica, sans-serifTrebuchet MS 1Helveticasans-serif
Verdana, Geneva, sans-serifVerdanaVerdana, Genevasans-serif
SymbolSymbol 2Symbol 2
WebdingsWebdings 2Webdings 2
Wingdings, «Zapf Dingbats»Wingdings 2Zapf Dingbats 2
«MS Sans Serif», Geneva, sans-serifMS Sans Serif 4Genevasans-serif
«MS Serif», «New York», serifMS Serif 4New York 6serif

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 Fonts к сайту WordPress.

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


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

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

Но вся проблема заключается в том, что в разных операционных системах устанавливаются разные наборы шрифтов. Посмотреть наборы поставляемых шрифтов вместе с операционной системой можно на официальных страницах 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; /* дополнительно устанавливаем размер шрифта */
font-weight: 400; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */
}

Назначаем шрифт для заголовков
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; /* подлючаем шрифт к параграфам, можно применять к спискам li, блокам div, формам form и другим элементам */
font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */
}

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

Здесь параграф с назначаемым шрифтом

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

Font{
font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; /* подлючаем шрифт к определенным параграфам, можно применять к отдельным спискам li, блокам div, формам form и другим элементам */
font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */
font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */
}


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

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

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

(аналогично CSS файлу) , либо inline — присвоение свойств напрямую к html тегам.


Подключаем шрифты в заголовке
, между тегами

. Для этого в html документ добавьте такой код:

Здесь я повторяться не буду. Все аналогично подключению в CSS файле.


Подключение шрифтов inline
, непосредственно к элементам сайта. Приведу несколько примеров:

Подключаем шрифт к параграфу

Здесь параграф с текстом

Выделяем жирным шрифтом отдельное слово и присваиваем отдельный от основного шрифт

Здесь параграф с текстом, а это слово, которое нужно выделить жирным

Здесь ссылка

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

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

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

Начиная верстать макет, необходимо в частности указать в 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 свойстве задавать несколько шрифтов, перечисленных через запятую.

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации 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-шрифтов:

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

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

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

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

Об этом читайте во второй части публикации.

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов
. Сервисы для внедрения шрифтов, такие как 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
знаком большинству. Многим он запомнился по маленьким буквам в узких колонках старых газет. Самый обычный, ставший традицией, вид печати.

  1. Courier New

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

  1. Courier

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

  1. Verdana

Verdana
может по праву считаться истинным веб-шрифтом (true web font

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

  1. Georgia

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

  1. Palatino

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

  1. Garamond

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

  1. Bookman

Bookman
(или Bookman Old Style

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

  1. Comic Sans MS

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

  1. Trebuchet MS

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

  1. Arial Black

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

  1. Impact

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

Facebook

Twitter

Вконтакте

Одноклассники

Google+

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

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

Популярные шрифты для письма

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

Сравнение шрифтов sans serif и serif

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

Times New Roman

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

Начертание шрифта Times New Roman

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

Для наглядности мы набрали лид дайджеста от SendPulse антиква-шрифтом Times New Roman:

Шрифт Times New Roman в дайджесте от SendPulse

Georgia

Похож на Times New Roman, но предназначен для использования в вебе. Это чувствуется — буквы более крупные при том же кегле и более широкие, выглядят уже не так официально.

Начертание шрифта Georgia

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

Так выглядит лид, набранный антиква-шрифтом Georgia:

Шрифт Georgia в дайджесте от SendPulse

Arial

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

Начертание шрифта Arial

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

Вот так выглядит лид, набранный гротеск-шрифтом Arial:

Шрифт Arial в рассылке от SendPulse

Verdana

Verdana — веб-шрифт, разработанный специально для чтения с экрана.

Начертание шрифта Verdana

Если вам нравится такой шрифт, но хочется более плотного начертания, обратите внимание на Tahoma — ближайшего родственника Verdana.

Так этот шрифт выглядит в письме:

Лид, набранный шрифтом Verdana

Как выбрать себе шрифт для писем

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

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

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

Без засечек

  • Arial
  • Arial Black
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Trebuchet MS
  • Verdana

С засечками

  • Georgia
  • Times New Roman
  • Courier

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

Сравнение шрифтов Comic Sans MS и Arial

Выбор шрифта — серьезное дело. Если не уверены в собственных силах, обратитесь к дизайнеру.

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

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

Сочетание шрифтов в рассылке интернет-магазина Michael Kors

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

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

Шрифт-антиква в рассылке портала MarketingProfs

А рассылка Greenpeace набрана гротеском, несмотря на большой объем текста:

Рассылка от Greenpeace, набранная шрифтом-гротеском

Нюансы при выборе почтового шрифта

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

Проверьте, есть ли все нужные символы и начертания

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

В начале статьи мы показали шрифт Georgia c «прыгающими» цифрами. Смотрите, что получится, если заменить их на цифры из Times New Roman:

Цифры из Times New Roman в тексте, напечатанном Georgia 

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

Декоративные шрифты вставляйте картинкой

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

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

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

При верстке письма всегда выбирайте несколько шрифтов для каждого уровня текста с помощью свойства font-family. Если на компьютере пользователя нет основного указанного шрифта, отобразится запасной. Например, font-family: Helvetica, Arial, sans-serif означает, что текст отобразится у получателя шрифтом Helvetica, а если этого шрифта нет, то Arial. Если нет обоих, то любым системным шрифтом без засечек.

Что стоит запомнить

Шрифты делятся на две группы:

  • антиква (serif) — с засечками;
  • гротеск (sans serif) — без засечек.

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

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

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

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

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

  • без засечек — Arial, Arial Black, Helvetica, Lucida Sans, Tahoma, Trebuchet MS, Verdana;
  • с засечками — Georgia, Times New Roman, Courier.

Шрифт — важная часть дизайна email-рассылок. С помощью советов из этой статьи выберите себе шрифт и создайте стильное и эффективное оформление для писем. Регистрируйтесь в SendPulse, чтобы делать классные рассылки без дизайнера и программиста!

[Всего: 7   Средний:  5/5]

Как изменить шрифт Windows 10

&nbsp windows | программы

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

Отмечу, что это тот редкий случай, когда я рекомендую использовать сторонние бесплатные программы, а не ручную правку реестра: так будет проще, нагляднее и эффективнее. Также может быть полезным: Как изменить шрифт на Android, Как изменить размер шрифта Windows 10.

Изменение шрифта в Winaero Tweaker

Winaero Tweaker — бесплатная программа для настройки оформления и поведения Windows 10, позволяющая, помимо прочего, изменить шрифты элементов системы.

  1. В Winaero Tweaker перейдите к разделу Advanced Appearance Settings, в нем собраны настройки для различных системных элементов. Например, нам требуется изменить шрифт иконок.
  2. Откройте пункт Icons и нажмите кнопку «Change font» (изменить шрифт). 
  3. Выберите нужный шрифт, его начертание и размер. Особое внимание обратите на то, чтобы в поле «Набор символов» было выбрано «Кириллица». 
  4. Обратите внимание: если вы меняете шрифт для иконок и подписи начали «сокращаться», т.е. не помещаться в поле, выделенное для подписи, вы можете изменить параметры Horizontal spacing и Vertical spacing для того, чтобы устранить это.
  5. При желании поменяйте шрифты для других элементов (список будет приведен ниже).
  6. Нажмите кнопку «Apply changes» (применить изменения), а затем — Sign Out Now (чтобы выйти из системы для применения изменений), либо «I’ll do it myself later» (чтобы самостоятельно позже выйти из системы или перезагрузить компьютер, предварительно сохранив нужные данные).

После проделанных действий сделанные вами изменения шрифтов Windows 10 будут применены. При необходимости сбросить сделанные изменения, выберите пункт «Reset Advanced Appearance settings» и нажмите по единственной кнопке в этом окне.

В программе доступны изменения для следующих элементов:

  • Icons — иконки.
  • Menus — главные меню программ.
  • Message Font — шрифт текстов сообщений программ.
  • Statusbar Font — шрифт в строке состояния (внизу окна программ).
  • System Font — системный шрифт (меняет стандартный шрифт Segoe UI в системе на выбранный вами).
  • Window Title Bars — заголовки окон.

Подробнее о программе и о том, где её скачать — в статье Настройка Windows 10 в Winaero Tweaker.

Advanced System Font Changer

Еще одна программа, позволяющая изменить шрифты Windows 10 — Advanced System Font Changer. Действия в ней будут очень похожи:

  1. Нажмите по названию шрифта напротив одного из пунктов. 
  2. Выберите нужный вам шрифт. 
  3. Повторите при необходимости для других элементов.
  4. Если необходимо, на вкладке Advanced измените размеры элементов: ширину и высоту подписей значков, высоту меню и заголовка окна, размеры кнопок прокрутки.
  5. Нажмите кнопку Apply для выхода из системы и применения изменений при повторном входе.

Изменить шрифты можно для следующих элементов:

  • Title bar — заголовок окна.
  • Menu — пункты меню в программах.
  • Message box — шрифт в окнах сообщений.
  • Palette title — шрифт заголовков панелей в окнах.
  • Tooltip — шрифт панели статуса внизу окон программ.

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

Скачать Advanced System Font Changer можно бесплатно с официального сайта разработчика: https://www.wintools.info/index.php/advanced-system-font-changer

Изменение системного шрифта Windows 10 с помощью редактора реестра

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

  1. Нажмите клавиши Win+R, введите regedit и нажмите Enter. Откроется редактор реестра.
  2. Перейдите к разделу реестра
    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts

    и очистите значение для всех шрифтов Segoe UI кроме Segoe UI Emoji. 

  3. Зайдите в раздел
    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes

    создайте в нем строковый параметр Segoe UI и в качестве значения введите имя шрифта, на которое мы меняем шрифт. Имена шрифтов вы можете посмотреть, открыв папку C:\Windows\Fonts. Название следует вводить точно (с теми же заглавными буквами, что видны в папке).

  4. Закройте редактор реестра и выйдите из системы, а затем снова зайдите.

Сделать всё это можно и проще: создайте reg-файл, в котором нужно указать только имя нужного шрифта в последней строке. Содержимое reg файла:

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]
"Segoe UI (TrueType)"=""
"Segoe UI Black (TrueType)"=""
"Segoe UI Black Italic (TrueType)"=""
"Segoe UI Bold (TrueType)"=""
"Segoe UI Bold Italic (TrueType)"=""
"Segoe UI Historic (TrueType)"=""
"Segoe UI Italic (TrueType)"=""
"Segoe UI Light (TrueType)"=""
"Segoe UI Light Italic (TrueType)"=""
"Segoe UI Semibold (TrueType)"=""
"Segoe UI Semibold Italic (TrueType)"=""
"Segoe UI Semilight (TrueType)"=""
"Segoe UI Semilight Italic (TrueType)"=""

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes]
"Segoe UI"="Название Шрифта"

Запустите этот файл, согласитесь с внесением изменения в реестр, а затем выполните выход и вход в Windows 10 для применения изменений системного шрифта.

Видео

Можете предложить свои способы? Буду рад прочесть о них в комментариях.

А вдруг и это будет интересно:

10 лучших шрифтов для использования в вашей следующей презентации PowerPoint

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

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

Это стандартный шрифт Windows?

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

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

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

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

И, если вам интересно, десять, которые мы рекомендуем здесь, все в этом списке.

Вы выбираете шрифт для заголовков или основного текста?

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

Какой шрифт у вас — для заголовка или основного текста, поможет ваш ответ на следующий вопрос…

Засечки или без засечек?

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

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

Насколько хорошо вы хотите узнать?

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

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

10 лучших презентационных шрифтов

1. Garamond

«Garamond» на самом деле относится к стилю шрифта, а не к одному шрифту в частности. Некоторые примеры, о которых вы, возможно, слышали, включают Adobe Garamond, Monotype Garamond и Garamond ITC. Все эти шрифты немного отличаются друг от друга, но все они берут свое начало в работах Клода Гарамонда, который разработал оригинальные высечки в 1500-х годах, что сделало шрифты Garamond одними из самых старых.

До работы Клода Гарамонда шрифты создавались так, чтобы имитировать почерк писцов.Однако гарнитуры Гарамонда (их 34 приписывают) были разработаны в римском стиле с вертикальными восходящими элементами букв и горизонтальной полосой буквы «е», а не наклонными, как в более ранних каллиграфических шрифтах. Буквы были разработаны таким образом, чтобы повысить удобочитаемость печати, что делает шрифты Garamond таким отличным выбором для основного текста. Такой отличный выбор, что вся серия о Гарри Поттере напечатана в Adobe Garamond. Помимо печати, шрифты Garamond использовались в логотипах многих брендов, включая Rolex, Abercrombie и Fitch, а также гигантов Google и Apple.

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

2. Palatino

Palatino был спроектирован Германом Цапфом в 1949 году. Основанный на шрифтовых стилях итальянского Возрождения, Palatino черпает влияние каллиграфии и фактически назван в честь мастера-каллиграфа Джамбаттисты Палатино — современника Клода Гарамонда. Zapf предназначал Palatino для использования в заголовках, рекламе и печати.В частности, он был разработан, чтобы оставаться читаемым при печати на бумаге низкого качества, при печати небольшого размера или при просмотре на расстоянии.

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

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

3. Verdana

Verdana была разработана Мэтью Картером для Microsoft в 1996 году и преднамеренно создавалась для использования на экранах компьютеров. Буквы расположены на большом расстоянии друг от друга, с широкими счетчиками и высокими строчными буквами, что делает этот шрифт очень читабельным, особенно при отображении небольшого размера. Verdana также почти повсеместна, она была включена во все версии Windows и Office с момента ее создания. Согласно одному из опросов, он доступен на 99,7% компьютеров с Windows и 98,05% компьютеров Mac.С одной стороны, это очень безопасная ставка — вам почти гарантировано, что ваша презентация будет выглядеть так, как вы планировали, на всех устройствах, но с другой стороны, вы можете не так сильно выделяться из толпы, как вам хотелось бы!

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

4. Segoe

Если вы использовали компьютер с Windows, Skype, играли на Xbox 360 или только что видели логотип Microsoft, вы видели шрифт из семейства Segoe. Microsoft использует шрифты Segoe для своих логотипов и рекламных материалов, а Segoe UI является шрифтом операционной системы по умолчанию со времен Windows Vista. Все это благодаря его красивой простоте и удобочитаемости на экране. Как и Verdana, шрифты Segoe идеально смотрятся на экранах и при небольших размерах, теплые и привлекательные, сохраняя воздушность и вдохновляющее ощущение технологий и прогресса.Однако, в отличие от Verdana, у которого большие пробелы и более тяжелые буквы, шрифты Segoe также являются отличным выбором для заголовков и заголовков.

Еще один забавный бонус от семейства шрифтов Segoe — это обширный набор символов и значков, который он предлагает. На вкладке вставки в PowerPoint щелкните символ и измените шрифт символа на Segoe UI Symbol или Segoe UI Emoji, и полюбуйтесь огромным количеством символов на выбор. Есть формы, стрелки, музыкальные ноты, математические обозначения, научные обозначения, есть животные, здания, еда, плитки маджонга, буквы Fraktur, гексаграммы И-Цзин … Скорее всего, там есть любой символ, который вы могли бы захотеть!

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

5. Franklin Gothic

Что делает шрифт «готическим»? В Franklin Gothic нет ничего такого, что говорило бы о летучих мышах на колокольнях или об обреченных влюбленных, блуждающих по пустошам Йоркшира! Что ж, сбивает с толку то, что при описании шрифтов « готический » может означать совершенно противоположные вещи — он иногда используется для обозначения средневекового стиля черного шрифта или, наоборот, его можно использовать как синоним чистых, геометрических шрифтов без засечек. которые начали свое восхождение к известности в начале 19 -го века.И это определенно относится к категории Franklin Gothic.

Разработанный Моррисом Фуллером для основателей шрифтов American Type в 1902 году и названный в честь американского печатника и отца-основателя Бенджамина Франклина, Franklin Gothic — классический американский шрифт, который описывается как «квадратный челюсть и сильные руки, но при этом тихий. . ‘Благодаря широкому диапазону веса и ширины, а также интересным деталям дизайна (обратите внимание на заглавные буквы Q и строчные буквы g, чтобы увидеть красивые, необычные кривые, и на заглавные буквы A и M, чтобы увидеть слегка изменяющиеся веса линий), Franklin Gothic будет выглядеть сильный и доступный, как заголовки, и стильный и разборчивый, как основной текст.

6. Candara

Candara был разработан Гэри Мунком и выпущен вместе с Windows Vista в 2008 году. Он является частью семейства из шести шрифтов Microsoft, начинающихся с буквы C (Calibri, Cambria, Consolas, Corbel и Constantia) , которые были оптимизированы для использования с системой рендеринга Microsoft ClearType.

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

И архитектурное влияние на этом не заканчивается. Диагональные линии Candara, которые лучше всего видны в заглавных буквах X, N и A, имеют необычные изгибы.Чаще всего встречается в готических сводах 13 и 14 веков Британии, кривая является частично выпуклой, частично вогнутой, образуя при подъеме неглубокую S-образную форму. Две линии ogee, пересекающиеся посередине, образуют арку, которая поднимается к точке — как заглавная буква A Candara.

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

7. Bodoni

Подобно Garamond, Bodoni относится не к одному шрифту, а к семейству гарнитур, вдохновленных многовековой работой мастера-типографа. Джамбаттиста Бодони был чрезвычайно успешным мастером-печатником, который жил и работал в итальянском городе Парма в конце 18 -го и начале 19 -го века.Вместе с французским типографом Фирмином Дидо Бодони был ответственным за разработку стиля письма «Новое лицо», характеризующегося резким контрастом между толстыми и бритвенно тонкими линиями.

Вы убедитесь в этом в действии, если хоть раз заглянули в модный журнал. Vogue, Harper’s Bazaar и Elle печатают свои имена шрифтом Bodoni. Фактически, эти шрифты настолько распространены в модном графическом дизайне, что стали сокращением элегантности и утонченности, которые идеализирует мир моды.

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

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

8. Bell MT

Если шрифты Bodoni слишком экстремальны, попробуйте Bell MT.У них схожие корни — шрифты Bodoni и Bell созданы под влиянием работ французского типографа Фермина Дидо, и у них одинаковый контраст стиля «New Face» между толстыми и тонкими линиями, только в меньшей степени со шрифтами Bell.

Разработанные в 1788 году штамповщиком Ричардом Остином по заказу издателя Джона Белла, шрифты Bell имеют сходство со шрифтами стиля Didot, но также и с более мягкими и округлыми римскими шрифтами того времени, такими как Baskerville. Влияние плавных курсивных шрифтов, таких как Baskerville, можно увидеть в таких буквах, как прописные Q и K и курсив Y и z , которые имеют красивые необычные изгибы.На самом деле Bell MT особенно привлекателен курсивом, почти как скрипт, сохраняя при этом удобочитаемость. Это делает его отличным выбором для подзаголовков как более мягкий аналог заголовка без засечек. Или используйте его для цитат и отзывов, набранных красивым курсивом Bell, они будут привлекательными и аутентичными, а также четкими и удобочитаемыми.

9. Тахома

Тахома происходит от коренного салишанского языка и является одним из первоначальных индейских названий горы Рейнир в американском штате Вашингтон.

Tahoma шрифт, однако, был разработан британским типографом Мэтью Картером, работающим на Microsoft, и был выпущен с Windows 95. Это очень близкий родственник Verdana, но хотя и похож, Tahoma немного уже и более узкий, чем Verdana, придавая ему более тонкий и формальный вид. Это еще один пример шрифта, который был разработан специально для использования на экранах, что означает, что он будет хорошо смотреться в широком диапазоне размеров и на широком диапазоне экранов, что идеально подходит, если вы делаете презентацию, которая должна правильно отображаться на нескольких экранах. устройств.

На самом деле, идеальная ясность — это то, что отличает Tahoma от некоторых подобных шрифтов без засечек. На изображении ниже показаны символы верхнего регистра I (глаз), нижнего регистра l (элл) и номер 1 (один), написанные четырьмя популярными шрифтами без засечек (слева направо) Century Gothic, Calibri, Gill Sans и Tahoma. Обратите внимание, что в каждом шрифте, кроме Tahoma, по крайней мере два символа неотличимы. Гилл Санс, например, здесь катастрофа. Маловероятно, что вам когда-либо понадобится писать эти три символа в быстрой последовательности, но для научного, технического или математического содержания четкое различие между этими символами может быть очень важным — и Тахома дает вам это.

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

10. Corbel

Разработанный Джереми Танкардом и выпущенный в 2005 году, как и Candara Corbel, также был разработан для хорошей работы с системой рендеринга Microsoft ClearType, то есть специально разработан для работы на экранах. Танкард описал свою цель при разработке Corbel как «обеспечить лаконичный и чистый вид на экране» и описывает шрифт как «разборчивый, четкий и функциональный при небольших размерах».’Все это важно отметить, когда вы ищете шрифт для презентации!

Корбел немного более серьезен, чем Кандара, опять же, по словам Танкарда: «функциональный, но не мягкий», призванный быть «менее приятным, более напористым». Например, точки над i и j квадратные, а не закругленные. Хвост заглавной буквы Q прямой и горизонтальный, а не причудливый изгиб. Это делает Corbel хорошим выбором для более серьезного или технического контента, он разборчивый и без излишних украшений, но при этом не бесхарактерный или чрезмерно используемый.

Одной из самых интересных деталей дизайна Corbel является тот факт, что в этом шрифте цифры являются строчными. Что это значит? Взгляните на изображение ниже, где вы можете увидеть сравнение того, как числа 0-9 отображаются в Corbel, с тем, как они отображаются в другом популярном шрифте без засечек, Segoe UI. Заметили, что числа Корбела не совпадают точно? Это называется строчными или старыми цифрами.

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

А как насчет пользовательских шрифтов?

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

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

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

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

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

Какой бы шрифт вы ни выбрали для своей следующей презентации PowerPoint, задайте себе два вопроса:

  1. Подходит ли этот шрифт для вашего бренда?
  2. Легко ли читать?

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

Дополнительная литература

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

Источники:

Оставить комментарий

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


Лучшие безопасные веб-шрифты для HTML и CSS

Следующий список — лучшие веб-безопасные шрифты для HTML и CSS:

  • Arial (без засечек)
  • Verdana (без засечек)
  • Helvetica (без засечек)
  • Тахома (без засечек)
  • Trebuchet MS (без засечек)
  • Times New Roman (с засечками)
  • Грузия (с засечками)
  • Garamond (с засечками)
  • Courier New (моноширинный)
  • Brush Script MT (курсив)

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


Arial (без засечек)

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

Arial — один из самых безопасных веб-шрифтов, доступный во всех основных операционных системах.


Verdana (без засечек)

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


Helvetica (без засечек)

Шрифт Helvetica полюбился дизайнерам. Подходит для многих видов бизнеса.


Тахома (без засечек)

В шрифте Tahoma меньше места между символами.


Trebuchet MS (без засечек)

Trebuchet MS был разработан Microsoft в 1996 году. Используйте этот шрифт осторожно. Нет
поддерживается всеми мобильными операционными системами.



Times New Roman (с засечками)

Times New Roman — один из самых узнаваемых шрифтов в мире. Это выглядит
профессиональный и используется во многих газетах и ​​«новостных» сайтах. Это также
основной шрифт для устройств и приложений Windows.


Грузия (с засечками)

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


Гарамонд (с засечками)

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


Courier New (моноширинный)

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


Brush Script MT (курсив)

Шрифт Brush Script MT был разработан для имитации почерка.
Он элегантный и изысканный, но его трудно читать. Используйте его осторожно.

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

Шрифты безопасной сети

Шрифты безопасной сети

Шрифты безопасной сети

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

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

Еще один документ с перекрестными ссылками на шрифты находится здесь.

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

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

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

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

  • Вердана
  • Грузия
  • Comic Sans MS
  • Требушет MS
  • Arial Черный
  • Удар
Обычные шрифты без засечек

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

Helvetica

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

Arial

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.

Courier Новый

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

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

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

Вердана

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

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

Тахома

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

Ариал Черный

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

Comic Sans MS

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

Удар

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

Avant Garde

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

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

Georgia — это веб-оптимизированный шрифт с засечками, но он все еще новичок.
Палатино такой же старый и устоявшийся, как и Times, но
выглядит ужасно в недавнем Unix
системы. Century Schoolbook, Garamond и Bookman кажутся
доступны в системах Unix, но я не уверен, насколько широко они распространены
находятся в системах Windows / Mac.

Грузия

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

Палатино

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

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

Книжник

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

Garamond

ABCDE abcde 012345 & *!,.
Garamond. Вариантов этого шрифта очень много.
Не поставляется с WinXP.

Учебник века

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

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

Андале Моно похож на Вердану и Джорджию; это новый шрифт,
не широко распространен и недоступен в Unix или на некоторых компьютерах с Windows.

Андале Моно

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

2020 Лучшие десять шрифтов | printsupport-copi

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

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

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

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

Второе место в нашем списке занимает шрифт без засечек. Однако он более характерен, чем Helvetica. Ширина набора более узкая, а формы букв более округлые и более креативные.Microsoft разработала Calibri, и теперь это шрифт по умолчанию в Microsoft Office. Его современный и «деловой повседневный» вид делает его идеальным выбором для большинства деловых документов.

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

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

Самый известный в мире шрифт с засечками в последнее время упал по популярности чуть ниже Garamond.Лондонская Times заказала шрифт в 1931 году. Шрифт использовался в течение сорока лет. Читатели всегда будут ассоциировать его с журналистикой, а издатели используют его для книг и обычной печати каждый день. Его репутация делает его идеальным шрифтом для брендов, которые хотят создать солидный и надежный имидж.

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

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

Наш шестой шрифт в списке возвращает нас к шрифтам без засечек. IBM заказала Arial. Он настолько похож на Helvetica, что ходили слухи, что IBM разработала его только для того, чтобы не платить роялти за наш шрифт номер один. Те из нас, кто в определенном возрасте, помнят его по знаменитой операционной системе Windows 3.1. Как и Helvetica, это универсальный шрифт, который ваши клиенты могут использовать для вывесок, бизнес-форм или мелкого шрифта. Не говоря уже о слухах, он легче и менее формален, чем Helvetica, что придает ему больше характера и оригинальности.

Microsoft ввела в эксплуатацию Cambria в 2004 году в качестве одного из шрифтов ClearType, включенных в Windows Vista. Хотя он был разработан относительно недавно, он напоминает шрифты с засечками конца 19 века. Этот шрифт с переходными засечками более сжатый, чем Times New Roman, и, как и Helvetica, он выглядит прочно и легко читается мелким шрифтом. Microsoft предназначила Cambria для основного текста, и типографы широко используют ее в деловой печати.

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

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

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

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

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

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

Вы можете узнать больше на их сайте.

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

Размер, стандартные и профессиональные сочетания

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

Столько вопросов связано с такой, казалось бы, повседневной задачей, как выбор шрифта.

Хорошо, можете перестать смотреть на экран.

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

Это руководство по шрифтам покажет вам:

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

Хотите сэкономить время и подготовить резюме за 5 минут? Попробуйте наш конструктор резюме. Это быстро и легко. Кроме того, вы получите готовый контент, который можно добавить одним щелчком мыши. Посмотрите 20+ шаблонов резюме и создайте свое резюме здесь .

Создайте свое резюме прямо сейчас

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

Один из наших пользователей, Никос, сказал следующее:

[Я использовал] хороший шаблон, который я нашел на Zety. В моем резюме теперь одна страница , а не три . То же самое.

1

Какой шрифт использовать для резюме

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

Размер шрифта резюме

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

Обычные шрифты для резюме

  • Чаще всего используется черный шрифт Times New Roman размером 12 пунктов.
  • Другие шрифты с засечками, у которых есть хвосты, которые хорошо работают, включают Cambria, Georgia, Garamond, Book Antiqua и Didot.
  • Шрифты без засечек, которые хорошо работают, включают Calibri, Helvetica, Verdana, Trebuchet MS и Lato.
  • Используйте полужирный шрифт , , , курсив, и ЗАГЛАВНЫЙ шрифт, чтобы выделить важную информацию, такую ​​как ваше имя и заголовки разделов, но будьте последовательны.

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

Лучший шрифт для резюме в 2021 году:

1. Calibri

3 906 906

3 906 de6

Современный шрифт без засечек с чистым вырезом.

Категория

Designer

Дата создания

Sans-serif

Лукас де Гроот, голландский шрифтовой дизайнер, получил заказ от Microsoft на создание Calibri для замены старого доброго Times New Roman в качестве шрифта по умолчанию для Office.Это современный шрифт, который просто пытается обеспечить максимальную связь, пропуская устаревшие засечки, но без интенсивного расцвета других современных шрифтов — идеально подходит для сегодняшних резюме.

Плюсы : В качестве шрифта по умолчанию Calibri обычно отображается правильно, когда менеджер по найму открывает ваше резюме. Это профессиональный и легко читаемый шрифт, получивший награду TDC2 2005 Type System от Клуба директоров шрифтов.

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

Альтернатива : Carlito — это шрифт, созданный Google, который соответствует Calibri, метрически совместим и предназначен в качестве замены с открытым исходным кодом.

2. Cambria

Классический шрифт Serif.

Категория

Designer

Дата создания

Serif

9ma6

3 Calibri, Cambria также была создана по заказу Microsoft голландцем в 2004 году.Microsoft заявляет, что со своими засечками (этими маленькими линиями в конце каждого штриха в письме; мы скоро до них доберемся) он был «разработан для чтения с экрана и хорошо выглядит при печати небольшого размера». И это делает его отличным шрифтом для содержания вашего резюме и сопроводительного письма.

Плюсы : Cambria позволяет читателям быстро расшифровать текст меньшего размера.

Минусы : Его часто называют «традиционным», что может сделать его менее подходящим для более современных рабочих мест.

Альтернатива : Caladea — это шрифт, созданный Google, который соответствует Calibri, метрически совместим и предназначен в качестве замены с открытым исходным кодом. Однако сейчас (по состоянию на март 2018 года) кажется, что Google Docs также включает Cambria на выбор.

3. Helvetica

Швейцарский дизайнер создал неогротескный шрифт Helvetica; Первоначально он назывался Neue Haas Grotesk, но вскоре был лицензирован Linotype и переименован, чтобы напоминать латинское слово для Швейцарии, «Helvetia».«Этот шрифт остается популярным в рекламной индустрии как великолепный, легко читаемый шрифт без засечек. И система метро Нью-Йорка, и крупные корпорации, такие как BMW, используют Helvetica для своих вывесок.

Плюсы : Многие профессионалы считают Helvetica одним из самых красивых шрифтов без засечек. Идеальный шрифт для резюме!

Минусы : Helvetica предустановлена ​​на Mac, но вы не найдете ее в списке шрифтов в Microsoft Word.Вам придется купить его, если вы хотите им пользоваться и у вас нет Mac.

Альтернативы : Arial — это шрифт по умолчанию для Документов Google, а также стандартный шрифт для Microsoft Word, что означает, что он будет правильно отображаться на разных платформах и на большинстве компьютеров. Большинству неспециалистов трудно различить различия. Roboto — еще одна, менее похожая альтернатива шрифту резюме, созданная Google и доступная для открытого использования (как в нашем конструкторе резюме!).

Совет для профессионалов: Даже если вы сохраните свое резюме в формате.pdf, шрифт может испортиться при транспортировке. Чтобы ваш шрифт оставался неизменным, вставьте шрифт в файл. При сохранении (или «печати») в формате .pdf в Microsoft Word перейдите в «Параметры»> «Сохранить» и отметьте пункт «Вставить шрифты в файл» или аналогичный.

4. Джорджия

Шрифт без засечек высоко ценится среди дизайнеров.

Категория

Designer

Дата создания

Sans-serif

0003

Sans-serif

4

Шрифт с засечками формального вида.

Категория

Designer

Дата создания

Serif

Matthew Car

Matthew для Microsoft в начале 90-х годов Georgia по-прежнему остается одним из самых популярных шрифтов, используемых сегодня; им пользуется онлайн-газета New York Times и многие крупные корпорации, такие как Yahoo, Amazon и Twitter.Georgia — это шрифт, который легко читать в Интернете, что делает его идеальным, если вы планируете отправлять свое резюме в формате PDF.

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

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

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

5. Verdana

3

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

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

Минусы : Если вы ищете «вау» шрифт для резюме, продолжайте искать. Verdana не сильно отличается от Arial, а Arial выглядит как Helvetica.

Альтернатива : шрифт Futura — обычная замена шрифту Verdana; однако в 2010 году Ikea перешла с Futura на Verdana. Они заплатили миллионы своей команде по маркетингу, чтобы они сделали это предложение, так что делайте из этого что хотите.

6. Garamond

Шрифт без засечек с просторным дизайном.

Категория

Designer

Дата создания

Sans-serif

3

3

Шрифт Serif со средневековым наследием.

Категория

Designer

Дата создания

Serif

9ara0006

Garamond — это семейство шрифтов с долгой историей, восходящих к дизайну 15 и 16 веков.Многие называют Garamond вневременным. Позже Жан Жаннон разработал шрифт, похожий на большинство других цифровых версий Garamond. Версия Monotype, датированная 1922 годом, поставляется вместе с продуктами Microsoft и остается самой популярной из этого семейства типографий.

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

Минусы : Некоторые могут сказать, что вневременность Гарамонда — это просто более оптимистичный способ сказать, что она старая; это из 1400-х годов, помните?

Альтернатива : Cormorant вдохновлен дизайном Гарамонда, но он открыт для свободного доступа, и компания Google Fonts профинансировала разработку, чтобы сделать его свободным.

7. Trebuchet MS

6

6

Шрифт без засечек с мягкими изгибами.

Категория

Designer

Дата создания

Sans-serif

3

Sans-serif

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

Плюсы : Microsoft выпустила Trebuchet в качестве одного из своих основных шрифтов для Интернета. Вы можете легко найти его даже у конкурентов, таких как Google Docs.

Минусы : Если вы хотите использовать некоторые дополнительные функции для шрифта Trebuchet MS, такие как заглавные буквы или текстовые цифры, вам придется заплатить за коммерческую версию Trebuchet Pro.

Альтернатива : Fira Sans — достойная альтернатива Trebuchet, и она открыто доступна в Google Fonts. Кроме того, Source Sans Pro находится в свободном доступе для коммерческого использования (и вы можете найти его в нашем конструкторе резюме!).

8. Lato

612as

612as

2 902

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

Плюсы : В качестве шрифта с открытым исходным кодом (SIL Open Font License) вы можете загрузить и использовать его бесплатно. Lato также является корпоративным шрифтом, поэтому можете быть уверены, что он хорошо подойдет для вашего резюме. Его можно найти в библиотеке Google Font в открытом доступе.

Минусы : Lato не является стандартным шрифтом Microsoft Word. Это может означать, что он не загрузится, когда некоторые менеджеры по найму откроют ваше резюме.

Альтернатива : Open Sans — отличная замена Lato, являясь одним из самых популярных профессиональных шрифтов в сети сегодня, открыто доступным и пригодным для коммерческого использования (например, в нашем конструкторе резюме!).

9. Book Antiqua

Шрифт без засечек в современном стиле.

Категория

Designer

Дата создания

Sans-serif

Z6126

Z6126

Hermann

Если вы думаете, что современные шаблоны резюме должны предпочесть типографику под названием Web Nova или Selfie Futura вместо этого, вы ошибаетесь.Book Antiqua — это клон популярного в отрасли шрифта Palatino от Microsoft, который является одним из лучших шрифтов с засечками для резюме.

Плюсы : Как версия Palatino от Microsoft, она доступна в большинстве операционных систем и офисных программ.

Минусы : Palatino основан на гуманистических стилях итальянского Возрождения, поэтому ваше резюме может показаться вам antiqua .

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

10. Didot

Шрифт с засечками в старинном стиле.

Категория

Designer

Дата создания

Serif

Шрифт Serif с легкими штрихами.

Категория

Designer

Дата создания

Serif

902

Didot — элегантный шрифт, разработанный Фирмином Дидо незадолго до Французской революции.Хотя он не такой старый и классический, как Garamond, он родился во времена Просвещения и правления Марии-Антуанетты, поэтому это хороший шрифт для украшения вашего резюме.

Плюсы : Многие профессионалы ассоциируют шрифт с модой; Ральф Лорен и Marks & Spencer используют Didot на своих сайтах. Его элегантность считается безопасным выбором, если вам нужно что-то необычное.

Минусы : Вы должны приобрести Didot, если хотите использовать его в своем резюме.Слишком много Didot на странице превращает ее из элегантно элегантной в опасность для вашего резюме, которое постигнет та же участь, что и Madame Déficit .

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

2

Альтернативные шрифты

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

Я предлагаю альтернативный шрифт — использовать собственное семейство шрифтов Google Noto.Noto означает « NO more TO fu», тофу — это термин для полей, которые заменяют буквы или символы, которые система не может отобразить.

Согласно Google, «Noto обеспечивает панъязыковую гармонию, но при этом сохраняет аутентичность. Наша цель — обеспечить отличную читаемость в Интернете на разных языках без потери символа, который делает каждый сценарий особенным ».

Шрифты Noto, доступные как в версиях с засечками, так и без засечек, охватывают колоссальные 93 различных языковых сценария (алфавитов), почти 600 языков и более 230 географических регионов на Земле.Это действительно объединяющий мир шрифт, идеально подходящий для сегодняшних глобализированных отраслей, и я его настоятельно рекомендую.

3

Сравнение с засечками и без засечек

Что такое шрифт с засечками?

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

Что такое шрифты без засечек?

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

Шрифты с засечками или без засечек для моего резюме?

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

4

Как насчет курсива и жирного шрифта?

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

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

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

6

Сопряжение шрифтов

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

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

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

Key Takeaway

Итак, что вы думаете? В конце концов, не так уж и сложно, не так ли?

Выбор хороших шрифтов для резюме сводится к следующему:

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

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

Полный список веб-шрифтов HTML и CSS

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

В частности, он играет решающую роль в создании уникальной идентичности бренда. Вы, вероятно, заметите определенные «стандартные» шрифты, связанные с известными брендами, особенно в их логотипах. Например, у Facebook, Amazon, Disney и Microsoft есть разные шрифты, которые их отличают. Большинство из них изготавливаются на заказ и являются вариациями существующих шрифтов.

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

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

Что такое веб-шрифты?

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

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

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

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

Какие бывают типы веб-шрифтов?

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

  • Шрифты с засечками содержат засечки, небольшие декоративные штрихи, которые выступают из основной части письма. Шрифты с засечками легче читать в физических печатных форматах, поскольку засечки ведут взгляд зрителя от символа к символу. Times New Roman — это шрифт с засечками.
  • Шрифты без засечек не имеют засечек. Шрифты без засечек легче читать на экранах, поэтому они гораздо чаще встречаются при копировании веб-сайтов. Arial — это шрифт без засечек.
  • Моноширинный относится к шрифтам с одинаковым интервалом между символами.Courier — моноширинный шрифт.
  • Cursive относится к шрифтам, напоминающим рукописный текст. Brush Script MT — это курсивный шрифт.
  • Fantasy относится к стилизованным декоративным шрифтам. Luminari — это фантастический шрифт.
  • MS означает Microsoft и указывает на то, что шрифт был создан Microsoft для цифровых устройств. Trebuchet MS является примером.

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

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

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

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

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

Представьте себе, например, рендеринг сайта HubSpot в Times New Roman — все потому, что мы не установили предпочитаемый веб-шрифт на серверной части.Time New Roman абсолютно безопасен в Интернете — проблема в том, что он по умолчанию установлен браузером, поэтому наш веб-сайт выглядит непоследовательным и, ну, немного небрендовым.

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

1. Ваш HTML-текст останется неизменным.

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

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

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

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

Это позволит вашему шрифту «плавно ухудшиться». Вместо того, чтобы переключаться с Playfair Display прямо на Times New Roman, шрифт может перейти с Playfair Display на Didot, гораздо более близкую альтернативу. Если Didot недоступен, шрифт можно изменить на Georgia и, наконец, на шрифт с засечками по умолчанию, используемый браузером.

3. У вас будет несколько резервных копий, если вы используете собственный шрифт.

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

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

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

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

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

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

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

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

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

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

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

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

  1. Arial (без засечек)
  2. Arial Black (без засечек)
  3. Verdana (без засечек)
  4. Тахома (без засечек)
  5. Trebuchet MS (без засечек)
  6. Impact (без засечек)
  7. Times New Roman (с засечками)
  8. Didot (с засечками)
  9. Грузия (с засечками)
  10. Американская пишущая машинка (с засечками)
  11. Andalé Mono (моноширинный)
  12. Courier (моноширинный)
  13. Консоль Lucida (моноширинный)
  14. Монако (монокосмический)
  15. Брэдли Хэнд (курсив)
  16. Brush Script MT (курсив)
  17. Luminari (фэнтези)
  18. Comic Sans MS (курсив)

1.Arial (без засечек)

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

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

2. Arial Black (без засечек)

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

3. Verdana (без засечек)

Verdana пользуется популярностью как в сети, так и за ее пределами. Хотя он напоминает Arial и Helvetica, он имеет простую структуру, благодаря которой буквы становятся крупными и четкими. Некоторые из его персонажей имеют удлиненные линии, что может быть несовместимо с некоторыми рисунками. В остальном это отличная альтернатива Arial.

4. Тахома (без засечек)

Подобно Verdana, шрифт Tahoma отличается более жирным весом и более узким трекингом (т.е.е. меньше места между символами).

5. Trebuchet MS (без засечек)

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

6. Impact (без засечек)

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

Impact был впервые представлен цифровым устройствам в Microsoft Windows в 1998 году, и с тех пор наблюдается возрождение популярности интернет-мемов, наложенных поверх изображений для создания юмористического эффекта.

7. Times New Roman (с засечками)

Times New Roman — лучший шрифт с засечками. Это чрезвычайно популярный и основной шрифт для устройств и приложений Windows, таких как Microsoft Word. Браузеры возвращаются к нему, если указанный шрифт не отображается.

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

8. Didot (с засечками)

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

9. Грузия (с засечками)

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

10. Американская пишущая машинка (с засечками)

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

11. Andalé Mono (моноширинный)

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

Andalé Mono — прекрасный пример моноширинного шрифта. Этот вариант без засечек был разработан Apple и IBM и часто используется в средах разработки программного обеспечения.

12. Курьер (моноширинный)

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

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

13. Консоль Lucida (моноширинный)

Консоль

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

14. Монако (монокосмический)

Моноширинный шрифт без засечек Monaco встроен в macOS и в результате будет более знаком пользователям Apple.

15. Брэдли Хэнд (курсив)

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

16. Brush Script MT (курсив)

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

17. Луминари (фэнтези)

Шрифты

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

18. Comic Sans MS (курсив)

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

Тем не менее, Comic Sans полезен по причинам доступности: поскольку в нем отсутствуют похожие буквенные формы, такие как p / q и b / d, люди с дислексией, как правило, испытывают меньше трудностей с ним, чем с обычными шрифтами.

Используйте безопасные веб-шрифты CSS и HTML для своих проектов

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

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

Примечание редактора: этот пост был первоначально опубликован в марте 2020 года и был обновлен для полноты.

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

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

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

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

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

Но сначала, как выбрать правильный шрифт для своего проекта графического дизайна?

  • Выберите категорию типа (например, старый стиль, современный, Slab Serif, Sans Serif, Script, декоративный). Не уверены в своих типах категорий?
  • Вы комбинируете шрифты? Используйте бесплатные шрифты для более профессионального вида. Смотрите наши лучшие сочетания шрифтов здесь.
  • Сколько текста нужно прочитать? Какова его цель? Вы делаете дизайн для плаката, книги, отчета? Что важнее — читабельность или эстетика? Какова цель текста? Серьезный образ, повседневный образ, декоративный вид?
  • Оцените качество принтера и бумаги .Где вы распечатываете свою работу?
  • Сколько места вам нужно заполнить? Или оставить незаполненными? Различные гарнитуры занимают разное пространство даже при одинаковом кегле. Попробуйте сравнить два шрифта рядом друг с другом и посмотрите, сколько разницы они занимают в комнате.
  • Это проект для беглого просмотра или для чтения? Выберите шрифт и макет, соответствующие его назначению.

Другие подборки лучших профессиональных шрифтов

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

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

  1. Helvetica
  2. Траян
  3. Гарамонд
  4. Футура
  5. Бодони
  6. Скрипт Бикхема Pro
  7. Фрутигер
  8. Сабон
  9. Роквелл
  10. Проксима Нова

10 лучших профессиональных шрифтов

НЕОГРАНИЧЕННЫХ ЗАГРУЗОК
: Загрузите более 50 миллионов шрифтов, бесплатных подарков и дизайна.
Ресурсы

Вы ищете профессиональный шрифт для своего следующего проекта графического дизайна? См. Наш список 10 лучших профессиональных шрифтов для дизайнеров.

1. Helvetica / Helvetica Neue / Helvetica Now

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

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

Вам также следует рассмотреть новую версию 2019 года, Helvetica Now .

2. Траян

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

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

3. Гарамонд

Несмотря на то, что существует множество версий Garamond, наиболее часто используемой версией сегодня является версия Adobe ITC Garamond (как показано выше), выпущенная в 1989 году. Garamond — отличный шрифт для журналов, учебников, веб-сайтов и длинных текстов и недавно был назван вторым лучшим шрифтом (после Helvetica) немецким изданием.

4. Futura

Futura — это шрифт, который часто используется на больших дисплеях , логотипах, корпоративных шрифтах и ​​в книгах , где требуется мелкий текст.Он основан на геометрических формах (почти идеальные круги, треугольники и квадраты), которые стали представителем стиля дизайна Баухаус 1919-1933 годов. Futura отличается эффективностью и прогрессивностью. Однако некоторые ненавидят шрифт.

5. Бодони

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

6. Скрипт Бикхема Pro

Используется в основном для официальных случаев. , Bickham Script Pro — это шрифт, который хорошо справляется со своей задачей… Кэмерон Молл даже рекомендовал его в своей статье «Гарнитуры, за использование которых никто не будет уволен». «Неопытный» дизайнер обычно ручается за Vivaldi, который является одним из самых ненавистных шрифтов Америки. Еще одна отличная альтернатива — шлюп.

7. Frutiger

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

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

8. Sabon

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

9. RockWell

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

10. Проксима Нова

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

Существует три ширины на выбор, включая Proxima Nova, Proxima Nova Condensed и Proxima Nova Extra Condensed. Каждая ширина состоит из 16 шрифтов — семи толщин с соответствующим курсивом.

📌 Сохраните этот пост о профессиональных шрифтах… Закрепите изображение ниже!

Другие лучшие профессиональные шрифты

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

Заметили, что ни один из этих шрифтов не загружается бесплатно?


НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: 50 миллионов + шрифтов и элементов дизайна

Все необходимые шрифты и многие другие элементы дизайна доступны по ежемесячной подписке, подписавшись на Envato Elements.Подписка стоит 16,50 долларов в месяц и дает неограниченный доступ к огромной и постоянно растущей библиотеке, состоящей из 50 миллионов + элементов, которые можно загружать столько раз, сколько вам нужно (также стоковые фотографии)!

СКАЧАТЬ


Glenn Sans с подпиской Envato Elements

Glenn Sans — хорошая альтернатива неизменно популярным Open Sans и Helvetica. Если вы хотите найти запоминающийся шрифт для своих абзацев, это семейство скандинавских шрифтов с 16 различными вариантами — довольно хороший выбор.

Загрузить сейчас


Mitga

с подпиской Envato Elements

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

Загрузить сейчас


Masterline

с подпиской Envato Elements

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

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

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