Source Code Pro

Попробовать Source Code Pro

Насыщенности и начертания

• ExtraLight 200Source Code Pro ExtraLight ExtraLight Italic
• Light 300Source Code Pro Light Light Italic
• Regular 400Source Code Pro Regular Курсив
• Medium 500Source Code Pro Medium Medium Italic
• SemiBold 600Source Code Pro SemiBold SemiBold Italic
• Bold 700Source Code Pro Bold Bold Italic
• ExtraBold 800Source Code Pro ExtraBold ExtraBold Italic
• Black 900Source Code Pro Black Black Italic

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

О шрифте Source Code Pro

Source Code Pro — моноширинное семейство, адаптированное из Source Sans по просьбе сделать версию для приложений, где пишут код. Оно сохраняет вертикальные пропорции и общие формы гротеска, но придаёт каждому глифу одинаковую ширину во всех насыщенностях. На образце ноль с точкой в центре, строчная «l» загибается в основании, а у «i» и «j» брусковые засечки, что отделяет друг от друга символы, которые в коде легко спутать. Семейство вариативное, с осью насыщенности от 200 до 900: восемь именованных насыщенностей, от ExtraLight до Black, у каждой есть курсив. В шрифтах 1 556 глифов; по официальным заметкам, обновление 2019 года добавило греческий, кириллицу, вьетнамский и курсивные начертания. Семейство нарисовал Paul D. Hunt, в таблице name назван ещё Teo Tuominen, а выпускает его Adobe под SIL Open Font License 1.1.

Где уместен Source Code Pro

Редакторы кода и терминалы

Одинаковая ширина символов выравнивает отступы, а ноль с точкой и загнутая «l» отличают 0, O, 1 и l.

Темы подсветки синтаксиса с насыщенностью и курсивом

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

Техническая документация

Код в строке и листинги команд, набранные Source Code Pro, сочетаются с основным текстом в Source Sans, у которого те же пропорции.

Комментарии и строки на других письменностях

Наборы греческого, кириллицы и вьетнамского сохраняют комментарии и строковые литералы не на латинице в той же фиксированной ширине.

Таблицы данных и логи

Фиксированная ширина выравнивает метки времени, хеши и числовые столбцы в простом текстовом выводе.

Глифы

Поддержка языков

В семействе есть основные буквы, которыми пишут на этих языках:

• Английский
• Французский
• Немецкий
• Испанский
• Португальский
• Итальянский
• Нидерландский
• Шведский
• Норвежский
• Датский
• Финский
• Исландский
• Каталанский
• Турецкий
• Польский
• Чешский
• Словацкий
• Венгерский
• Румынский
• Хорватский
• Словенский
• Литовский
• Латышский
• Эстонский
• Вьетнамский
• Русский
• Украинский
• Болгарский
• Греческий

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

Наборы символов в файлах: cyrillic, cyrillic-ext, greek, latin, latin-ext, vietnamese. Список языков — это проверка наличия нужных букв в шрифте, а не гарантия типографского качества для каждого языка.

Лицензия

Шрифты в пару к Source Code Pro

Пары подобраны по простым правилам: контрастная классификация и достаточно насыщенностей для основного текста. Это отправная точка, а не окончательный выбор.

Подключение Source Code Pro на сайте

Скачайте семейство, разместите файлы на своём сайте и подключите их в CSS. Не ссылайтесь на файлы с trendhub.net: здесь лежат урезанные файлы для превью, и их адреса меняются.

@font-face {
  font-family: "Source Code Pro";
  src: url("/assets/fonts/SourceCodePro-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/assets/fonts/SourceCodePro-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Source Code Pro", monospace;
}

Или подключите шрифт из официального источника. Google Fonts отдаёт Source Code Pro с такой разметкой:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

Что важно знать

Экземпляр по умолчанию — ExtraLight

Ось насыщенности по умолчанию стоит на 200. В редакторах и CSS, которые не читают именованные экземпляры, задайте насыщенность, например 400, явно.

Два вариативных файла

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

Зарезервированное имя шрифта

В уведомлении лицензии зарезервировано имя Source, товарный знак Adobe, поэтому изменённым версиям нужно другое имя.

Вопросы и ответы

Подборки с Source Code Pro

• Моноширинные шрифты для программирования

  Семейства фиксированной ширины с открытой лицензией для редакторов и терминалов: с чётким нулём, несколькими насыщенностями и в большинстве случаев с курсивом.

• Шрифтовые системы: гротеск, антиква и моноширинный в паре

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

Похожие шрифты

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