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

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

Шрифт

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

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

Выберите один шрифт для пользовательского интерфейса.

Не смешивайте несколько шрифтов.

Оси шрифта переменных

Шрифт Segoe UI Variable содержит две оси для более точного управления текстом. Этот шрифт имеет ось веса (wght) с весами от Тонкий (100) до Полужирный (700). Он также имеет ось оптического размера (opsz) для оптического масштабирования от 8 до 36 пт. При использовании общих элементов управления XAML шрифт Segoe UI Variable будет выбран по умолчанию для поддерживаемых языков. При использовании этого шрифта или другого шрифта переменной с оптической осью оптический размер автоматически совпадает с запрошенным размером шрифта. При использовании HTML оптическое масштабирование также выполняется автоматически, но вам потребуется указать шрифт Segoe UI Variable в CSS.

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

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

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

Следуйте указаниям по размеру рампы типа Windows.

Не используйте размер шрифта меньше 12 пикселей.

Иерархия

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

Набор шрифтов

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

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

Соответствие

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

<TextBlock TextAlignment="Left">

Количество знаков

Храните до 50–60 букв на строку для удобства чтения.

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

Обрезка и многоточия

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

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

Обрезка текста и перенос, если включено несколько строк.

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

Примечание

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

Языки

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

Шрифты для глобализации и локализации

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

Шрифты для языков, не использующих латинский алфавит

Семейство шрифтов	Стили	Примечания
Ebrima	Обычный, полужирный	Шрифт пользовательского интерфейса для африканских сценариев (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Обычный, полужирный	Шрифт пользовательского интерфейса для североамериканских сценариев (канадские слоговые, чероки, осейдж).
Leelawadee UI	Обычный, полусветлый, полужирный	Шрифт пользовательского интерфейса для скриптов юго-восточной Азии (бугинский, кхмерский, лаосский, тайский).
Malgun Gothic	Обычный	Шрифт пользовательского интерфейса для корейского письма.
Microsoft JhengHei UI	Обычный, полужирный, светлый	Шрифт пользовательского интерфейса для традиционного китайского письма.
Microsoft YaHei UI	Обычный, полужирный, светлый	Шрифт пользовательского интерфейса для упрощенного китайского письма.
Myanmar Text	Обычный	Резервный шрифт для бирманского письма.
Nirmala UI	Обычный, полусветлый, полужирный	Шрифт пользовательского интерфейса для южноазиатских сценариев (Бангла, Чакма, Деванагари, Гуджарати, Гурмухи, Каннада, Малаялам, Метей Майек, Одия, Ол-Чики, Сингала, Сора Сомпенг, Тамиль, Телугу).
Segoe UI	Обычный, курсив, светлый курсив, черный курсив, полужирный, полужирный курсив, светлый, полусветлый, плотный, черный	Шрифт пользовательского интерфейса для арабского, армянского, грузинского и иврита.
SimSun	Обычный	Устаревший шрифт пользовательского интерфейса для китайского языка.
Yu Gothic UI	Светлый, полусветлый, обычный, плотный, полужирный	Шрифт пользовательского интерфейса для японского языка.

Fonts

Рубленые шрифты (без засечек)

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

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

Шрифты с засечками

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

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

Переменные шрифты

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

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

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

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

Похожие статьи

• Текстовые элементы управления
• Ресурсы темы XAML
• Стили XAML
• Шрифтовое оформление Майкрософт
• Переменные шрифты