Скачать modern font stacks - modern font stacks Скачать исходный код

Современные стеки шрифтов

System Font Stack CSS, организованная классификацией шрифтов для каждой современной ОС

Самые быстрые шрифты. Без загрузки, без сменов макета, без вспышек - просто мгновенные рендеры.

Система UI · Переходный · Старый стиль · Гуманист · Геометрический гуманист

Классический гуманист · неоторинг · монопросессионная плита · код моноспекции

Промышленная · округленная безрезультатная сля

Дополнительные функции / поддержка / плагины и расширения операционной системы

Система UI

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

CSS -шрифт стек

 font-family : system-ui , sans-serif;

System UI Stack Stack

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
Сан -Франциско	●	●	●	●	●	●	●	●	●
Segoe UI	●	●	●	●	●	●	●	●	●
Робото	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Кантарелл	●		●	●			●	●
Noto Sans	●	●	●	●	●	●	●	●	●

Примечания

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

Вернуться к вершине ↑

Переходной

Переходные шрифты - это смесь старого стиля и современных шрифтов, которые были разработаны во время просветления. Одним из самых известных примеров переходного шрифта является Times New Roman, который был разработан для газеты Times of London.

CSS -шрифт стек

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

Переходной стек шрифтов

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	400	700	900
Чартер	●	●	●
Битсдрема Хартия	●	●
Ситка текст	●	●
Камбрия	●	●
Noto Serif¹	●	●

Примечания

Charter-это фантастический и вневременный шрифт, разработанный Мэтью Картером в 1987 году для факсов с низким разрешением 300DPI и лазерных принтеров. У него большая X-Height, помогая с читаемостью, и прекрасно держится на сегодняшних экранах.
Хартия для MacOS имеет нечетное неразборчивое пространство (   ). Эта ошибка была сообщена Apple.
Ситка - еще один красивый шрифт, разработанный Мэтью Картером, который слегка напоминает хартию. Sitka была разработана в сотрудничестве Microsoft Advanced Technologies для чтения для оптимизации читаемости.
Android использует Noto Serif в качестве serif по умолчанию, поэтому не нужно указывать в стеке.

Вернуться к вершине ↑

Старый стиль

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

CSS -шрифт стек

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

Стек шрифтов старого стиля

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	400	700	900
Айоуэн старый стиль	●	●	●
Палатино -линотип	●	●
Urw palladio l	●	●
P052	●	●
Noto Serif¹	●	●

Примечания

Android использует Noto Serif в качестве serif по умолчанию, поэтому не нужно указывать в стеке.

Вернуться к вершине ↑

Гуманист

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

CSS -шрифт стек

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

Гуманистический стек шрифтов

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800
Серавак		●	●	●	●		●
Джилл Санс Нова			●	●			●	●
Ubuntu	●		●	●	●		●
Калибри			●	●			●
Деджаву Санс	●			●			●
Источник Sans Pro				●		●	●

Примечания

Gill Sans Nova доступна в качестве дополнительного загружаемого шрифта.
Source Sans Pro использует имени Source-Sans-Pro под Android, поэтому этот шрифт нацелен только на устройства Android.

Вернуться к вершине ↑

Геометрический гуманист

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

CSS -шрифт стек

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

Геометрический гуманистический стек шрифтов

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
Авенир			●	●	●			●	●
Монтсеррат	●	●	●	●	●	●	●	●	●
Корбель			●	●			●
Urw Gothic			●			●
Источник Sans Pro				●		●	●

Примечания

Авенир был выбран над Авениром, следующий для MacOS, потому что вес 300 гораздо более разборчив в Интернете по сравнению с 200 весом, который есть Avenir Next. Если вы ищете ультра-световый или ультра-черный, не стесняйтесь обмениваться Avenir на Avenir Next.
Source Sans Pro использует имени Source-Sans-Pro под Android, поэтому этот шрифт нацелен только на устройства Android.

Вернуться к вершине ↑

Классический гуманист

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

CSS -шрифт стек

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

Классический гуманистический стек шрифтов

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
Оптима				●			●		●
Кандара			●	●			●
Noto Sans	●	●	●	●	●	●	●	●	●
Источник Sans Pro				●		●	●

Примечания

Source Sans Pro использует имени Source-Sans-Pro под Android, поэтому этот шрифт нацелен только на устройства Android.

Вернуться к вершине ↑

Неотежеск

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

CSS -шрифт стек

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

Неотежеска

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
Меж	●	●	●	●	●	●	●	●	●
Робото	●	●	●	●	●	●	●	●	●
Helvetica Neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Нимбус Санс				●		●	●
Ариал				●		●	●

Примечания

Arial Nova доступна в качестве дополнительного загружаемого шрифта.
Roboto используется для Linux (MX Linux, Elementaryos и т. Д.) И ручной установки. Это не будет робото на Android, но общий Sans-Serif's Android.

Вернуться к вершине ↑

Моноспецская плита засечка

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

CSS -шрифт стек

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

Стек шрифтов с засечками для моноспек

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	400	700
Nimbus mono ps	●	●
Курьер новый	●	●
Cutive Mono	●

Примечания

Nimbus mono PS указан в первую очередь потому, что многие Linux Distros Создайте псевдоним имени для курьера, и не всегда представляют собой засечку плиты
Cutive Mono не нужно представлять в стеке, так как Android создает псевдоним для курьерских новых.
Cutive Mono, к сожалению, имеет только один вес

Вернуться к вершине ↑

Код моноспекции

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

CSS -шрифт стек

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

