Come regolare le proprietà del testo in Adobe XD

Quando hai del testo nel tuo progetto Adobe XD, puoi iniziare a modificare le proprietà del testo. Queste proprietà includono Famiglia di caratteri, Dimensione carattere, Spessore carattere, Allineamento, Spaziatura caratteri (crenatura e tracciamento), Interlinea (interlinea), Riempimento, Bordo (tratto), Ombra (ombra esterna) e Sfocatura sfondo. Quindi esaminiamo come vengono applicate queste proprietà.

Informazioni sulla leggibilità e sulla selezione dei caratteri

La selezione di un font è di fondamentale importanza. Potresti avere molte scelte di caratteri nel tuo sistema, ma solo pochi eletti lo taglieranno come una scelta di successo per la lettura su schermo. Alcune caratteristiche da cercare nella selezione dei caratteri includono quanto segue:

• Serif o non serif? Sotto, vedi una famiglia di caratteri in stile serif in alto e uno in sans serif in basso. I serif hanno una leggera proiezione che termina un tratto di una lettera. Il sans serif, d'altra parte, non ha quella leggera proiezione. I caratteri tipografici sans serif tendono a sembrare più moderni e sono una scelta popolare per applicazioni e siti Web interattivi. In passato, si credeva che le famiglie di caratteri con grazie fossero più facili da leggere quando c'era una grande quantità di testo. I test eseguiti con i dispositivi di tracciamento oculare hanno dimostrato che non c'è una grande differenza di leggibilità tra serif e sans-serif, quindi sentiti libero di scegliere uno stile purché presti attenzione ad alcune delle altre caratteristiche dei caratteri che seguono.

  Un carattere serif in alto, sans-serif in basso.

• Larghezze linea diritte e uniformi: poiché il tuo tipo verrà creato da pixel, è meglio non avere molte variazioni nella larghezza del testo. Puoi vedere la differenza, in un'anteprima in pixel, tra una scelta di font con variazione di larghezza (in alto) e un font che è coerente nella sua larghezza.

  Il carattere in alto ha variazioni nelle linee spesse e sottili che creano il carattere; il carattere in basso è coerente e più facile da leggere sullo schermo.

• Contatori forti: i contatori sono i buchi che vedi in lettere come "O", "B" e "R". Presta attenzione a quanto sono grandi questi contatori in quanto possono anche causare problemi di leggibilità se si chiudono quando vengono visualizzati come pixel su uno schermo. Viene visualizzata una vista pixel di due diverse famiglie di caratteri; guarda come appaiono i contatori in ciascuno rispetto l'uno all'altro.

  Cerca forti contatori aperti nella selezione della famiglia di caratteri.

• Discensori e altezza del cappuccio: i discensori corti e l'altezza del cappuccio basso sono importanti per la leggibilità sullo schermo. Nella parte superiore si vede una famiglia di caratteri con discendenti corti e altezze del cappuccio basse; in basso, un font con lunghi discendenti e alte altezze del cappello.

  Una famiglia di caratteri con brevi discendenti e un'altezza del maiuscolo bassa è in genere più facile da leggere sullo schermo.

Selezione della famiglia di caratteri

Ora che sai cosa rende una migliore selezione dei caratteri per la leggibilità, usa il pannello Proprietà per selezionarne uno. Le cose da cercare quando si effettua la selezione includono quanto segue:

• Famiglia di caratteri: dopo aver inserito un tipo sullo schermo, è possibile selezionarlo e scegliere il menu a discesa Famiglia di caratteri nella sezione Testo del pannello Proprietà. Se conosci il carattere che desideri, inizia semplicemente a digitare il nome del carattere nella casella di testo Famiglia di caratteri e, se è nel tuo sistema, verrà trovato nel tuo elenco.

  Non dimenticare che hai a disposizione i caratteri tramite Adobe TypeKit.

• Peso del carattere: dopo aver selezionato una famiglia di caratteri, puoi scegliere un peso dal menu a discesa Peso del carattere. A seconda dei caratteri che hai nel tuo sistema, avrai diverse scelte di peso dei caratteri.

  Scegli una famiglia di caratteri e il peso del carattere.

• Dimensione carattere: puoi semplicemente digitare una dimensione del carattere nella casella di testo Dimensione carattere, ma se non sei sicuro di quale sia la dimensione migliore, puoi posizionare il cursore sotto la casella di testo Dimensione carattere e fare clic e trascinare. Cerca la freccia a due punte prima di trascinare. Trascinando verso l'alto si riduce la dimensione; verso il basso aumenta le dimensioni.

  Fare clic e trascinare per modificare visivamente la dimensione del carattere.

• Allineamento: puoi modificare il testo selezionato in Allinea a sinistra, al centro o a destra utilizzando i pulsanti Allineamento nella sezione Testo del pannello Proprietà.
• Spaziatura dei caratteri: la spaziatura dei caratteri si riferisce allo spazio tra i caratteri. Questo è noto come monitoraggio . Qui puoi vedere il risultato dell'aumento della spaziatura tra i caratteri.

  Caratteri con spaziatura normale, impostati su 0 (zero) e quindi impostati su 150.

Tieni presente che puoi utilizzare la stessa tecnica di trascinamento disponibile nella casella di testo Dimensione carattere per modificare visivamente la spaziatura dei caratteri.

Puoi anche modificare visivamente la dimensione della spaziatura dei caratteri facendo clic e trascinando.

• Altezza della riga: l'altezza della riga è principale , lo spazio tra le righe di testo. Questo può svolgere un ruolo importante nella progettazione delle informazioni, quindi assicurati di utilizzarlo in modo coerente durante tutta la progettazione. Puoi anche posizionare il cursore sotto la casella di testo Altezza linea e fare clic e trascinare verso l'alto o verso il basso per diminuire e aumentare l'altezza della linea.
• Colore: cambia il colore di riempimento facendo clic sulla casella accanto a Colore di riempimento nel pannello Proprietà. Esegui questo compito nello stesso modo in cui faresti con qualsiasi forma. Seleziona la casella Riempi e seleziona un colore dal Selettore colore. Puoi anche selezionare la trasparenza per il tuo testo dalla diapositiva Trasparenza disponibile a destra del Selettore colore.
• Bordo: l' applicazione di un bordo inserisce un tratto attorno al testo. Questa operazione non è consigliata perché potrebbe causare problemi di leggibilità. Usalo con parsimonia e forse solo per effetti speciali. L'immagine seguente mostra un esempio di un carattere tipografico più grande con un tratto sottile e un riempimento bianco su uno sfondo più scuro. In una situazione come questa, un bordo potrebbe funzionare, ma non con un testo più piccolo.

  Un piccolo bordo con un riempimento bianco su uno sfondo scuro.