{"id":255460,"date":"2023-06-03T12:16:00","date_gmt":"2023-06-03T09:16:00","guid":{"rendered":"https:\/\/inform.click\/guida-definitiva-alla-tipografia-web-regole-glossario-idee-e-best-practice\/"},"modified":"2023-06-03T12:44:00","modified_gmt":"2023-06-03T09:44:00","slug":"guida-definitiva-alla-tipografia-web-regole-glossario-idee-e-best-practice","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/guida-definitiva-alla-tipografia-web-regole-glossario-idee-e-best-practice\/","title":{"rendered":"Guida definitiva alla tipografia web: regole, glossario, idee e best practice"},"content":{"rendered":"<p>\n  &#8216;Un'immagine vale pi\u00f9 di mille parole.'\n<\/p>\n<p>\n  Molto spesso le immagini trasmettono ci\u00f2 che hanno da dire. Tuttavia, un'immagine con testo ha un impatto maggiore.\n<\/p>\n<p>\n  La tipografia funge da compagna della tua grafica. La tipografia non \u00e8 solo scegliere un carattere casuale e una dimensione in punti dal menu a discesa del tuo software di editing. \u00c8 un campo specializzato nella progettazione grafica. \u00c8 l'arte e la tecnica di arrangiare il tipo. \u00c8 una delle abilit\u00e0 importanti che possono differenziarti dal resto dei designer se sai come usarla.\n<\/p>\n<h5>\n  Cos'\u00e8 la tipografia?<br \/>\n<\/h5>\n<p>\n  Prima di entrare nell'arte e nella tecnica della tipografia, in primo luogo, capire cos'\u00e8 la tipografia. La tipografia \u00e8 la parte visiva del testo (parola scritta). Un testo \u00e8 una serie di parole. Ogni testo visualizzato visivamente che vedi \u00e8 fondamentalmente tipografia. Il testo pu\u00f2 essere classificato in tre modi: visivamente, acusticamente e digitalmente.\n<\/p>\n<p>\n  La tipografia \u00e8 pi\u00f9 del design di lettere e caratteri. Include la scelta della dimensione dei punti, della spaziatura e della lunghezza della linea. Ai tempi in cui Johannes Gutenberg introdusse la macchina da stampa, i tipografi dovevano disporre lettere e caratteri nello spazio fisico. Ora, nell'era dei computer, questo lavoro \u00e8 molto pi\u00f9 semplice. Devi solo trovare font open source, disporre lettere e caratteri e il gioco \u00e8 fatto.\n<\/p>\n<h5>\n  Importanza della tipografia<br \/>\n<\/h5>\n<p>\n  La tipografia \u00e8 qualcosa che troverai assolutamente ovunque. D\u00ec, potrebbe essere il tuo smartphone, tazza di caff\u00e8, cartellone pubblicitario, panni e molto altro. La tipografia \u00e8 ovunque. La selezione del carattere, della lettera e della disposizione dei caratteri decide come verr\u00e0 trasmesso il tuo messaggio.\n<\/p>\n<p>\n  Anche se a tuo avviso sembra un piccolo fattore, di certo non lo \u00e8. Anche una singola regolazione del tipo pu\u00f2 cambiare l'intero aspetto della tua opera d'arte. Se hai mai notato che Facebook ha testato un nuovo font chiamato Geneva nel giugno 2016. Era una versione leggermente pi\u00f9 sottile e leggera del font Helvetica originale. Ma la differenza tra questi due caratteri era evidente.\n<\/p>\n<p>\n  Regole della tipografia\n<\/p>\n<p>\n  In tipografia, devi scegliere il carattere tipografico in base al layout, alla griglia, al tema del design, alla combinazione di colori e cos\u00ec via. Ecco alcune regole tipografiche che dovresti tenere a mente mentre lavori.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-6383048f872f8.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-6383048f872f8.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Scegliere il carattere giusto<br \/>\n<\/h5>\n<p>\n  Se trascorri qualche minuto su Internet, troverai una sorprendente gamma di font pronti all'uso gratuiti ea pagamento. Ma ci\u00f2 non significa che devi passare ore a cercare i caratteri esatti che visualizzi nella tua mente. Puoi iniziare a dipingere anche con una tavolozza limitata. Ci sono alcuni font provati e testati come Helvetica che non possono mai sbagliare in nessun progetto.\n<\/p>\n<p>\n  Un carattere tipografico \u00e8 una forma di design formata da artigiani che contribuiscono con tutti i loro sforzi e abilit\u00e0 per un considerevole periodo di tempo. I caratteri dal design professionale offrono una variet\u00e0 di personalizzazioni in termini di pesi e stili per creare una famiglia completa. Inoltre, offrono notevoli coppie di crenatura, supporto per la personalizzazione multilingua e di impostazione del tipo.\n<\/p>\n<p>\n  Di seguito sono riportati i termini tipografici pi\u00f9 importanti che sono considerati:\n<\/p>\n<h5>\n  Dimensione<br \/>\n<\/h5>\n<p>\n  Non tutti i caratteri tipografici sono creati allo stesso modo. Alcuni usano aspetti grassi e larghi mentre altri sono sottili e stretti. Diversi tipi di caratteri tipografici possono acquisire la diversa quantit\u00e0 di spazio sulla pagina.\n<\/p>\n<p>\n  L'altezza del carattere \u00e8 indicata come altezza X. Quando si abbinano caratteri tipografici diversi, \u00e8 buona norma utilizzare solo quei caratteri tipografici che condividono un'altezza x simile. D'altra parte, la larghezza del carattere \u00e8 chiamata &#8216;set width', che decide quanto spazio occuper\u00e0 la lettera e il buffer con altre lettere.\n<\/p>\n<p>\n  Il sistema a punti \u00e8 il metodo utilizzato per misurare il tipo dal XVIII secolo. Un punto pu\u00f2 essere misurato come 1\/72 di pollice e 12 punti possono formare una pica. Pica \u00e8 l'unit\u00e0 per misurare la larghezza della colonna. Inoltre, le dimensioni possono essere misurate in pixel, pollici o millimetri. Dipende dal requisito del progetto.\n<\/p>\n<h5>\n  Primo<br \/>\n<\/h5>\n<p>\n  Lo spazio verticale tra ogni riga di testo \u00e8 noto come interlinea. Il motivo per chiamarlo come guida \u00e8 perch\u00e9 i foglietti di piombo venivano usati per dividere le linee di caratteri nel tempo in cui si usava la composizione in metallo. La regola empirica per ottenere un corpo del testo leggibile \u00e8 utilizzare un valore iniziale superiore alla dimensione del carattere. \u00c8 possibile utilizzare un valore principale pi\u00f9 alto da 1,25 a 1,5 volte.\n<\/p>\n<h5>\n  Inseguimento e crenatura<br \/>\n<\/h5>\n<p>\n  La crenatura \u00e8 l'atto che comporta l'aggiustamento dello spazio tra i personaggi. Aiuta a generare un abbinamento armonioso.\n<\/p>\n<p>\n  Ad esempio, quando si utilizza una maiuscola della lettera &#8220;A&#8221; con la maiuscola della lettera &#8220;V&#8221;, i tratti diagonali della parte superiore sinistra della lettera &#8220;V&#8221; sono crenati con la parte inferiore destra della &#8220;A&#8221;.\n<\/p>\n<p>\n  D'altra parte, tracciamento \u00e8 il termine che si riferisce alla spaziatura di tutti i caratteri che vengono applicati in modo uniforme. La crenatura \u00e8 simile alla traccia, ma entrambe non sono la stessa cosa.\n<\/p>\n<h5>\n  Misurare<br \/>\n<\/h5>\n<p>\n  La misura \u00e8 un termine che spiega la larghezza di un blocco di testo. Per un'esperienza di lettura ottimale, dovresti considerare la misura come un aspetto importante della tipografia.\n<\/p>\n<h5>\n  Gerarchia e scala<br \/>\n<\/h5>\n<p>\n  Non \u00e8 possibile utilizzare tutti i tipi con le stesse dimensioni, \u00e8 necessario impostare la gerarchia per i tipi. Altrimenti, sar\u00e0 difficile per i lettori capire quale informazione \u00e8 pi\u00f9 importante delle altre.\n<\/p>\n<p>\n  Generalmente, i titoli sono grandi, i sottotitoli sono pi\u00f9 piccoli e il tipo di corpo \u00e8 leggermente pi\u00f9 piccolo dei sottotitoli per aiutare i lettori a comprenderne la gerarchia.\n<\/p>\n<p>\n  Non solo le dimensioni, l'uso di diversi colori, peso e spaziatura pu\u00f2 anche aiutarti a impostare la gerarchia nel tuo lavoro.\n<\/p>\n<h3>\n  Glossario<br \/>\n<\/h3>\n<p>\n  Abbiamo coperto quasi tutti i concetti e la terminologia fondamentali che coinvolgono la tipografia qui.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-63830491e55fc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-63830491e55fc.webp\" alt=\"\" \/><\/a><\/p>\n<ul>\n<li>\n    <strong>Aesc<\/strong>: Si pronuncia come &#8216;Ash'. \u00c8 una legatura di due lettere vale a dire. &#8216;a' ed &#8216;e'. L'origine di aesc \u00e8 dall'antico inglese dove \u00e8 intesa come vocale dittongo. L'Aesc \u00e8 migrato verso alfabeti come l'islandese e il danese.\n  <\/li>\n<li>\n    <strong>Apertura<\/strong>: L'apertura \u00e8 un'apertura annodata di un glifo che pu\u00f2 essere vista in lettere come &#8216;e' la dimensione dell'apertura varia a seconda della sua implementazione. Tuttavia, variando l'apertura, il suo effetto si rifletter\u00e0 sulla leggibilit\u00e0 della forma di una lettera.\n  <\/li>\n<li>\n    <strong>Apex<\/strong>: Apex \u00e8 il punto che si trova nella parte superiore di un carattere. \u00c8 il punto in cui si incontrano i tratti sinistro e destro.\n  <\/li>\n<li>\n    <strong>Linea di base<\/strong>: \u00e8 una sezione in cui si trova la base delle lettere maiuscole.\n  <\/li>\n<li>\n    <strong>Ciotola<\/strong>: la ciotola \u00e8 considerata come le parti racchiuse di lettere come &#8220;b&#8221; e &#8220;p&#8221;.\n  <\/li>\n<li>\n    <strong>Staffa<\/strong>: \u00e8 un contorno a forma di cuneo che \u00e8 utile per contenere un serif e formare lo stelo di un font in un numero di caratteri tipografici.\n  <\/li>\n<li>\n    <strong>Altezza del cappuccio<\/strong>: l'altezza del cappuccio \u00e8 l'altezza di una lettera maiuscola sopra la linea di base.\n  <\/li>\n<li>\n    <strong>Contatore<\/strong>: il contatore \u00e8 racchiuso o racchiuso in modo incompleto in una sezione di una lettera. Il contatore pu\u00f2 essere visto in lettere come &#8216;c' o nella parte inferiore di &#8216;g' ed &#8216;e'. Questa sezione pu\u00f2 essere confusa con la ciotola.\n  <\/li>\n<li>\n    <strong>Descender<\/strong>: \u00e8 un pezzo della forma della lettera che va sotto la linea di base. Ad esempio, lettere come &#8216;p', &#8216;y' e &#8216;q'.\n  <\/li>\n<li>\n    <strong>Orecchio<\/strong>: l'orecchio \u00e8 un piccolo tratto che si espande dal lato superiore destro della ciotola.\n  <\/li>\n<li>\n    <strong>Glyph<\/strong>: \u00e8 una parte singolare che costruisce un font. Qualsiasi tipo di parte singolare che aiuti a costruire un carattere, sia esso un segno di punteggiatura, un numero, una lettera o persino un dingbat, \u00e8 incluso in esso. I glifi possono essere chiamati gli elementi costitutivi della tipografia.\n  <\/li>\n<li>\n    <strong>Gutter<\/strong>: \u00e8 lo spazio fornito tra le pagine affiancate del tuo lavoro. Le grondaie possono essere viste comunemente nelle colonne di testo.\n  <\/li>\n<li>\n    <strong>Orphan<\/strong>: Orphan \u00e8 la prima riga di un nuovo paragrafo che \u00e8 infilata alla fine di una pagina. Non \u00e8 una cosa che vorresti avere nel tuo progetto in quanto \u00e8 considerata una cattiva pratica.\n  <\/li>\n<li>\n    <strong>Pica<\/strong>: Pica \u00e8 l'unit\u00e0 di misura della larghezza della colonna. Ci sono 16 pixel o 12 punti in una pica.\n  <\/li>\n<li>\n    <strong>Leggibilit\u00e0<\/strong>: \u00e8 indicata come la facilit\u00e0 di lettura che include l'uso di un blocco di testo che pu\u00f2 essere scansionato facilmente a occhio.\n  <\/li>\n<li>\n    <strong>Serif<\/strong>: \u00e8 un carattere tipografico con serif. La fine del tratto di una lettera in questo tipo di carattere deriva dalla tendenza romana.\n  <\/li>\n<li>\n    <strong>Sans-serif<\/strong>: un carattere tipografico senza serif \u00e8 un sans-serif o sans serif.\n  <\/li>\n<li>\n    <strong>Colonna vertebrale<\/strong>: \u00e8 il tratto curvo maggiore che \u00e8 presente nella lettera minuscola della &#8216;S' maiuscola.\n  <\/li>\n<li>\n    <strong>Sperone<\/strong>: \u00e8 un piccolo rigonfiamento che appare sulla curva di una lettera. \u00c8 anche chiamato barba o becco. Ad esempio, la lettera &#8220;G&#8221;.\n  <\/li>\n<li>\n    <strong>Gambo<\/strong>: un tratto a tutta lunghezza \u00e8 chiamato gambo nei caratteri verticali. \u00c8 verticale.\n  <\/li>\n<li>\n    <strong>X-height<\/strong>: L'altezza della lettera &#8216;x' in minuscolo in un dato tipo di carattere \u00e8 un'altezza x.\n  <\/li>\n<\/ul>\n<h3>\n  7 Idee tipografiche e buone pratiche<br \/>\n<\/h3>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-638304942f71e.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-296011-638304942f71e.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Di seguito sono riportate le migliori pratiche tipografiche che puoi utilizzare nel tuo lavoro. Usa questi suggerimenti nei tuoi progetti per creare i tuoi capolavori.\n<\/p>\n<h5>\n  Importanza della scelta dei font corretti<br \/>\n<\/h5>\n<p>\n  Ogni designer ha un elenco dei suoi font preferiti. Ma ci\u00f2 non significa che devi scegliere sempre un font solo dalla tua lista dei preferiti. Ogni carattere tipografico ha il proprio stile, personalit\u00e0 e umore. Quindi, dovrai decidere quale font si adatter\u00e0 perfettamente al tuo design. La scelta del carattere \u00e8 importante in quanto ti aiuta a trasmettere il tuo messaggio al tuo pubblico.\n<\/p>\n<h5>\n  Tieni a mente il tuo pubblico<br \/>\n<\/h5>\n<p>\n  Dopo aver scelto un carattere che integri l'idea del tuo design, dovresti pensare se sar\u00e0 adatto al tuo pubblico. Un gruppo del tuo pubblico mirato potrebbe ritenere che i tuoi caratteri siano alla moda, mentre alcune persone li definiranno obsoleti. Quindi, dovrai capire per chi stai progettando il progetto. L'et\u00e0, il sesso, la posizione e altri fattori del tuo pubblico dovrebbero essere considerati prima di decidere sulla decisione del carattere.\n<\/p>\n<h5>\n  Imposta una gerarchia<br \/>\n<\/h5>\n<p>\n  Come accennato in precedenza, la gerarchia gioca un ruolo importante nella tipografia. La tua grafica dovrebbe essere ben organizzata e dovrebbe fornire una facilit\u00e0 di navigazione ai lettori. La gerarchia tipografica \u00e8 molto utile per realizzare progetti con testo pesante come libri, newsletter, riviste e altre pubblicazioni di stampa tradizionali.\n<\/p>\n<h5>\n  Prestare attenzione alla spaziatura e all'allineamento<br \/>\n<\/h5>\n<p>\n  La spaziatura e l'allineamento possono sembrare meno importanti, ma certamente non lo sono. Senza una corretta spaziatura e allineamento, i tuoi progetti sembreranno confusi, disordinati e ordinari. La spaziatura include l'uso di interlinea, margini, tracciamento e spazi bianchi.\n<\/p>\n<h5>\n  Usa Crenatura ogni volta che lo richiedi<br \/>\n<\/h5>\n<p>\n  Molti designer si confondono tra tracciamento e crenatura. Tuttavia, entrambi sono termini diversi. La crenatura ti consente di rendere la tua tipografia professionale e raffinata.\n<\/p>\n<h5>\n  Non eccedere nell'uso di caratteri tipografici, pesi e stili<br \/>\n<\/h5>\n<p>\n  A tutti noi piace usare caratteri diversi e personalizzarli per sembrare di classe. Tuttavia, l'uso di caratteri tipografici diversi in un unico disegno pu\u00f2 rendere il tuo lavoro un aspetto amatoriale e disordinato. Dovresti evitare l'uso di pi\u00f9 di tre caratteri in un disegno per dargli un aspetto professionale.\n<\/p>\n<h5>\n  Osserva e pratica<br \/>\n<\/h5>\n<p>\n  L'unico modo provato e testato per migliorare le tue abilit\u00e0 tipografiche \u00e8 studiare come altri designer usano la tipografia nel loro lavoro. \u00c8 l'abilit\u00e0 che richiede pratica e occhio per i dettagli per capire come qualcuno ha usato la tipografia nel suo progetto e come sarai in grado di usarla nei tuoi progetti.\n<\/p>\n<p>\n  Questa era la guida definitiva alla tipografia. Spero che questa guida ti abbia aiutato a comprendere diversi concetti e pratiche utilizzando i quali puoi migliorare le tue abilit\u00e0 tipografiche.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte di registrazione: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/16\/web-typography-guide\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8216;Un&#8217;immagine vale pi\u00f9 di mille parole.&#8217; Molto spesso le immagini trasmettono ci\u00f2 che hanno da dire. Tuttavia, un&#8217;immagine con testo ha un impatto maggiore. La tipografia funge da compagna della tua grafica. La tipografia non \u00e8 solo scegliere un carattere casuale e una dimensione in punti dal menu a discesa del tuo software di editing. \u00c8 un campo specializzato nella progettazione grafica. \u00c8 l&#8217;arte e la tecnica di arrangiare il tipo. \u00c8 una delle abilit\u00e0 importanti che possono differenziarti dal resto dei designer se sai come usarla. Cos&#8217;\u00e8 la tipografia? Prima di entrare nel\u2026<\/p>\n","protected":false},"author":1,"featured_media":192175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[251,199,56],"tags":[],"class_list":["post-255460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-font","category-web-design","category-web-e-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/comments?post=255460"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255460\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media\/192175"}],"wp:attachment":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media?parent=255460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/categories?post=255460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/tags?post=255460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}