Михаил Юдин

Системные шрифты для веб 2019

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

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

Системные шрифты — что это такое

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

Windows

ВерсияШрифт
10Segoe UI1
8.1Segoe UI1
8Segoe UI1
7Segoe UI1
VistaSegoe UI1
XPTahoma2
Me (Millennium Edition)MS Sans Serif3
2000Tahoma2
98 Second EditionMS Sans Serif3
98MS Sans Serif3
NT 4MS Sans Serif3
95MS Sans Serif3
NT 3.5MS Sans Serif3
NT 3.1MS Sans Serif3
3.1MS Sans Serif3
3Helv3
2Helv3
1Helv3

Источник

Mac OS

ВерсияШрифт
10.15San Francisco
10.14 MojaveSan Francisco
10.13 High SierraSan Francisco
10.12 SierraSan Francisco
10.11 El CapitanSan Francisco
10.10 YosemiteHelvetica Neue
10.9 MavericksLucida Grande
10.8 Mountain LionLucida Grande
10.7 LionLucida Grande
10.6 Snow LeopardLucida Grande
10.5 LeopardLucida Grande
10.4 TigerLucida Grande
10.3 PantherLucida Grande
10.2 JaguarLucida Grande
10.1 PumaLucida Grande
10.0 CheetahLucida Grande

Источник

Linux

iOS

ВерсияШрифт
12San Francisco
11San Francisco
10San Francisco
9San Francisco
8Helvetica Neue
7Helvetica Neue
6Helvetica Neue
5Helvetica Neue
4Helvetica Neue
iPhone OS 3Helvetica
iPhone OS 2Helvetica
iPhone OS 1Helvetica

Источник

Android

ВерсияШрифт
4.3 и нижеDroid
5.0 Lollipop и вышеRoboto

Источник

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

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

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

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

Что такое эти системные семейства шрифтов

Ещё такие шрифты называют веб-безопасными. Список системных шрифтов на W3C Schools. Так же смотрите запись в блоге Scott Granneman.

Если интересуют надёжные источники — в блоге Scott Granneman перечислены ссылки.

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

В посте это опущу, оставлю пару ссылок:

Using UI System Fonts In Web Design: A Quick Practical Guide System Fonts in CSS

Мой вариант

Полазив по GitHub, Medium и некоторым другим ресурсам, пришёл к такому виду стека системных шрифтов 2019 года:

:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-sans-serif-condensed: "DINNextW01-CondensedMed", "AvenirNextCondensed-Bold", "Futura-CondensedExtraBold", HelveticaNeue-CondensedBold, "Ubuntu Condensed", "Liberation Sans Narrow", "Franklin Gothic Demi Cond", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Arial, "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
  --font-family-serif: Georgia, Times, Times New Roman, serif;
  --font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.condensed {
  font-family: var(--font-family-sans-serif-condensed);
  font-stretch: condensed;
}

GitHub Gist

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


Поддержать




Выключите пожалуйста блокировку рекламы для этого сайта чтобы поддержать проект
Автор:

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


Чтобы не пропускать новости, можно подписаться на email рассылку.


Остались вопросы или есть пожелания, замечания — пишите в комментарии:

Ещё почитать

Чеклист оптимизации скорости загрузки веб-приложения

Чеклист оптимизации скорости загрузки веб-приложения

Переход с PHPStorm или Intellij IDEA на VIM

Переход с PHPStorm или Intellij IDEA на VIM

Подсветка активных ссылок на чистом JavaScript

Подсветка активных ссылок на чистом JavaScript

Рендер текстовых шаблонов по данным из массива PHP

Рендер текстовых шаблонов по данным из массива PHP

Битва титанов: normalize.css против reset.css

Битва титанов: normalize.css против reset.css

CSS ищет баги в SEO: картинки без alt и внешние ссылки

CSS ищет баги в SEO: картинки без alt и внешние ссылки