\n Qui stiamo discutendo solo del collegamento UX e tipografico, senza menzionare il ruolo della tipografia nella formazione della personalit\u00e0 visiva del sito Web, nella definizione del tuo marchio e nell'attirare l'attenzione del lettore. Dai un'occhiata a questo articolo<\/a> per saperne di pi\u00f9.\n<\/p>\n \n La scelta della tipografia per questo sito Web della chiesa non solo aumenta l'esperienza utente sul sito Web, ma aiuta anche a plasmare l'identit\u00e0 visiva del marchio).\n<\/p>\n \n Come potenziare l'esperienza utente sul tuo sito Web ottimizzando la tipografia?\n<\/p>\n \n Esistono diversi modi per migliorare la UX sul tuo sito Web ottimizzando la tipografia. Poich\u00e9 UX e tipografia sono strettamente collegate, ottimizzando la tipografia, ottimizzi anche la leggibilit\u00e0 del tuo testo e, quindi, aggiungi alla UX complessiva sul tuo sito web. Vediamo quali sono le regole per ottimizzare la tipografia:\n<\/p>\n \n Se vuoi che il tuo sito web appaia coerente e professionale, usa fino a tre caratteri (non di pi\u00f9). Caratteri diversi su un sito Web si scontrano e distraggono l'utente dalla lettura del testo. L'utilizzo di diversi caratteri dall'aspetto simile ti aiuta a creare coerenza di UX in tutte le pagine del tuo sito Web e libera gli utenti dall'adozione di frequenti cambiamenti di stile.\n<\/p>\n \n Questo \u00e8 esattamente ci\u00f2 che dovresti evitare sul tuo sito web.\n<\/p>\n \n Spesso \u00e8 sufficiente l'utilizzo di un solo font. Se ritieni ancora di aver bisogno di un paio di caratteri, scegli i caratteri che hanno la stessa larghezza di carattere. In questo caso, i caratteri non differiranno troppo l'uno dall'altro e distrarranno il lettore.\n<\/p>\n \n Questo sito Web di rimodellamento utilizza il carattere non convenzionale Six Caps per aumentare l'identit\u00e0 visiva del sito Web. Questo tipo di carattere \u00e8 combinato con Roboto Condensed per avere due tipi di carattere, le cui larghezze dei caratteri corrispondono.\n<\/p>\n \n Un'altra grande idea sulla combinazione di un paio di caratteri \u00e8 quella di unire i caratteri che imitano la scrittura a mano con quelli normali. La tipografia scritta a mano aggiunge un tocco personale al design generale del tuo sito web e sviluppa il carattere visivo del tuo sito web.\n<\/p>\n \n Questo sito Web ha un aspetto morbido e femminile con il carattere Caveat Handwriting.\n<\/p>\n \n I serif sono le piccole linee all'estremit\u00e0 dei tratti delle lettere. Nella tipografia stampata, i serif aiutano le persone a riconoscere le lettere stampate in modo pi\u00f9 rapido ed efficiente. Tuttavia, sullo schermo, soprattutto su uno non Retina, i serif non sono cos\u00ec ben delineati come sulla carta, il che compromette parzialmente la lettura.\n<\/p>\n \n Oltre a garantire una migliore leggibilit\u00e0, i caratteri sans serif parlano in modo pi\u00f9 audace e minimale.\n<\/p>\n \n Qui, non sto sostenendo che dovresti abbandonare completamente i caratteri serif. Un consiglio migliore sarebbe quello di essere pi\u00f9 cauti con loro e usare quelli che sono puliti e precisi.\n<\/p>\n \n Ad esempio, questo sito Web di fotografia creativa utilizza il carattere Open Sans sans serif che aiuta il sito Web a fare una dichiarazione audace, elegante e decisa.\n<\/p>\n \n Lo spazio su Internet \u00e8 illimitato. Ecco perch\u00e9 non \u00e8 necessario salvarlo e utilizzare caratteri di piccole dimensioni che impongono un ulteriore affaticamento degli occhi agli utenti. I lettori con problemi di vista possono avere difficolt\u00e0 a leggere testi piccoli, mentre anche i lettori con una buona vista provano affaticamento e devono fare delle pause per arrivare alla fine, diciamo, di un testo da 10 pt.\n<\/p>\n \n Se non vuoi che i tuoi utenti abbiano difficolt\u00e0 a leggere il testo che presenti o ad ingrandirlo, scegli una dimensione dei caratteri di 16pt +. Tali dimensioni dei caratteri riducono al minimo l'affaticamento degli occhi e aiutano gli utenti a raggiungere il loro obiettivo sul tuo sito Web senza affaticamento visivo.\n<\/p>\n \n Il sito Web di Malcolmy utilizza una tipografia leggibile a 16 pt per la sua home page e le pagine del blog.\n<\/p>\n \n Sul tuo sito web, non dovresti riempire tutto lo spazio disponibile con il tuo testo. Prestando attenzione a una lunghezza di riga ottimale, ti attieni a elevati standard di esperienza di lettura. Se le righe sono troppo corte, gli occhi del lettore devono andare avanti e indietro durante la lettura del testo, il che impone un ulteriore affaticamento visivo. Se le righe sono troppo lunghe, \u00e8 troppo difficile concentrarsi sulla parola esatta che stai leggendo e troppo facile perdersi.\n<\/p>\n \n Per evitare entrambe le situazioni avverse, attenersi a 60 caratteri per riga (per schermi di tablet\/PC).\n<\/p>\n \n Questa immagine mostra che i testi con righe troppo corte o troppo lunghe sono pi\u00f9 difficili da leggere rispetto ai testi che si attengono alla lunghezza della riga “centrale dorata” di ~ 60pt.\n<\/p>\n \n La lunghezza ottimale della linea per i dispositivi mobili (ad es. smartphone) \u00e8 inferiore. Affinch\u00e9 il testo sia leggibile su schermi piccoli, la riga dovrebbe includere circa 30-40 caratteri.\n<\/p>\n \n Come sai, la dimensione delle lettere per le intestazioni \u00e8 solitamente pi\u00f9 grande di quella per il corpo del testo. Le intestazioni differiscono anche per le dimensioni, dalla pi\u00f9 piccola alla pi\u00f9 grande. Sul tuo sito web, dovrai scegliere dimensioni dei caratteri diverse per vari elementi (ad es. pulsanti, didascalie, elementi di navigazione, ecc.), nonch\u00e9 pesi dei caratteri diversi per dare enfasi.\n<\/p>\n \n Per garantire la distinguibilit\u00e0 degli elementi del tuo sito web, scegli un font disponibile in varie dimensioni e pesi. Se scegli uno dei caratteri standard, ad esempio il carattere tipografico Roboto di Google Fonts, vedrai tutte le varianti che ha. Alcuni font sono disponibili in pi\u00f9 di 10 varianti, altri ne hanno solo un paio. Scegli un font che abbia un ricco set di varianti per garantire una rappresentazione diversificata dei contenuti sul tuo sito.\n<\/p>\n \n Diversi stili di carattere del carattere Roboto Google.\n<\/p>\n \n I tempi dei siti web multicolori e urlanti sono passati. Ora, la leggibilit\u00e0 e il contrasto sono le forze dominanti che determinano le scelte cromatiche. Prima di tutto, i tuoi contenuti dovrebbero essere leggibili e la combinazione che per molti anni \u00e8 stata considerata la migliore \u00e8 il testo nero su sfondo bianco. Questa combinazione garantisce il massimo contrasto e risale ai tempi della tipografia classica.\n<\/p>\n \n Tuttavia, di recente, si \u00e8 spesso sostenuto che il colore nero impone pi\u00f9 affaticamento degli occhi rispetto a quello grigio scuro. Anche le sfumature di grigio scuro contrastano bene con lo sfondo bianco, ma sono un po' meno dense e offrono un'esperienza di lettura pi\u00f9 confortevole.\n<\/p>\n \n Queste sono le sfumature di grigio che superano il nero nel garantire un'esperienza di lettura confortevole.\n<\/p>\n \n Una pagina del sito web che utilizza il grigio scuro come colore del testo del dispositivo di scorrimento.\n<\/p>\n \n Quando scegli il colore, assicurati di testarlo su dispositivi diversi e in ambienti diversi. Il testo che \u00e8 bello leggere in un tipico ambiente d'ufficio pu\u00f2 essere difficile da distinguere su uno smartphone, soprattutto quando viene utilizzato all'aperto. \u00c8 difficile tenere conto di tutti i fattori, ma il tuo obiettivo dovrebbe essere quello di tenere conto della maggior parte degli ambienti e offrire a diversi gruppi di utenti un'esperienza di navigazione confortevole.\n<\/p>\n \n Ridurre al minimo l'altezza della riga per inserire pi\u00f9 contenuti non \u00e8 una buona pratica. Se le righe sono troppo vicine l'una all'altra, \u00e8 pi\u00f9 probabile che un lettore salti alla riga precedente o successiva e si blocchi. Lo spazio tra le righe (interlinea) deve essere maggiore del 30% rispetto all'altezza dei caratteri utilizzati. Tale guida garantisce la migliore leggibilit\u00e0 del contenuto e la sua chiara percezione visiva.\n<\/p>\n\n 1: ridurre al minimo il numero di caratteri utilizzati
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2: Scegli i caratteri Sans Serif per migliorare la leggibilit\u00e0
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Dimensione carattere decente
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4: Osservare la lunghezza ottimale della linea
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5: scegli caratteri tipografici che funzionino bene in diverse dimensioni
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6: Fai scelte di colore intelligenti
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7: Non sperimentare con l'altezza della linea
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n