Типография в Windows

Несколько слов, отображаемых в переменной пользовательского интерфейса Segoe

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

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

Совет

В этой статье описывается, как Fluent Design language применяется к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Typeography.

Использование переменной Segoe Fluent

Переменная пользовательского интерфейса Segoe поддерживает два оси для более точного управления текстом: вес и оптический размер.

  • Ось веса (wght) изменяется постепенно, начиная с Тонкого (100) и заканчивая Жирным (700).
  • Ось оптического размера (opsz) включена автоматически и по умолчанию. Он управляет фигурой и размером счетчиков в шрифте, чтобы определить приоритет удобочитаемости на небольших размерах и личности на больших размерах (для оптического масштабирования от 8pt до 36pt).

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

Слово

Вес

Имя веса Значение оси веса Визуальный элемент
Свет 300 Слово 'Segoe', отображаемое в Segoe UI Variable Light
Полусвет 350 Слово 'Segoe', отображаемое шрифтом Segoe UI Variable в стиле полуполужирный
Периодически 400 Слово 'Segoe', отображаемое шрифтом Segoe UI Variable регулярного начертания
Полуболд 600 Слово 'Segoe', отображаемое шрифтом Segoe UI Variable полужирным
Жирный 700 Слово 'Segoe' отображается в полужирном шрифте Segoe UI Variable

Оптитическая ось

Строчная буква

Рекомендации по типографии в Windows 11

Windows 11 использует переменную пользовательского интерфейса Segoe со следующими атрибутами в зависимости от контекста, в котором отображается текст.

Атрибут Значение Примечания.
Вес Обычный, Semibold Используйте регулярный вес для большей части текста, используйте полужирный для заголовков
Выравнивание Слева, Центр Выравнивание по левому краю по умолчанию, выравнивание по центру только в редких случаях, например, для текста под значками.
Минимальные значения 14px Полужирный, 12px Обычный Текст меньше этих размеров и весов является неразборчивым на некоторых языках
Оболочка Дело предложения Используйте регистр предложений для всего текста пользовательского интерфейса, включая заголовки
Усечение Многоточие и вырезка В большинстве случаев используйте многоточие; обрезка используется только в редких случаях

Примеры

Откройте приложение коллекции WinUI 3 и просмотрите принципы оформления в действии

Приложение Галерея WinUI 3 включает интерактивные примеры большинства элементов управления WinUI, функций и возможностей. Получите приложение из Microsoft Store или получите исходный код на GitHub

Типография в приложениях Windows

изображение героя

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

Шрифт

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

Пример текста шрифта Segoe UI Variable.

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

Размер и масштабирование

Размеры шрифтов в приложениях XAML автоматически масштабируется на всех устройствах. Алгоритм масштабирования гарантирует, что шрифт 24 px на большом экране, расположенном на расстоянии 3 метров, так же четко читаем, как шрифт 24 px на небольшом экране, который находится в нескольких сантиметрах.

просмотр расстояний для разных устройств.

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

Иерархия

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

Снимок экрана: три строки текста, где размер шрифта меньше от одной строки до следующей.

Тип пандуса

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

Windows 11 используются следующие значения для различных типов текста в пользовательском интерфейсе.

Пример Вес Высота или размер линии
Пример текста заголовка Небольшой 12/16 epx
Пример текста Текст 14/20 epx
Пример текста с жирным шрифтом Полужирный текст 14/20 epx
Пример большого текста Текст 18/24 пикселей
Пример крупного жирного текста Полужирный текст 18/24 пикселей
Пример текста субтитров Отображение полужирным 20/28 еpx
Пример текста заголовка Отображение полужирным 28/36 epx
Пример большого текста заголовка Отображение полужирным 40/52 EPX
Пример отображения текста Отображение полужирным 68/92 epx

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

Примечание.

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

Выравнивание

По умолчанию TextAlignment имеет значение Left, и в большинстве случаев выравнивание по левому краю и неровный правый край обеспечивают согласованную привязку содержимого и равномерный макет. Языки RTL см. в разделе "Настройка макета и шрифтов для поддержки глобализации".

Отображает текст влево. 

<TextBlock TextAlignment="Left">

Количество символов

Четвертый снимок экрана: зеленая полоса с зеленой галочкой и словом Do в нем. Оставить до 50–60 букв на строку для удобства чтения.

Не надо Не используйте менее 20 символов или более 60 символов на строку, так как это трудно читать.

Вырезка и многоточие

Если объем текста выходит за рамки доступного пространства, рекомендуется вырезать текст и вставлять многоточие [...], что является поведением по умолчанию большинства элементов управления текстом WinUI.

Показывает кадр устройства с фрагментом текста. 

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

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

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

Примечание.

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

Языки

Segoe UI Variable — это наш шрифт для английского, европейского языка, греческого и русского. Для других языков см. следующие рекомендации.

Глобализация и локализация шрифтов

Используйте API сопоставления шрифтов LanguageFont для программного доступа к рекомендуемой семейству шрифтов, размеру, весу и стилю для определенного языка. Объект LanguageFont предоставляет доступ к правильным сведениям о шрифте для различных категорий содержимого, включая заголовки пользовательского интерфейса, уведомления, текст текста и шрифты текста документа, редактируемые пользователем. Дополнительные сведения см. в разделе "Настройка макета и шрифтов для поддержки глобализации".

