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.
Tipo di 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.
Scegli un font per la tua interfaccia utente.
Non mischiare più font.
Assi a font variabile
Il font Segoe UI Variable contiene due assi per un controllo più preciso del testo. Questo font ha un asse di peso (wght) con pesi da Thin (100) a Bold (700). Dispone inoltre di un asse ottico delle dimensioni (opsz) per scalare otticamente 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.
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.
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.
Segui le indicazioni di Windows Gamma di dimensioni e formati dimensionamento.
Non utilizzare una dimensione di carattere inferiore a 12 px.
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 UWP in esecuzione su tutti i dispositivi.
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 maggiori informazioni, consulta l'articolo Segoe MDL2 assets . |
| Segoe UI Emoji | Regolare | Font dell'interfaccia utente per Emoji. |
| Simbolo Segoe UI | Regolare | Font di riserva per i simboli. |
Articoli correlati
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per