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

Статья
11/05/2024

Несколько слов, отображаемых в Segoe UI Variable

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

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

Совет

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

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

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

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

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

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

Вес

Имя веса	Значение оси веса	Визуальный элемент
Светлый	300
Полусвет	350
Периодически	400
Полуболд	600
Полужирный шрифт	700

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

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

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

Примеры

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

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

Шрифтовое оформление в приложениях Windows

Главное изображение

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

Шрифт

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

Пример текста шрифта Переменной пользовательского интерфейса Segoe.

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

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

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

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

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

Иерархия

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

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

Тип пандуса

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

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

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

Дополнительные сведения см. в руководстве по использованию пандуса типов XAML.

Точное понимание

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

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

<TextBlock TextAlignment="Left">

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

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

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

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

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

Граница экрана устройства с обрезкой текста

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

Пятый снимок экрана зеленой диаграммы, помеченной зеленым флажком и содержащей слово ''Do''. Текст клипа и оболочка, если включены несколько строк.

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

Примечание.

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

Языки

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

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

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

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

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

Fonts

Шрифты Sans-serif

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

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

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

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

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

Шрифты переменных

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

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

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

Семейство шрифтов	Стили	Примечания.
Segoe MDL2 Assets	Обычное	Шрифт пользовательского интерфейса для значков приложения. Дополнительные сведения см. в статье шрифта Segoe Fluent Icons.
Segoe UI Emoji	Обычное	Шрифт пользовательского интерфейса для Эмодзи.
Символ пользовательского интерфейса Segoe	Обычное	Резервный шрифт для символов.

Поделиться через

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

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