Tipografia nelle app di Windows

hero image

Come rappresentazione visiva del linguaggio, l'attività principale della tipografia consiste nel comunicare le informazioni. Gli stili scelti non dovrebbero mai deviare da questo obiettivo. In questo articolo illustreremo lo stile tipografico da adottare in un'app di Windows per aiutare gli utenti a comprendere il contenuto in modo semplice ed efficiente.

Carattere

È consigliabile usare un tipo di carattere nell'interfaccia utente dell'app e si consiglia di attenersi al tipo di carattere predefinito per le app Windows, Segoe UI Variable. È progettato per conservare una leggibilità ottimale con tutte le dimensioni e densità di pixel e offre un'estetica pulita, chiara e aperta che integra il contenuto del sistema.

Sample text of Segoe UI Variable font.

Per visualizzare lingue diverse dall'inglese o per selezionare un tipo di carattere diverso per l'app, vedi Lingue e Tipi di carattere per informazioni sui tipi di carattere consigliati per le app di Windows.

First screenshot of a green bar that has a green check mark and the word Do in it. Selezionare un tipo di carattere per l'interfaccia utente.

don't Non combinare più tipi di carattere.

Assi del tipo di carattere variabile

Il tipo di carattere Variabile interfaccia utente Segoe contiene due assi per il controllo più corretto del testo. Questo tipo di carattere ha un asse di peso () con pesi da Thin (wght100) a Bold (700). Ha anche un asse di dimensioni ottiche (opsz) per la scalabilità ottica da 8pt a 36pt. Quando si usano controlli comuni XAML, il tipo di carattere Variabile interfaccia utente di Segoe verrà selezionato per impostazione predefinita per le lingue supportate. Quando viene usato questo tipo di carattere o un altro tipo di carattere variabile con un asse ottico, le dimensioni ottiche corrispondono automaticamente alle dimensioni del tipo di carattere richieste. Quando si usa HTML, il ridimensionamento ottico è anche automatico, ma è necessario specificare il tipo di carattere Variabile dell'interfaccia utente Segoe in CSS.

Dimensioni e proporzioni

Le dimensioni dei caratteri nelle app UWP si adattano automaticamente su tutti i dispositivi. L'algoritmo di ridimensionamento garantisce che un tipo di carattere da 24 pixel su Surface Hub a 3 metri di distanza sia altrettanto leggibile di un tipo di carattere da 24 pixel su un telefono da 5 pollici a pochi centimetri di distanza.

viewing distances for different devices.

A causa del funzionamento del sistema di ridimensionamento, la progettazione avviene in pixel effettivi, non in pixel fisici reali, e non è necessario modificare le dimensioni dei caratteri per dimensioni o risoluzioni diverse dello schermo.

Second screenshot of a green bar that has a green check mark and the word Do in it.Seguire il ridimensionamento della rampa di tipo Windows.

don't Non usare una dimensione del carattere inferiore a 12 px.

Gerarchia

Gli utenti si basano su una gerarchia visiva quando analizzano una pagina: le intestazioni riepilogano il contenuto e il testo del corpo fornisce altri dettagli. Per creare una gerarchia visiva chiara nell'app, segui la gamma di dimensioni e formati previsti di Windows.

Screenshot of three lines of text where the font size gets smaller from one line to the next.

Gamma di dimensioni e formati previsti

La gamma di dimensioni e formati previsti da Windows stabilisce relazioni fondamentali tra gli stili dei caratteri di una pagina, consentendo agli utenti di leggere il contenuto facilmente. Tutte le dimensioni sono in pixel effettivi e sono ottimizzate per le app UWP in esecuzione su tutti i dispositivi.

The Windows type ramp.

Per altre informazioni, vedere le indicazioni sull'uso della rampa di tipo XAML .

Allineamento

Il TextAlignment predefinito è Left. Nella maggior parte dei casi l'allineamento a sinistra senza allineamento a destra fornisce un ancoraggio coerente del contenuto e un layout uniforme. Per le lingue RTL, vedi Modifica del layout e dei tipi di carattere a supporto della globalizzazione.

Shows flush-left text.

<TextBlock TextAlignment="Left">

Numero di caratteri

Fourth screenshot of a green bar that has a green check mark and the word Do in it. Mantenere fino a 50-60 lettere per riga per facilità di lettura.

don't Non usare meno di 20 caratteri o più di 60 caratteri per riga perché è difficile leggere.

Ritaglio e puntini di sospensione

Quando la quantità di testo si estende oltre lo spazio disponibile, è consigliabile ritagliare il testo e inserire puntini di sospensione [...], ovvero il comportamento predefinito della maggior parte dei controlli di testo UWP.

Shows a device frame with some text clipping.

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

Fifth screenshot of a green bar that has a green check mark and the word Do in it. Ritagliare il testo e eseguire il wrapping se sono abilitate più righe.

don't Non usare i puntini di sospensione per evitare il disordine visivo.

Nota

se i contenitori non sono ben definiti, ad esempio non hanno un colore di sfondo che li differenzi, o quando è presente un collegamento ad altro testo, usa i puntini di sospensione.

