{"id":5599,"date":"2009-03-26T09:20:09","date_gmt":"2009-03-26T07:20:09","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=5599"},"modified":"2016-05-17T12:31:12","modified_gmt":"2016-05-17T10:31:12","slug":"costruire-un-tema-lunghezza-e-dimensione-testo","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2009-03-26\/costruire-un-tema-lunghezza-e-dimensione-testo\/","title":{"rendered":"Costruire un tema: lunghezza e dimensione testo."},"content":{"rendered":"

Nella prima puntata<\/em> vi avevo parlato della posizione dei contenuti<\/a>, importante perch\u00e9 gli occhi vengono attratti<\/strong> principalmente da alcune sezioni durante i primi istanti della visita di un sito.<\/p>\n

Tutto, durante la permanenza su un sito continuer\u00e0 a ruotare intorno a loro. Gli occhi<\/strong>.<\/p>\n

La lunghezza e la dimensione del testo infatti, saranno i diretti responsabili dei movimenti<\/strong> delle nostre pupille.<\/p>\n

Maggiore \u00e8 la lunghezza di una riga, maggiore sar\u00e0 il movimento orizzontale<\/strong> necessario per percorrerla con conseguente affaticamento dei muscoli e maggiori possibilit\u00e0 che venga persa la riga quando si torna accapo.<\/p>\n

Questo si traduce in difficolt\u00e0 di lettura<\/strong> che pu\u00f2 portare gli utenti ad abbandonare il sito perch\u00e9 distratti, infastiditi o affaticati.<\/p>\n

La domanda che sorge spontanea \u00e8 dunque: qual \u00e8 la lunghezza ottimale di una riga di testo?<\/strong><\/p>\n

Per rispondere a questa domanda bisogna iniziare a tenere in considerazione vari aspetti.<\/p>\n

In primis, come al solito, lo strumento hardware utilizzato<\/strong> dal visitatore: computer portatile? Monitor di un computer fisso? Palmare?<\/p>\n

\"IlIl perch\u00e9 \u00e8 presto detto: la distanza pi\u00f9 o meno accentuata dell’occhio del lettore dal monitor allarga o restringe il campo visivo<\/strong>, sia verticalmente che orizzontalmente e questi strumenti hanno una distanza d’uso media abbastanza diversa fra loro. Non ho mai visto utilizzare un palmare a braccia tese, mentre – verosimilmente – un monitor di una scrivania pu\u00f2 distare 60-70 cm dal nostro viso.<\/p>\n

Grazie ad alcuni test comunque, si \u00e8 calcolato che la lunghezza ideale del testo su web \u00e8 di 70-80 caratteri<\/strong> (12-14 parole circa).<\/p>\n

Inizialmente, quando ho iniziato a costruire il blog, il corpo centrale (destinato ad ospitare i post<\/em>) aveva una larghezza di 720px (vi ho gi\u00e0 raccontato della mia necessit\u00e0 di “maggiore spazio”<\/em>). Volendo seguire questa raccomandazione, ho ristretto lo spazio<\/strong> ad un pi\u00f9 modesto<\/em> valore di 640px. Una via di mezzo tra i 520px del layout precedente e i 720px che avevo sognato<\/strong> di raggiungere. Si tratta del 30% di caratteri in pi\u00f9 rispetto a quelli raccomandati. Andare oltre potrebbe<\/em> risultare faticoso da seguire.<\/p>\n

Fortunatamente a venirci parzialmente incontro c’\u00e8 la spaziatura e la larghezza dei caratteri<\/strong>. Ogni font infatti, ha caratteristiche differenti.<\/p>\n

Volendo fare un po’ di storia, il courier<\/a>, ad esempio, \u00e8 un carattere “monospace<\/a>” che divenne di uso comune nelle vecchie macchine da scrivere<\/strong> che non potevano gestire la spaziatura variabile (la i<\/em> e la w<\/em> in un font a spaziatura variabile hanno una “larghezza” o “occupazione di spazio” diversa). I computer possono agevolmente gestire la spaziatura variabile<\/strong> e per questo si pu\u00f2 giocare<\/em> con font e dimensioni.<\/p>\n

\"ConfrontoOvviamente la spaziatura pi\u00f9 o meno accentuata pu\u00f2 risultare pi\u00f9 o meno gradevole all’occhio<\/strong>, tanto quanto l’essere “sans serif”<\/em> (o “senza grazie”<\/em>) e cio\u00e8 privo di una serie di particolari<\/a> che “arricchiscono” il carattere. Un carattere “sans serif” d’uso comune \u00e8 il Verdana<\/a>.<\/p>\n

Il Verdana<\/em> \u00e8 un font pubblicato nel 1996 da Microsoft<\/em> progettato per garantire grande leggibilit\u00e0 anche a basse risoluzioni<\/strong> grazie alla sua pulizia (“sans serif”<\/em>), la sua larghezza e la spaziatura considerevole. L’ultima qualit\u00e0, inoltre, viene incontro alla mia necessit\u00e0 di allargare lo spazio destinato ai post, salvando in qualche modo capra e cavoli<\/em>. Per maggiori informazioni a riguardo vi mando alla relativa pagina<\/a> su Wikipedia<\/em>.<\/p>\n

La dimensione dei caratteri infine, diventa un discriminante fondamentale<\/strong> in caso d’accesso da parte di persone con problemi alla vista<\/strong>. Un buon contrasto<\/a>, unito ad una dimensione non troppo piccola<\/strong> pu\u00f2 risultare la chiave vincente per catturare l’attenzione ed evitare che i lettori scappino ancor prima di completare la prima frase.<\/p>\n

Tenere questi aspetti in considerazione quando si costruisce una pagina web \u00e8 importante<\/strong> quasi quanto la validit\u00e0 dei contenuti. \ud83d\ude42<\/p>\n

Si continua lunedi prossimo…<\/p>\n

Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Nella prima puntata vi avevo parlato della posizione dei contenuti, importante perch\u00e9 gli occhi vengono attratti principalmente da alcune sezioni durante i primi istanti della visita di un sito. Tutto, durante la permanenza su un sito continuer\u00e0 a ruotare intorno … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_post_was_ever_published":false},"categories":[4],"tags":[524,623,627,624,549,564,628,569,629,529,625,490,491,611,526,626,52,528,493],"class_list":["post-5599","post","type-post","status-publish","format-standard","hentry","category-internet","tag-accessibilita","tag-caratteri","tag-dimensioni","tag-font","tag-larghezza","tag-leggibilita","tag-monospace","tag-occhi","tag-sans-serif","tag-siti-web","tag-spaziatura","tag-tema","tag-template","tag-testo","tag-user-experience","tag-verdana","tag-vista","tag-web-design","tag-wordpress"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=5599"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5599\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=5599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=5599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=5599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}