Шрифты для языков, отличных от латиниции

Семейство шрифтов Стили Примечания.
Эббрима Обычный, полужирный Шрифт пользовательского интерфейса для африканских скриптов (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Гадуги Обычный, полужирный Шрифт пользовательского интерфейса для североамериканских систем письма (канадское слоговое письмо, чероки, осейджи).
Пользовательский интерфейс Leelawadee Обычный, Полусветлый, Полужирный Шрифт пользовательского интерфейса для письменностей Юго-Восточной Азии (Бугинский, Кхмерский, Лаосский, Тайский).
Малгун Готика Регулярный Шрифт пользовательского интерфейса для корейского языка.
Майкрософт пользовательский интерфейс JhengHei Обычный, Полужирный, Светлый Шрифт пользовательского интерфейса для традиционного китайского языка.
Майкрософт YaHei UI Обычный, Полужирный, Светлый Шрифт пользовательского интерфейса для упрощенного китайского языка.
Текст Мьянмы Регулярный Резервный шрифт для письменности Мьянмы.
Пользовательский интерфейс Nirmala Обычный, Полусветлый, Полужирный Шрифт пользовательского интерфейса для сценариев Южной Азии (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Малаялам, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Пользовательский интерфейс Segoe Регулярный, курсив, Светлый курсив, Черный курсив, Полужирный, Полужирный курсив, Светлый, Полусветлый, Полужирный, Черный Шрифт пользовательского интерфейса для арабского, армянского, грузинского и иврита.
СимСан Регулярный Устаревший китайский шрифт пользовательского интерфейса.
Готический пользовательский интерфейс Yu Светлый, полусветлый, обычный, плотный, полужирный Шрифт пользовательского интерфейса для японского языка.

Шрифты

Шрифты Sans-serif

Шрифты Sans-serif являются отличным выбором для заголовков и элементов пользовательского интерфейса.

Семейство шрифтов Стили Примечания.
Arial Регулярный, курсив, полужирный, полужирный курсив, чёрный Поддерживает европейские и ближневосточные сценарии (латинский, греческий, кириллический, арабский, армянский и иврит). Чёрный шрифт поддерживает только европейские алфавиты.
Калибри Регулярный, курсив, полужирный, полужирный курсив, светлый, светлый курсив Поддерживает европейские и ближневосточные скрипты (латинский, греческий, кириллический, арабский и иврит). Арабский язык доступен только на вертикальных дисплеях.
Консолы Обычный, курсив, полужирный, полужирный курсив Шрифт фиксированной ширины, поддерживающий европейские скрипты (латинский, греческий и кириллический).
Пользовательский интерфейс Segoe Регулярный, курсив, Светлый курсив, Черный курсив, Полужирный, Полужирный курсив, Светлый, Полусветлый, Полужирный, Черный Шрифт пользовательского интерфейса для европейских и ближневосточных письменностей (арабская, армянская, кириллическая, грузинская, греческая, иврит, латиница), а также письменность Лису.
Селовик Обычный, Полусвет, Свет, Полужирный, Полуболд Шрифт с открытым исходным кодом, совместимый с пользовательским интерфейсом Segoe, предназначенный для приложений на других платформах, которые не хотят упаковать пользовательский интерфейс Segoe. Get Selawik на GitHub.

Сережные шрифты

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

Семейство шрифтов Стили Примечания.
Камбрия Регулярный Шрифт с засечками, поддерживающий европейские алфавиты (латинский, греческий, кириллический).
Курьер New Обычный, курсив, полужирный, полужирный курсив Шрифт фиксированной ширины, поддерживающий европейские и ближневосточные скрипты (латиница, греческий, кириллический, арабский, армянский и иврит).
Грузия Обычный, курсив, полужирный, полужирный курсив Поддерживает европейские скрипты (латинский, греческий и кириллический).
Times New Roman Кириллица Обычный, курсив, полужирный, полужирный курсив Устаревший шрифт, поддерживающий европейские скрипты (латинский, греческий, кириллический, арабский, армянский, иврит).

Шрифты с изменяемыми параметрами

Переменные шрифты хорошо подходят для точного управления внешним видом текста.

Семейство шрифтов Оси Примечания.
Bahnschrift Вес, ширина Шрифт переменной, поддерживающий латинскую, грековую и кириллицу.
Переменная пользовательского интерфейса Segoe Вес, оптический размер Шрифт переменной, поддерживающий латинскую, грековую и кириллицу.

Символы и значки

Семейство шрифтов Стили Примечания.
Значки Segoe Fluent Регулярный Шрифт пользовательского интерфейса для значков приложения. Дополнительные сведения см. в статье о шрифте Segoe Fluent Icons.
Segoe UI Эмоджи Регулярный Шрифт пользовательского интерфейса для Эмодзи.
Символ пользовательского интерфейса Segoe Регулярный Резервный шрифт для символов.
  • Last updated on