Tipografia in Windows
In quanto rappresentazione visiva del linguaggio, lo scopo principale della tipografia è comunicare informazioni. Il sistema dei tipi di Windows consente di creare struttura e gerarchia nel contenuto per ottimizzare la leggibilità e la leggibilità nell'interfaccia utente.
Segoe UI Variable è il nuovo tipo di carattere di sistema per Windows. Si tratta di una versione aggiornata del classico Segoe e usa la tecnologia dei tipi di carattere variabile per fornire dinamicamente grande leggibilità a dimensioni molto piccole e contorni migliorati a dimensioni di visualizzazione.
Suggerimento
Questo articolo descrive come viene applicato il linguaggio Fluent Design alle app di Windows. Per altre informazioni, vedere Fluent Design - Tipografia.
Uso di Segoe Fluent Variable
Segoe UI Variable supporta due assi per il controllo più fine del testo: peso e dimensioni ottiche.
- L'asse del peso (
wght) è incrementale con pesi da Thin (100) a Bold (700). - L'asse delle dimensioni ottiche (
opsz) è automatico e attivo per impostazione predefinita. Controlla la forma e le dimensioni dei contatori nel tipo di carattere, per classificare in ordine di priorità la leggibilità a piccole dimensioni e personalità a grandi dimensioni (per la scalabilità ottica da 8pt a 36pt).
Quando si utilizzano i controlli comuni XAML, il font Segoe UI Variable viene selezionato per impostazione predefinita per le lingue supportate . Quando si utilizza questo font o un altro font variabile con asse ottico, la dimensione ottica corrisponderà automaticamente alla dimensione del font richiesta. Se usi l'HTML, il ridimensionamento ottico è automatico, ma dovrai specificare il font Segoe UI Variable nel CSS.
Pesi
| Nome peso | Valore dell'asse di peso | Oggetto visivo |
|---|---|---|
| Chiaro | 300 |  |
| Semilight | 350 |  |
| Regolare | 400 |  |
| Semibold | 600 |  |
| Grassetto | 700 |  |
Asse ottico
Procedure consigliate per la tipografia in Windows 11
Windows 11 usa Segoe UI Variable con gli attributi seguenti in base al contesto in cui viene visualizzato il testo.
| Attributo | Valore | Note |
|---|---|---|
| Weight | Regular, Semibold | Usa spessore regolare per la maggior parte del testo, usa Semibold per i titoli |
| Allineamento | A sinistra, al centro | Allinea a sinistra per impostazione predefinita, allinea al centro solo in rari casi, ad esempio il testo sotto le icone |
| Valori minimi | 14px Semibold, 12px Regular | Il testo più piccolo di queste dimensioni e pesi è illeggibile in alcune lingue |
| Maiuscole/minuscole | Maiuscole/Minuscole frasi | Usa l'iniziale maiuscola per tutto il testo dell'interfaccia utente, inclusi i titoli |
| Troncamento | Puntini di sospensione e ritaglio | Usare i puntini di sospensione nella maggior parte dei casi; Il ritaglio viene usato solo in rari casi |
Esempi
L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub
Tipografia nelle app di Windows
In quanto rappresentazione visiva del linguaggio, lo scopo principale della tipografia è comunicare 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
Dovresti utilizzare un unico font per tutta l'interfaccia utente della tua applicazione e ti consigliamo di utilizzare il font predefinito per le applicazioni 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.
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.
Dimensioni e proporzioni
Le dimensioni dei caratteri nelle app XAML vengono ridimensionate automaticamente in tutti i dispositivi. L'algoritmo di ridimensionamento garantisce che un tipo di carattere da 24 px su uno schermo di grandi dimensioni a 10 metri di distanza sia leggibile come un tipo di carattere da 24 px su un piccolo schermo a pochi centimetri di distanza.
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.
Hierarchy
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.
Gamma di dimensioni e formati
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 di Windows in esecuzione in tutte le dimensioni dello schermo.
Windows 11 usa i valori seguenti per vari tipi di testo nell'interfaccia utente.
| Esempio | Peso | Dimensioni/altezza riga |
|---|---|---|
 |
Piccolo | 12/16 epx |
 |
Testo | 14/20 epx |
 |
Testo semibold | 14/20 epx |
 |
Testo | 18/24 epx |
 |
Display semibold | 20/28 epx |
 |
Display semibold | 28/36 epx |
 |
Display semibold | 40/52 epx |
 |
