Condividi tramite

Tipografia in Windows

  • Articolo

Diverse parole di cui è stato eseguito il rendering in Segoe UI Variable

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.

Il rendering della parola 'Segoe' in Segoe UI Variable con diversi aspetti del carattere tipografico evidenziato

Pesi

Nome peso Valore dell'asse di peso Oggetto visivo
Chiaro 300 La parola 'Segoe' sottoposta a rendering in Segoe UI Variable light
Semilight 350 Il rendering della parola 'Segoe' in Segoe UI Variable semilight
Regolare 400 La parola 'Segoe' sottoposta a rendering in Segoe UI Variable regular
Semibold 600 La parola 'Segoe' sottoposta a rendering in Segoe UI Variable semibold
Grassetto 700 Il rendering della parola 'Segoe' viene eseguito in grassetto in Segoe UI Variable

Asse ottico

Una lettera minuscola di cui viene eseguito il rendering in Segoe UI Variable con contorni delle diverse forme che può avere in base al contesto in cui viene eseguito il rendering

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

Aprire l'app Raccolta WinUI 3 e vedere Principi di tipografia in azione.

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

immagine di banner

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.

Testo di esempio del tipo di carattere Variabile dell'interfaccia utente di Segoe.

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.

Distanze di visualizzazione per dispositivi diversi.

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.

Screenshot contenente tre righe di testo in cui le dimensioni del tipo di carattere vengono ridotte da una riga a quella successiva.

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
Esempio di testo della didascalia Piccolo 12/16 epx
Esempio di testo del corpo Testo 14/20 epx
Esempio di testo sicuro del corpo Testo semibold 14/20 epx
Esempio di testo grande del corpo Testo 18/24 epx
Esempio di testo del sottotitolo Display semibold 20/28 epx
Esempio di testo del titolo Display semibold 28/36 epx
Esempio di testo grande del titolo Display semibold 40/52 epx
Esempio di testo visualizzato 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.

Mostra il testo a sinistra dello scaricamento.

<TextBlock TextAlignment="Left">

Numero caratteri

Quarto screenshot contenente una barra verde con un segno di spunta verde e la dicitura Sì.Usare 50-60 caratteri per riga per facilitare la lettura.

Non 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 .

Mostra un frame di un dispositivo con una porzione di testo ritagliata.

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

Quinto screenshot contenente una barra verde con un segno di spunta verde e la dicitura Sì. Taglia il testo e lo avvolge se sono abilitate più righe.

Non 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.