Caratteri

Gli utenti interagiscono con il testo più di qualsiasi altro elemento in Microsoft Windows. Segoe UI (pronunciato "SEE-go") è il tipo di carattere di sistema di Windows. Le dimensioni del carattere standard sono state aumentate a 9 punti.

Tipo di carattere segoe dell'interfaccia utente.

Segoe UI e Segoe non sono lo stesso tipo di carattere. Segoe UI è il tipo di carattere di Windows destinato alle stringhe di testo dell'interfaccia utente. Segoe è un tipo di carattere di personalizzazione utilizzato da Microsoft e dai partner per produrre materiale per la stampa e la pubblicità.

Segoe UI è un carattere tipografico intuitivo, aperto e descrittivo e di conseguenza offre una migliore leggibilità rispetto a Tahoma, Microsoft Sans Serif e Arial. Ha le caratteristiche di un umanista sans serif: le larghezze variabili dei suoi capitali (strette E e S, ad esempio, rispetto ad Helvetica, dove le larghezze sono più uguali, abbastanza ampie); lo stress e le forme letterali del suo minuscolo; e il suo vero corsivo (piuttosto che un romano "obliquo" o inclinato, come molti sans serifs dall'aspetto industriale). Il carattere tipografico è progettato per dare lo stesso effetto visivo sullo schermo e in stampa. È stato progettato per essere un umanista sans serif senza carattere forte o distrazione stranezza.

Segoe UI è ottimizzato per ClearType, che è attivato per impostazione predefinita in Windows. Con ClearType abilitato, Segoe UI è un tipo di carattere elegante e leggibile. Senza ClearType abilitato, l'interfaccia utente di Segoe è accettabile solo marginalmente. Questo fattore determina quando usare l'interfaccia utente di Segoe.

Segoe UI include caratteri latini, greci, cirillico e arabi. Sono disponibili nuovi tipi di carattere, ottimizzati anche per ClearType, creati per altri set di caratteri e usi. Questi includono Meiryo per giapponese, Malgun Gothic per coreano, Microsoft JhengHei per cinese (tradizionale), Microsoft YaHei per cinese (semplificato), Gisha per ebraico e Leelawadee per thai e i tipi di carattere ClearType Collection progettati per l'uso dei documenti.

Meiryo include caratteri latini basati su Verdana. Malgun Gothic, Microsoft JhengHei e Microsoft YaHei usano un'interfaccia utente personalizzata di Segoe. L'uso di versioni corsivo di questi tipi di carattere non è consigliato. Malgun Gothic, Microsoft JhengHei e Microsoft YaHei sono forniti solo in stili regolari e in grassetto, il che significa che i caratteri corsivi vengono sintetizzati inclinando gli stili verticali. Sebbene Meiryo includa il corsivo vero e grassetto, questi stili si applicano solo ai caratteri latini i caratteri giapponesi rimangono in verticale quando viene applicato lo stile corsivo.

Una variante di Meiryo, denominata Interfaccia utente di Meiryo, è preferibile nelle barre multifunzione 'interfaccia utente del comando.

Per supportare le impostazioni locali usando questi set di caratteri, Segoe UI viene sostituito con i tipi di carattere corretti a seconda delle impostazioni locali durante il processo di localizzazione .

Per concedere in licenza l'interfaccia utente di Segoe e altri tipi di carattere Microsoft per la distribuzione con un programma basato su Windows, contattare Monotype.

Nota: Linee guida relative a stile e tono e testo dell'interfaccia utente sono presentate in articoli separati.

Concetti di progettazione

Tipi di carattere, caratteri tipografici, dimensioni dei punti e attributi

Nella tipografia tradizionale, un tipo di carattere descrive una combinazione di carattere tipografico, dimensioni punto e attributi. Un carattere tipografico è l'aspetto del tipo di carattere. Segoe UI, Tahoma, Verdana e Arial sono tutti caratteri tipografici. La dimensione del punto si riferisce alla dimensione del tipo di carattere, misurata dalla parte superiore degli ascendenti alla parte inferiore dei discendenti, meno la spaziatura interna (chiamata iniziale). Un punto è approssimativamente 1/72 pollici. Infine, un tipo di carattere può avere attributi in grassetto o corsivo.

In modo informale, le persone spesso usano il carattere al posto del carattere tipografico come fatto in questo articolo, ma tecnicamente, Segoe UI è un carattere tipografico, non un tipo di carattere. Ogni combinazione di attributi è un tipo di carattere univoco (ad esempio, 9 punti Segoe UI regolare, segoe ui grassetto e così via).

Serif e sans serif

I caratteri tipografici sono serif o sans serif. Serif si riferisce a piccoli turni che spesso terminano i tratti di lettere in un tipo di carattere. Un carattere tipografico sans serif non ha serifs.

I lettori preferiscono in genere tipi di carattere serif usati come testo del corpo all'interno di un documento. Le seriffe offrono una sensazione di formalità ed eleganza a un documento. Per il testo dell'interfaccia utente, la necessità di un aspetto pulito e la risoluzione inferiore dei monitor computer rende i caratteri tipografici sans serif la scelta migliore.

Contrasto

Il testo è più semplice da leggere quando c'è una grande differenza tra la luminanza del testo e lo sfondo. Il testo nero su uno sfondo bianco offre il testo scuro a contrasto più elevato su uno sfondo molto chiaro può anche offrire un contrasto elevato. Questa combinazione è ideale per le superfici principali dell'interfaccia utente.

Il testo chiaro su uno sfondo scuro offre un buon contrasto, ma non altrettanto buono come il testo scuro su uno sfondo chiaro. Questa combinazione funziona bene per le superfici dell'interfaccia utente secondarie, ad esempio i riquadri attività di Explorer, che si desidera annullare l'accento rispetto alle superfici principali dell'interfaccia utente.

Se si vuole assicurarsi che gli utenti leggano il testo, usare il testo scuro su uno sfondo chiaro.

Inviti

Il testo può usare i seguenti inviti per indicare come viene usato:

• Puntatore. Il puntatore a barre I ("selezione testo") indica che il testo è selezionabile, mentre il puntatore a sinistra ("selezione normale") indica che il testo non è.
• Cursore. Quando il testo ha lo stato attivo per l'input, il cursore è la barra verticale lampeggiante che indica il punto di inserimento/selezione in testo selezionabile o modificabile.
• Scatola. Casella intorno al testo che indica che è modificabile. Per ridurre il peso della presentazione, la casella può essere visualizzata in modo dinamico solo quando è selezionato il testo modificabile.
• Colore di primo piano. Grigio chiaro indica che il testo è disabilitato. I colori non grigi, in particolare blu e viola, indicano che il testo è un collegamento.
• Colore di sfondo. Uno sfondo grigio chiaro suggerisce debolemente che il testo è di sola lettura, ma in pratica il testo di sola lettura può avere qualsiasi sfondo di colore.

Questi inviti vengono combinati per i significati seguenti:

• Editabile. Testo visualizzato in una casella, con un puntatore di selezione testo, un cursore (sullo stato attivo dell'input) e in genere su uno sfondo bianco.
• Sola lettura, selezionabile. Testo con un puntatore di selezione e un cursore (sullo stato attivo dell'input).
• Sola lettura, non selezionabile. Testo con un puntatore a freccia.
• Disabile. Testo grigio chiaro con un puntatore a freccia, a volte su uno sfondo grigio.

Il testo di sola lettura ha tradizionalmente uno sfondo grigio, ma non è necessario uno sfondo grigio. Infatti, uno sfondo grigio può essere indesiderato, soprattutto per grandi blocchi di testo, perché suggerisce che il testo è disabilitato e scoraggia la lettura.

Accessibilità e tipo di carattere, dimensioni e colori del sistema

Le linee guida per rendere il testo accessibile agli utenti con disabilità o problemi possono essere ridotto a una semplice regola: rispettare le impostazioni dell'utente usando sempre il tipo di carattere, le dimensioni e i colori di sistema.

Se fai una sola cosa...

Rispettare le impostazioni dell'utente usando sempre il tipo di carattere, le dimensioni e i colori del sistema.

Developers: Dal codice, è possibile determinare le proprietà del tipo di carattere di sistema (incluse le relative dimensioni) usando la funzione API GetThemeFont. È possibile determinare i colori di sistema usando la funzione API GetThemeSysColor.

Poiché non è possibile fare ipotesi sulle impostazioni del tema di sistema degli utenti, è necessario:

• Basare sempre i colori dei tipi di carattere e gli sfondi dai colori del tema di sistema. Non creare mai colori personalizzati in base ai valori RGB fissi (rosso, verde, blu).
• Trova sempre la corrispondenza con i colori del testo di sistema con i colori di sfondo corrispondenti. Ad esempio, se si sceglie COLOR_STATICTEXT per il colore del testo, è necessario scegliere anche COLOR_STATIC per il colore di sfondo.
• Crea sempre nuovi tipi di carattere in base a variazioni proporzionali del tipo di carattere di sistema. Data la metrica del tipo di carattere di sistema, è possibile creare varianti grassetto, corsivo, più grande e più piccolo.

Un modo semplice per garantire che il programma rispetti le impostazioni degli utenti consiste nel testare l'uso di una diversa dimensione del carattere e una combinazione di colori a contrasto elevato. Tutto il testo deve essere ridimensionato e visualizzato correttamente nella combinazione di colori scelta.

Modelli di utilizzo

Il testo presenta diversi modelli di utilizzo:

Uso	Descrizione
testo della barra del titolo Testo sulla barra del titolo che identifica la finestra.
istruzioni principali Testo che spiega cosa fare in una pagina, in una finestra o in una finestra di dialogo.	di tipo di carattere di testo delle istruzioni principali
istruzioni secondarie Testo supplementare che spiega cosa fare in una pagina, una finestra o una finestra di dialogo.
testo normale Testo normale (di sola lettura) visualizzato in un'interfaccia utente.	tipo di carattere di testo normale
testo sottolineato Il testo in grassetto viene usato per semplificare l'analisi del testo e per attirare l'attenzione degli utenti di testo devono leggere. il testo corsivo viene usato per fare riferimento al testo letteralmente (invece di virgolette) e per evidenziare parole specifiche.	carattere di testo sottolineato
testo modificabile Il testo che gli utenti possono modificare viene visualizzato in una casella. per ridurre il peso della presentazione, la casella può essere visualizzata solo quando è selezionato il testo modificabile.
Testo disabilitato Testo che non si applica al contesto corrente, ad esempio le etichette per i controlli disabilitati. il testo disabilitato indica che gli utenti (normalmente) non dovrebbero preoccuparsi di leggere il testo.
collegamenti Testo utilizzato per passare a un'altra pagina, finestra o argomento della Guida oppure avviare un comando.	del tipo di carattere del testo del collegamento
intestazione gruppo Testo utilizzato per raggruppare gli elementi in una visualizzazione elenco.
Nome file Testo del nome file (solo nella visualizzazione contenuto).
testo del documento Testo usato nei documenti (anziché testo dell'interfaccia utente).
intestazioni di documento Testo utilizzato come intestazione all'interno di un documento.	di intestazioni di documento

Istruzioni

Tipi di carattere e colori

• I tipi di carattere e i colori seguenti sono predefiniti per Windows Vista e Windows 7.

Modello	Simbolo del tema	Carattere, colore
	CaptionFont	9 pt. nero (#000000) Segoe UI
di tipo di carattere di testo delle istruzioni principali	MainInstruction	12 pt. blu (#003399) Segoe UI
	Istruzione	9 pt. nero (#000000) Segoe UI
tipo di carattere di testo normale	BodyText	9 pt. nero (#000000) Segoe UI
carattere di testo sottolineato	BodyText	9 pt. nero (#000000) Interfaccia utente segoe, grassetto o corsivo
	BodyText	9 pt. nero (#000000) Interfaccia utente segoe, in una casella
	Disabile	9 pt. grigio scuro (#323232) Segoe UI
del tipo di carattere del testo del collegamento	HyperLinkText	9 pt. blu (#0066CC) Segoe UI
	Caldo	9 pt. blu chiaro (#3399FF) Segoe UI
		11 pt. blu (#003399) Interfaccia utente segoe
		11 pt. nero (#000000) Segoe UI
	(nessuno)	9 pt. nero (#000000) Calibri
di intestazioni di documento	(nessuno)	17 pt. nero (#000000) Calibri

• Scegliere i tipi di carattere e ottimizzare i layout delle finestre in base alla tecnologia dell'interfaccia utente e alla versione di destinazione di Windows:

• sviluppatori :
  • Per gli elementi che usano il layout fisso ,ad esempio i modelli di finestra di dialogo di Windows e WinForms, impostare come hardcoded il tipo di carattere appropriato dalla tabella precedente.
  • Per gli elementi che usano il layout dinamico (ad esempio Windows Presentation Foundation), usare i tipi di carattere del tema. Usare le API del tema come DrawThemeText per disegnare testo in base al simbolo del tema. Assicurarsi di avere un'alternativa basata sulle metriche di sistema nel caso in cui il servizio tema non sia in esecuzione.
• Per l'interfaccia utente di Segoe, usa una dimensione del carattere a 9 punti o superiore. Il tipo di carattere Segoe UI è ottimizzato per queste dimensioni, quindi evitare di usare dimensioni più piccole.
• Trova sempre la corrispondenza con i colori del testo di sistema con i colori di sfondo corrispondenti. Ad esempio, se si sceglie COLOR_STATICTEXT per il colore del testo, è necessario scegliere anche COLOR_STATIC per il colore di sfondo.
• Crea sempre nuovi tipi di carattere in base a variazioni proporzionali del tipo di carattere di sistema. Data la metrica del tipo di carattere di sistema, è possibile creare varianti grassetto, corsivo, più grande e più piccolo.
• Visualizza grandi blocchi di testo di sola lettura (ad esempio le condizioni di licenza) su uno sfondo chiaro anziché su uno sfondo grigio. Gli sfondi grigi suggeriscono che il testo è disabilitato e scoraggia la lettura.
• Prendere in considerazione una lunghezza massima di 65 caratteri per semplificare la lettura del testo. I caratteri includono lettere, punteggiatura e spazi.

Attributi

• La maggior parte del testo dell'interfaccia utente deve essere normale senza attributi. Gli attributi possono essere usati come segue:
  • Audace. Usare nelle etichette di controllo per semplificare l'analisi del testo. Usare con moderazione per attirare l'attenzione degli utenti del testo che gli utenti devono leggere. L'uso di un numero eccessivo di grassetto riduce l'impatto.
  • Corsivo. Usare per fare riferimento al testo letteralmente anziché alle virgolette. Usare con moderazione per evidenziare parole specifiche. Usare per richieste di nelle caselle di testo e elenchi a discesa modificabili.
  • Grassetto corsivo. Non usare.
  • Sottolineare. Non usare tranne i collegamenti. Usare invece il corsivo per l'enfasi.
• Non tutti i tipi di carattere supportano il grassetto e il corsivo, quindi non dovrebbero mai essere cruciali per comprendere il testo.