Display semibold | 68/92 epx |
Per maggiori dettagli, consulta la guida all'utilizzo 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.
<TextBlock TextAlignment="Left">
Numero caratteri
Usare 50-60 caratteri per riga per facilitare la lettura.
Non utilizzare meno di 20 caratteri o più di 60 caratteri per riga, in quanto la lettura è difficile.
Ritaglio ed ellissi
Quando la quantità di testo si estende oltre lo spazio disponibile, ti consigliamo di ritagliare il testo e inserire delle ellissi [...], che è il comportamento predefinito della maggior parte dei controlli di testo UWP .
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Taglia il testo e lo avvolge se sono abilitate più righe.
Non usare le ellissi 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.
Lingue
Segoe UI Variable è il nostro font per l'inglese, le lingue europee, il greco e il russo. Per le altre lingue, vedi i suggerimenti seguenti.
Globalizzazione/localizzazione dei font
Utilizza le API di mappatura dei font di LanguageFont per accedere in modo programmatico alla famiglia di font, alle dimensioni, al peso e allo stile consigliati per una determinata lingua. L'oggetto LanguageFont fornisce l'accesso alle informazioni sui font corretti per varie categorie di contenuti, tra cui le intestazioni dell'interfaccia utente, le notifiche, il testo del corpo e i font del corpo del documento modificabili dall'utente. Per maggiori informazioni, vedi Regolare il layout e i font per supportare la globalizzazione.
Caratteri per lingue non latine
| Famiglia di caratteri | Stili | Note |
|---|---|---|
| Ebrima | Regolare, in grassetto | Font di interfaccia utente per scritture africane (ADLaM, Etiopico, N'Ko, Osmanya, Tifinagh, Vai). |
| Gadugi | Regolare, in grassetto | Font per interfaccia utente per scritture nordamericane (Canadian Syllabics, Cherokee, Osage). |
| Leelawadee UI | Regolare, Semileggero, Grassetto | Font per interfaccia utente per le scritture del sud-est asiatico (Buginese, Khmer, Lao, Thai). |
| Malgun Gotico | Regolare | Font dell'interfaccia utente per il coreano. |
| Microsoft JhengHei UI | Normale, Grassetto, Leggero | Font dell'interfaccia utente per il cinese tradizionale. |
| Microsoft YaHei UI | Normale, Grassetto, Leggero | Font dell'interfaccia utente per il cinese semplificato. |
| Testo Myanmar | Regolare | Font di riserva per la scrittura Myanmar. |
| Nirmala UI | Regolare, Semileggero, Grassetto | Font per l'interfaccia utente per le scritture dell'Asia meridionale (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu). |
| Segoe UI | Regolare, Corsivo, Corsivo Chiaro, Corsivo Nero, Grassetto, Grassetto Italico, Leggero, Semileggero, Semibold, Nero | Font per interfaccia utente per arabo, armeno, georgiano ed ebraico. |
| SimSun | Regolare | Un font UI cinese tradizionale. |
| Yu Gothic UI | Light, Semilight, Regular, Semibold, Bold | Font dell'interfaccia utente per il giapponese. |
Tipi di carattere
Font Sans-serif
I font sans-serif sono un'ottima scelta per le intestazioni e gli elementi dell'interfaccia utente.
| Famiglia di caratteri | Stili | Note |
|---|---|---|
| Arial | Regolare, Italico, Grassetto, Grassetto Italico, Nero | Supporta le scritture europee e mediorientali (latino, greco, cirillico, arabo, armeno ed ebraico). Il peso nero supporta solo gli script europei. |
| Calibri | Regolare, Corsivo, Grassetto, Grassetto Corsivo, Leggero, Leggero Corsivo | Supporta le scritture europee e mediorientali (latino, greco, cirillico, arabo ed ebraico). Arabo disponibile solo nei montanti. |
| Consoli | Regolare, Italico, Grassetto, Grassetto Italico | Font a larghezza fissa che supporta le scritture europee (latino, greco e cirillico). |
| Segoe UI | Regolare, Corsivo, Corsivo Chiaro, Corsivo Nero, Grassetto, Grassetto Italico, Leggero, Semileggero, Semibold, Nero | Font di interfaccia utente per le scritture europee e del Medio Oriente (arabo, armeno, cirillico, georgiano, greco, ebraico, latino) e anche per la scrittura Lisu. |
| Selawik | Regular, Semilight, Light, Bold, Semibold | Un font open-source metricamente compatibile con Segoe UI, destinato alle app su altre piattaforme che non desiderano utilizzare Segoe UI in bundle. Ottieni Selawik su GitHub. |
Font serif
I font serif sono ottimi per presentare grandi quantità di testo.
| Famiglia di caratteri | Stili | Note |
|---|---|---|
| Cambria | Regolare | Font serif che supporta le scritture europee (latino, greco, cirillico). |
| Courier New | Regolare, Italico, Grassetto, Grassetto Italico | Font serif a larghezza fissa che supporta le scritture europee e mediorientali (latino, greco, cirillico, arabo, armeno ed ebraico). |
| Georgia | Regolare, Italico, Grassetto, Grassetto Italico | Supporta le scritture europee (latino, greco e cirillico). |
| Times New Roman | Regolare, Italico, Grassetto, Grassetto Italico | Font legacy che supporta le scritture europee (latino, greco, cirillico, arabo, armeno, ebraico). |
Font variabili
I font variabili sono ottimi per controllare con precisione l'aspetto del testo.
| Famiglia di caratteri | Assi | Note |
|---|---|---|
| Bahnschrift | Peso, larghezza | Font variabile che supporta il latino, il greco e il cirillico. |
| Variabile interfaccia utente Segoe | Peso, dimensioni ottiche | Font variabile che supporta il latino, il greco e il cirillico. |
Simboli e icone
| Famiglia di caratteri | Stili | Note |
|---|---|---|
| Segoe MDL2 Assets | Regolare | Font dell'interfaccia utente per le icone delle app. Per altre info, vedi l'articolo Relativo al tipo di carattere Segoe Fluent Icons. |
| Segoe UI Emoji | Regolare | Font dell'interfaccia utente per Emoji. |
| Simbolo Segoe UI | Regolare | Font di riserva per i simboli. |