Linguaggi

Segoe UI Variable è il tipo di carattere per inglese, lingue europee, greco e russo. Per le altre lingue, vedi i suggerimenti seguenti.

Globalizzazione e localizzazione dei tipi di carattere

Usa le API di mappatura dei caratteri LanguageFont per l'accesso a livello di codice alle impostazioni consigliate di famiglia, dimensioni, spessore e stili dei caratteri per una particolare lingua. L'oggetto LanguageFont fornisce l'accesso alle informazioni corrette sul tipo di carattere per varie categorie di contenuto, ad esempio per le intestazioni dell'interfaccia utente, il corpo e i caratteri del corpo del documento modificabili dall'utente. Per altre info, vedi Modifica del layout e dei tipi di carattere a supporto della globalizzazione.

Tipi di carattere per lingue che non usano l'alfabeto latino

Famiglia di caratteri Styles Note
Ebrima Regular, Bold Tipo di carattere dell'interfaccia utente per gli script africani (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi Regular, Bold Tipo di carattere dell'interfaccia utente per gli script del Nord America (Canadese Syllabics, Cherokee, Osage).
Leelawadee UI

Regular, Semilight, Bold Tipo di carattere dell'interfaccia utente per gli script asiatici sud-orientale (Buginese, Khmer, Lao, Thai).
Malgun Gothic

Regular Tipo di carattere dell'interfaccia utente per il coreano.
Microsoft JhengHei UI

Regular, Bold, Light Tipo di carattere dell'interfaccia utente per il cinese tradizionale.
Microsoft YaHei UI

Regular, Bold, Light Tipo di carattere dell'interfaccia utente per il cinese semplificato.
Myanmar Text

Regular Tipo di carattere di fallback per lo script birmano.
Nirmala UI

Regular, Semilight, Bold Carattere dell'interfaccia utente per gli script dell'Asia meridionale (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI

Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black Tipo di carattere dell'interfaccia utente per arabo, armena, georgiano ed ebraico.
SimSun

Regular Tipo di carattere legacy dell'interfaccia utente per il cinese.
Yu Gothic UI

Light, Semilight, Regular, Semibold, Bold Tipo di carattere dell'interfaccia utente per il giapponese.

Fonts

Tipi di carattere sans-serif

I tipi di carattere sans-serif sono un'ottima scelta per i titoli e gli elementi dell'interfaccia Utente.

Famiglia di caratteri Styles Note
Arial Regular, Italic, Bold, Bold Italic, Black Supporta gli script europei e del Medio Oriente (alfabeto latino, greco, cirillico, arabo, armeno ed ebraico). Il peso nero supporta solo gli script europei.
Calibri Regular, Italic, Bold, Bold Italic, Light, Light Italic Supporta gli script europei e mediorientali (latino, greco, cirillico, arabo ed ebraico). Arabo disponibile solo nella variante dritta.
Consolas Regular, Italic, Bold, Bold Italic Tipo di carattere a larghezza fissa che supporta gli script europei (latino, greco e cirillico).
Segoe UI Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black Tipo di carattere dell'interfaccia utente per gli script europei e mediorientali (arabo, armeno, cirillico, georgiano, greco, ebraico, latino) e per lo script Lisu.
Selawik Regular, Semilight, Light, Bold, Semibold Tipo di carattere open source compatibile in modo metrico con l'interfaccia utente di Segoe, destinato alle app in altre piattaforme che non vogliono aggregare l'interfaccia utente di Segoe. Prendi Selawik su GitHub.

Tipi di carattere serif

I tipi di carattere serif sono adatti alla presentazione di grandi quantità di testo.

Famiglia di caratteri Styles Note
Cambria Regular Tipo di carattere serif che supporta gli script europei (latino, greco e cirillico).
Courier New Regular, Italic, Bold, Bold Italic Tipo di carattere a larghezza fissa serif che supporta gli script europei e del Medio Oriente (alfabeto latino, greco, cirillico, arabo, armeno ed ebraico).
Georgia Regular, Italic, Bold, Bold Italic Supporta gli script europei (latino, greco e cirillico).
Times New Roman Regular, Italic, Bold, Bold Italic Tipo di carattere legacy che supporta gli script europei (latino, greco, cirillico, arabo, armeno ed ebraico).

Tipi di carattere variabili

I tipi di carattere variabili sono adatti per controllare con precisione l'aspetto del testo.

Famiglia di caratteri Assi Note
Autostrada Peso, Larghezza Tipo di carattere variabile che supporta latino, greco e cirillico.
Variabile segoe dell'interfaccia utente Peso, Dimensione ottica Tipo di carattere variabile che supporta latino, greco e cirillico.

Simboli e icone

Famiglia di caratteri Styles Note
Segoe MDL2 Assets Regular Tipo di carattere dell'interfaccia utente per le icone delle app. Per altre info, vedi l'articolo Asset Segoe MDL2 .
Segoe UI Emoji Regular Tipo di carattere dell'interfaccia utente per Emoji.
Segoe UI Symbol Regular Tipo di carattere di fallback per i simboli.