Степник шрифтов моноспективного кода

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800
SF Mono			●	●	●	●	●	●
Cascadia Code	●	●	●	●		●	●
Исходный код Pro		●	●	●	●	●	●	●
Менло				●			●
Консоля				●			●
Деджаву Санс Моно				●			●
Дроид без моно				●

Примечания

SF Mono доступен только через ui-monospace на MacOS 10.15+ и iOS 13,3+ при использовании Safari
Droid Sans Mono для Android не нужно указывать в стеке, так как monospace - это псевдоним для него имя

Вернуться к вершине ↑

Промышленное

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

CSS -шрифт стек

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

Промышленный шрифт стек

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
Дин Альтернативная							●
Франклин Готическая среда					●
Нимбус Санс узкий				●			●
Робото конденсировано	●	●	●	●	●	●	●	●	●

Примечания

Поскольку этот стек ограничен весами в рамках операционных систем, лучше всего использовать в качестве шрифта среднего/жирного шрифта дисплея
Bahnschrift является одним из первых переменных шрифта, добавленной в Windows.
Roboto Condensed использует имя Sans-Serif-Condensed под Android, поэтому этот шрифт нацелен только на устройства Android.

Вернуться к вершине ↑

Округлый без

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

CSS -шрифт стек

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

Окруженное без шрифтов

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
SF Pro округл	●	●	●	●	●	●	●	●	●
Хирагино Мару Готик				●
Зыбучие пески			●	●			●
Comfortaa			●	●			●
Манджари	●			●			●
Arial Crounded Mt							●
Arial Crounded Mt Bold							●
Калибри			●	●			●
Источник Sans Pro				●		●	●

Примечания

SF Pro Rugeded доступен только через ui-rounded на MacOS 10.15+ и iOS 13,3+ при использовании Safari
Hiragino Maru Gothic - это технически японский шрифт, но поддерживает всех латинских персонажей. Шрифт Mac не включает жирный жирник, поэтому на экране будет отображаться искусственная жирная шкала.
Arial Roundated MT необходим для Windows, в то время как Arial Roundated Mt Bold необходим для установки iOS, Mac и более старых Windows
Source Sans Pro использует имени Source-Sans-Pro под Android, поэтому этот шрифт нацелен только на устройства Android. Это не округлый шрифт, но здесь лучше, чем Робото.

Вернуться к вершине ↑

Slab Serif

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

CSS -шрифт стек

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

Степ

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	300	400	700	800
Роквелл			●	●
Роквелл Нова		●	●	●	●
Робото Плита	●	●	●	●
Dejavu Serif			●	●
Ситка маленькая			●	●
Noto Serif			●	●

Примечания

Роквелл включен в Windows Office
Rockwell Nova доступна в качестве дополнительного загружаемого шрифта.
Android использует Noto Serif в качестве serif по умолчанию, поэтому не нужно указывать в стеке.

Вернуться к вершине ↑

Античный

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

CSS -шрифт стек

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

Античный стек шрифтов

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	300	400	600	700	900
Superclarendon	●	●		●	●
Старый стиль книги		●		●
Урвник	●		●
Грузия Pro	●	●	●	●	●
Грузия		●		●
Noto Serif¹		●		●

Примечания

Georgia Pro доступен в качестве дополнительного загружаемого шрифта.
Android использует Noto Serif в качестве псевдонима для Georgia , поэтому не нужно указывать в стеке.

Вернуться к вершине ↑

Didone

Шрифты Didone, также известные как современные шрифты, характеризуются высоким контрастом между толстыми и тонкими ударами, вертикальным напряжением и серифами волос без скоплений. Стиль Дидона появился в конце 18 -го века и приобрел популярность в 19 веке.

CSS -шрифт стек

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

Didone Stack Stack

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	100	200	300	400	500	600	700	800	900
Дидо				●			●
Бодони Мт				●			●		●
Noto Serif Display	●	●	●	●	●	●	●	●	●
Urw palladio l				●			●
P052				●			●
Сильфаен				●
Noto Serif¹				●			●

Примечания

Android использует Noto Serif в качестве serif по умолчанию, поэтому не нужно указывать в стеке.
Sylfaen не включает в себя жирную жирную жидкость, поэтому на экране будет отображаться искусственная жирная шкала.

Вернуться к вершине ↑

Рукописный

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

CSS -шрифт стек

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

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

Просмотреть в вашем браузере (представление статьи / символы)

? Предварительный просмотр в операционных системах

✅ Вес и ноты шрифта

Вес шрифта	400	700
Segoe Print	●	●
Брэдли Рука		●
Чиланка	●
Tscu_comic	●
Вскоре	●

Примечания

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

Вернуться к вершине ↑

Дополнительные функции

Поддержка эмодзи

Хотите добавить местные смайлики на вашу страницу? Добавьте эти шрифты в конце стека шрифтов:

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji'

Анти-альцы

Отправить свой текст с анти-альцами, используя эти свойства CSS:

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

Поддержка операционной системы

Windows 7 или новее
Android 10 или более новее (очень ограниченным с 8 шрифтами)
iOS 9.3 или новее
MacOS 10.9 (Mavericks) или более новее
Linux (выборка 12 популярных дистрибутов)

Вернуться к вершине ↑

Плагины и расширения

Современные стеки шрифтов для Tailwind CSS от Borisanthony
Современные стеки шрифтов для WordPress от LittleBighthing
Современные стеки шрифтов поддерживаются изначально WebStudio

Вернуться к вершине ↑

Расширять