Выбираем шрифты для сайта из 15 лучших вариантов
- Шрифты для сайта, совместимые с HTML и CSS
- Шрифты для сайта — что может быть не так?
- Самые популярные шрифты для веб-страниц
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
- Bookman
- Comic Sans MS
- Trebuchet MS
- Arial Black
- Impact
- Заключение
Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit, были созданы в качестве альтернативы с целью предоставить что-то новое.
Их очень просто использовать. Рассмотрим в качестве примера сервис Google Web Fonts.
Выбираете шрифт Open Sans, Droid Serif или Lato. Пишите код и вставляете его в элемент <head> HTML-документа. Все готово, чтобы ссылаться на него в CSS! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.
Какой-то шрифт может быть доступен не для всех. А это означает, что могут проблемы. Вы довольны тем, что выбрали красивые шрифты для сайта, а посетитель веб-страницы видит вместо них безобразную писанину.
Такого не случится, если реализовать резервный вариант.
Насколько важно применение безопасных веб-шрифтов?
У каждого устройства есть собственный набор предустановленных шрифтов. Какой именно, зависит от операционной системы. Беда в том, что между ними есть небольшие различия.
А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.
Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите, — один из стандартных вариантов.
Например, Times New Roman.
Поэтому как на вашем экране текст может выглядеть просто ужасно.
А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows, Mac, Google, а также Unix и Linux.
С помощью этой подборки дизайнеры, а также владельцы сайтов могут указать, какой именно шрифт следует применить в качестве резервного. Таким образом, появляется возможность контроля над тем, как будет выглядеть страница на разных устройствах.
В качестве запасного варианта разработчик подбирает шрифт, очень похожий на оригинальный, и именно он будет продемонстрирован пользователю.
Взглянем на подборку, в которой собраны стандартные шрифты HTML.
Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.
Helvetica — палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда (по крайней мере, в качестве подстраховки для других шрифтов).
Выполняет ту же роль для шрифтов с засечками, что и Arial для тех, что без засечек. Он является одним из самых популярных на Windows-устройствах. Это обновленная версия старого шрифта Times.
Стандартный шрифт CSS Times знаком большинству. Многим он запомнился по маленьким буквам в узких колонках старых газет. Самый обычный, ставший традицией, вид печати.
Похож на Times New Roman и применяется в качестве разновидности старой классики. Он также считается моноширинным шрифтом. В отличие от шрифтов с засечками и без, все его знаки имеют одинаковую ширину.
Старый шрифт фиксированной ширины, который используется в качестве резервного почти на всех устройствах и операционных системах.
Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.
Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana.
Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.
Palatino относится к эпохе ренессанса. Никаких шуток. Это еще один крупный шрифт, который идеально подходит для интернета. Обычно он используется в заголовках и рекламе.
Еще один старинный шрифт, который появился еще в 16 веке в Париже. Его новая и улучшенная версия входит в комплект стандартных в большинстве Windows-устройств. Позже данный шрифт был взят на вооружение и другими операционными системами.
Bookman (или Bookman Old Style) — один из лучших стандартных шрифтов для заголовков. Его характерная черта — удобочитаемость даже при использовании маленького размера.
Comic Sans MS — забавная альтернатива для шрифтов с засечками.
Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP. Сегодня с его помощью составляют основной текст.
Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica. А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию.
Еще один замечательный шрифт для выделения заголовков. Он хорошо смотрится в короткой фразе, состоящей из нескольких слов, а также в длинных предложениях.
Стандартные шрифты для сайта — это запасной вариант на случай провала плана А. Десятилетиями они широко используются на большинстве устройств.
А если нет? Helvetica не подкачает!
СМСергей Марочканичавтор статьи «15 Best Web Safe Fonts»
Шрифты в web-дизайне
Шрифты в web-дизайне- начертание: прямой, курсивный (свойство font-style)
- насыщенность: светлый, полужирный, жирный (свойство font-weight)
- ширина: нормальный, узкий, широкий (свойство font-stretch), шрифт фиксированной ширины (моноширинный)
- размер (кегль) – высота литер шрифта (свойства font-size, font-size-adjust)
- наличие (serif) или отсутствие (sans-serif) засечек на концах линий.
Это группы шрифтов Антиква, с засечками и Гротеск, без засечек:
Это группы шрифтов Антиква, с засечками и Гротеск, без засечек:Семейства шрифтов (свойство font-family)
- Шрифты с засечками, или антиква (font-family: serif):
- Times Georgia (шрифт Georgia)
- Times Georgia (шрифт Times New Roman)
- Шрифты без засечек, рубленые шрифты, или гротески (font-family: sans-serif)
- Arial, Helvetica
- Tahoma, Geneva
- Моноширинные шрифты, когда все знаки имеют одинаковую ширину (font-family: monospace)
- Courier New, Courier
- Lucida Console, Monaco
- Шрифты, имитирующие почерк (font-family: cursive)
- Comic Sans MS, Comic Sans, cursive
- Bradley Hand, cursive
- Декоративные шрифты, для названий и т.д. (font-family: fantasy)
- Impact, fantasy
- Luminari, fantasy
Много и разные.
- %, процент.
- cm, сантиметр.
- px, пиксель (от picture element). Используй для указания размеров элементов макета: блоков, изображений.
- em (название связано с шириной заглавной M) – относительная единица измерения, равная текущему указанному размеру шрифта. Спецсимвол HTML — имеет ширину в 1 em: «—». Используй для указания размеров шрифта!
- rem (от root em). 1 rem равен вычисленному значению font-size главного элемента. Используй для указания размеров шрифта!
- pt, пункт (desktop publishing point). Равен 1⁄72 дюйма, или 0.353 мм. Используется в Microsoft Word как основная единица.
Как устроено свойство font-size (размер шрифта) в CSS
- font-size наследуется по всему дереву документа
- Если нигде не было определено свойство font-size, то значение единичного em будет равно 16px, которое является значением по умолчанию
Подробнее о единицах размера и об их применении для шрифтов на сайте Консорциума Всемирной паутины (по-русски).
- Для выбора и подключения внешнего шрифта зайти на сайт fonts.google.com. На нем свободно доступно более 900 шрифтов.
- Не для всех шрифтов есть кириллическое написание. Поэтому, на Google Fonts необходимо указать язык шрифта:
- Для выбора шрифта нужно нажать на знак добавления «+» в верхнем правом углу блока шрифта. Появится черная полоса снизу с указанием количества выбранных шрифтов. По клику полоса раскрывается, показывая два блока кода.
- Первый блок — тег <link>. Вставить в «голову» (тег <head>) html-файла.
- Второй блок – правила css (свойство css font-family и значение, в котором указано название шрифта и его семейство) для использования выбранных шрифтов. Вставить в блок объявлений нужного селектора.
- Альтернатива – скачать шрифт с Font squirrel, справа в разделе Languages выбрать Cyrillic, скачать (форматы файлов ttf, otf, woff, svg) и подключить с помощью правила @font-face, рецепт.
Переносы строк и тег pre
- Для сохранения переносов строк используется тег <pre> или свойство white-space: pre
- Для тега pre по умолчанию установлен моноширинный шрифт: font-family: monospace.
«Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.
Его пример другим наука; Но, боже мой, какая скука С больным сидеть и день и ночь, Не отходя ни шагу прочь!
Какое низкое коварство Полуживого забавлять, Ему подушки поправлять, Печально подносить лекарство, Вздыхать и думать про себя: Когда же черт возьмет тебя!»
Шрифты для латинского алфавита
Dancing+Script. Minus, dolore unde laborum ab ut quasi nihil recusandae error, laboriosam optio omnis nesciunt explicabo deleniti reprehenderit in excepturi adipisci expedita et animi neque assumenda veniam at molestias numquam.
Calistoga. Quisquam ullam fugiat pariatur dolore assumenda deserunt minima mollitia.
Recusandae vero tempora id.
Odibee+Sans. Tempora beatae suscipit voluptatem libero, optio voluptatum quod, cumque, asperiores sit quia iusto corrupti officiis eaque animi nemo sint?
Caveat. Ullam doloribus cupiditate soluta, facere, nulla at quas unde magnam perferendis molestias ex quisquam quia!
Ссылки
- безопасные шрифты, сочетание шрифтов
- Распространенные шрифты: примеры
- Семейства и стили шрифтов на сайте Консорциума Всемирной паутины (по-русски)
- CSS Fonts, W3C Recommendation
- Понимание em-значений в CSS
шрифтов Fontspring с поддержкой кириллицы
Proxima Nova Студия Марка Симонсона 16 стилей От $29.00
Купить
Proxima Nova Condensed Студия Марка Симонсона 16 стилей
Купить
Proxima Nova Extra Condensed Студия Марка Симонсона 16 стилей От $29,00
Купить
Myriad® Pro
Adobe
40 стилей
От $35.
00
Купить
София Про Мостардизайн 17 стилей 1 шрифт бесплатно!
Купить
Futura PT Паратип 22 стиля От $30,00
Купить
Купить
Nocturne Serif МАЧАЛЬСКИЙ 20 стилей От $29.00
Купить
Гарет Введите вперед 23 стиля 2 шрифта бесплатно!
Купить
Bebas Neue Pro Тип Дхармы 40 стилей
Купить
Cera Pro TypeMates 12 стилей От $59.00
Купить
Quincy CF Дизайн шрифта Коннари Фагена 16 стилей От $25.00
Купить
Проксима Софт
Студия Марка Симонсона
16 стилей
От $29.
00
Купить
Аппарат Письмосуп 88 стилей От $45.00
Купить
Greycliff CF Дизайн шрифта Коннари Фагена 18 стилей От $25.00
Купить
TT Norms® Pro Тип 82 стиля От $35.00
Купить
Стандартный ТТ CastleType 38 стилей От $59,00
Купить
Функция Pro Компания ФонтСайт. 21 стиль От $19.00
Купить
Аверта Костас Барцокас 48 стилей От $15.00
Купить
Zing Rust Шрифтовая фабрика 521 стиль От $27.00
Купить
Garamond Premier Pro Adobe 34 стиля От $35.00
Купить
Franklin Gothic FS
Компания ФонтСайт.
16 стилей
6 шрифтов бесплатно!
Купить
Exo Soft Nузнать 18 стилей От $35.00
Купить
Новости Готика Паратип 14 стилей От $30.00
Купить
Актифо Студия дегаризма 28 стилей От $45.00
Купить
Миссис Лук Гипопотам Студия 38 стилей
Купить
Brandon Grotesque Condensed HVD-шрифты 12 стилей От $40.00
Купить
Проксима Вара Студия Марка Симонсона 1 стиль От $99.00
Купить
TT Commons Classic Тип 24 стиля От $35.00
Купить
Гротеск Акеруса Тип горизонта 20 стилей 2 шрифта бесплатно!
Купить
Core Sans CR
Счет
18 стилей
От $20.
00
Купить
Геометрия Браунфокс 24 стиля От $45.00
Купить
Visby CF Дизайн шрифта Коннари Фагена 16 стилей От $25,00
Купить
Articulat CF Дизайн шрифта Коннари Фагена 20 стилей От $25.00
Купить
DietDidot Паратип 9 стилей От $30.00
Купить
Waverly CF Дизайн шрифта Коннари Фагена 7 стилей От $25.00
Купить
Баллинджер Тип сигнала Литейный завод 16 стилей От $50.00
Купить
Дека Австралийский литейный завод 8 стилей От $40.00
Купить
Мадлен
Шрифтовая фабрика
4 стиля
От $37.
00
Купить
Ной Шрифтовая фабрика 72 стиля 4 шрифта бесплатно!
Купить
Музей кириллицы exljbris Font Foundry 10 стилей 1 шрифт бесплатно!
Купить
Anglecia Pro Text Тип монетного двора 10 стилей 2 шрифта бесплатно!
Купить
TT Rounds Neue Тип 55 стилей
Купить
Трафарет Rothek Гротескли Ваш 21 стиль 2 шрифта бесплатно!
Купить
Контракс Типодермические Шрифты Inc. 14 стилей 1 шрифт бесплатно!
Купить
Houschka Pro G-тип 12 стилей
Купить
Cocogoose Pro
Зетафонты
27 стилей
От $39.
00
Купить
Player Pro Канада Тип 11 стилей От $30.00
Купить
Золотая книга Студия Марка Симонсона 6 стилей От $29.00
Купить
Монт. Шрифтовая фабрика 20 стилей От $35.00
Купить
OpenType
Поддержка функций OpenType в приложениях
Таблица основана на статье Мартина Вензеля «Введение в функции замены OpenType»
Технология шрифтов OpenType | Информационная брошюра, 2011 г. | URW++ DESIGN & DEVELOPMENT GMBH
Брошюра OpenType URW++
ССЫЛКА ДЛЯ СКАЧИВАНИЯ
Почему нам необходимо понимать функции OpenType
Многие программы для создания шрифтов в настоящее время предлагают упрощенные способы создания функций OpenType. Но когда что-то пойдет не так, эти программы не смогут нам помочь.
Итак, нам нужно понять структуру, логику и синтаксис функций OpenType.
Как и в любом другом процессе, которым мы хотим научиться управлять, нам нужно начать с некоторого обучения. Вот основные ресурсы для функций OpenType.
Tal Leming: OpenType Cookbook
Martin Wenzel, Christoph Koeberlin: Introduction to OpenType Substitution Features
Glyphs: Tutorials Tagged «OpenType Features»
Общие/стандартные лигатуры (лига)
Эта функция заменяет последовательность глифов одним глифом , называемая лигатурой, которая предпочтительнее для типографских целей. Если эта функция включена, она вставляет лигатуры, которые, по мнению дизайнера/производителя, следует использовать в нормальных условиях.
Функция лигатур включена по умолчанию, что означает, что она должна работать без необходимости писать какой-либо CSS, но по умолчанию она не включена в Chrome. Кроме того, его нельзя отключить в Safari (Mac или iOS). А в некоторых версиях Chrome и Firefox возникают проблемы с лигатурами, содержащими пробелы.
Пример ЛИГА | Гарнитура Vollkorn
.clig-off {
вариантов-лигатур шрифта: нет-общих-лигатур;
цвет: серый;
семейство шрифтов: Vollkorn;
размер шрифта: 4em;
}
ff, fi, fl, ffi
.liga {
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: «лига», «клиг»;
-webkit-font-feature-settings: «лига», «клиг»;
настройки функции шрифта: «liga», «clig»;
цвет: серый;
семейство шрифтов: Vollkorn;
размер шрифта: 4em;
}
ff, fi, fl, ffi
ff, fi, fl, ffi ▶ ff, fi, fl, ffi
Заглавные буквы (smcp)
По умолчанию функция заглавных букв отключена. Чтобы включить его с помощью свойства font-variant или подсвойства font-variant-caps, используйте значение small-caps. Чтобы добиться того же эффекта с настройками функции шрифта, используйте тег функции «smcp».
Обратите внимание, что в некоторых шрифтах функция малых заглавных букв может также включать другие формы.
Согласно спецификации OpenType, функция smcp OpenType «может включать формы, связанные с маленькими прописными буквами, такие как цифры в старом стиле».
Пример SMCP | Гарнитура Vollkorn
Функция малых заглавных букв по умолчанию отключена.
.smcp {
шрифт-вариант-заглавные: маленькие заглавные;
-moz-настройки-настройки-шрифта: «smcp»;
-webkit-font-feature-settings: «smcp»;
настройки функции шрифта: «smcp»;
семейство шрифтов: Vollkorn;
размер шрифта: 2.0em;
}
Функция малых заглавных букв включена.
См. код .smcp.
Кернинг (керн)
Отрегулируйте расстояние между глифами, чтобы обеспечить оптически согласованный интервал между глифами.
Пример KERN | Гарнитура Vollkorn
Функция кернинга
.kern {
-moz-font-feature-settings:»kern» 1;
-ms-настройки-настройки-шрифта: «kern» 1;
-o-настройки-настройки-шрифта: «керн» 1;
-webkit-font-feature-settings:»kern» 1;
настройки функции шрифта: «kern» 1;
кернинг шрифта: обычный;
семейство шрифтов: Vollkorn;
размер шрифта: 2.
0em;
}
Функция кернинга включена. См. код .kern.
Фигурки старого стиля (онум)
Функция фигур в старом стиле по умолчанию отключена. Посмотрите пример, как включить фигуры в старом стиле.
Пример ONUM | Гарнитура Vollkorn
Функция онума
.onum {
-moz-настройки-настройки-шрифта: «onum» 1;
-ms-настройки-настройки-шрифта: «onum» 1;
-o-настройки-настройки-шрифта: «onum» 1;
-webkit-font-feature-settings: «onum» 1;
настройки функции шрифта: «onum» 1;
семейство шрифтов: Vollkorn;
размер шрифта: 2.0em;
}
Функция onum включена 0123456789. См. код .onum.
Цифры выравнивания (lnum)
Функция фигур выравнивания отключена по умолчанию. Посмотрите пример, как включить подкладку фигур.
Пример LNUM | Гарнитура Roboto
Функция lnum
.lnum {
шрифт-вариант-числовой: подкладка-номера;
-moz-настройки-настройки-шрифта: «lnum»;
-webkit-font-feature-settings: «lnum»;
настройки функции шрифта: «lnum»;
семейство шрифтов: Roboto;
размер шрифта: 2.
