News, Storie & Consigli sui nostri Software Multimediali

Utilizzare i font per il sito web

Utilizzare i font per il sito web

Font e siti web è un tema che a volte può sembrare un po’ contorto: font per il web, “web safe” (sicuri per il web), incorporati e font di Google. Quale scegliere? Negli ultimi anni la tecnologia in questo senso si è evoluta in modo significativo generando tuttavia un po’ di confusione. In questo articolo cercheremo di illustrarvi i vari caratteri utilizzabili per i siti web.

finished page 3Se non avete ancora Magix Web Designer potete scaricate qui la versione gratuita. Magix Web Designer ha il vantaggio di celare la complessità dell’incorporamento e del download dei Google Fonts consentendovi di imparare facilmente ad usarli per il vostro sito.

Lo Strumento Testo (l’icona con la T maiuscola) serve per controllare testo e font. Esso offre le normali funzioni di un programma di scrittura, come ad esempio incollare testo dagli appunti o il correttore ortografico ed usa modalità di editing altrettanto simili: per esempio, per selezionare del testo basta trascinare il mouse, un doppio click per una parola e triplo click per una riga intera (utile per selezionare tutto il testo in un pulsante). La InfoBar fornisce un’ampia gamma di comandi per questo strumento:

Cliccate sulla freccia verso il basso accanto al nome del font per visualizzare l’intero menu font suddiviso in quattro sezioni. La prima sezione superiore mostra caratteri già utilizzati nel documento, la seconda caratteri “web safe” e la terza i font Google disponibili. Infine, la quarta sezione inferiore mostra tutti i caratteri installati sul computer. Nel menu, il nome di ogni font è visualizzato nel proprio carattere tipografico per rendere più semplice la selezione.

Il Menu Font

Il Menu Font

I font per cui sono disponibili stili multipli hanno una freccetta nera sul lato destro del menu. Basta tenere il puntatore del mouse sul nome di un carattere per uno o due secondi ed apparirà un piccolo sotto-menu a destra con l’elenco di tutti gli stili disponibili relativi a quel determinato carattere. Potete spostare il puntatore del mouse sul menu per selezionare lo stile desiderato.

Anteprima caratteri in tempo reale
Se spostate il puntatore del mouse su una voce del menu font, il testo selezionato nel documento viene aggiornato immediatamente per visualizzare l’anteprima del carattere. Non si tratta di una modifica permanente a meno che non si clicchi sul carattere richiesto. Si tratta di una funzione molto utile se desiderate visualizzare l’anteprima di una grande quantità di caratteri in modo rapido. Nel menu font, potete digitare le lettere iniziali del carattere per passare direttamente alla rispettiva sezione nel menu.

Cambiare il font per la data e l'ora

Cambiare il font per la data e l’ora

Tenendo premuto il tasto Shift mentre si sfoglia il menu font, si aggiorna all’istante la selezione dei caratteri, senza doversi soffermare su di essi. Questa è una funzione utile se l’anteprima immediata rallenta la navigazione nel menu (se ad esempio avete selezionato un testo lungo).

Per visualizzare un’anteprima in grandezza reale, spostate il mouse sulla lista delle dimensioni dei font (secondo menu a comparsa sulla InfoBar). Accanto potete vedere un piccolo regolatore a scorrimento che, muovendolo, vi consente di impostare in tempo reale la dimensione del font sul testo selezionato.

Font web safe
Questa serie ridotta di font può essere utilizzata senza problemi nei siti web essendo riconosciuta dalla maggior parte di computer e dispositivi (es. iPad e altri tablet). Questi font sono infatti già integrati, pertanto verranno visualizzati correttamente sul vostro sito. Come potete vedere sotto, questa serie di font è piuttosto limitata.

Font web safe

Font web safe

Font incorporati.
Fino a poco tempo fa, questi font web safe erano gli unici utilizzabili in un sito web. Con i moderni browser la situazione è cambiata ed ora è possibile incorporare i font nel proprio sito (insieme al codice HTML e ai file grafici): in questo modo il browser saprà di dover usare questi font. Questo cambiamento rappresenta un grande vantaggio per i grafici web. Magix Web Designer è il primo strumento di web authoring a rendere l’uso della maggior parte dei font così semplice.

Selezionate un carattere dal menu font e Web Designer Premium lo pubblicherà automaticamente con il sito in modo tale da essere visualizzato correttamente da tutti gli utenti, sia che lo abbiano già installato o meno nel proprio computer.

Esportando o aprendo l’anteprima di un sito che utilizza font “non safe”, Web Designer Premium mostrerà una lista di caratteri che saranno incorporati nel sito.

Nota: non tutti i font possono però essere incorporati in questo m

Finestra di anteprima che mostra i font usati sulla pagina web

Finestra di anteprima che mostra i font usati sulla pagina web

odo. Alcun infatti hanno una licenza “no embed”. Web Designer Premium individua questi caratteri che non possono essere incorporati in un documento o in un sito e vi mostrerà un avviso. A questo punto dovreste cambiare font, assicurandovi che sia web safe, oppure sceglierne uno Google o comunque incorporabile. Tuttavia, potete continuare e pubblicarlo con alcune limitazioni se siete sicuri che l’uso rientri nei termini della relativa licenza (ad esempio, in un sito è solo per uso privato).

Font di Google
Con Web Designer Premium potete scegliere di usare oltre 600 font di Google. Sono gratuiti, open source ed hanno il vantaggio di essere ospitati da Google consentendo al browser dei visitatori di prelevarli dai potenti server hosting di Google.

Di norma si dovrebbero scaricare e installare sul proprio computer i Google font richiesti, ma Web Designer Premium fa già tutto questo per voi. Inoltre, per evitare di cercare tra i 600 font di Google, Web Designer Premium ha facilitato il processo di selezione grazie ad un “Font Finder” che vi consente di visualizzare i caratteri in categorie e in tempo reale.

Per iniziare ad utilizzare i Google font, clicca su “Aggiungi” nel menu font per aprire così il Font Finder.

Il Google Font Finder che mostra alcuni dei caratteri disponibili.

Il Google Font Finder che mostra alcuni dei caratteri disponibili.

Potete cercare dei font adeguati digitando un nome nella casella di ricerca oppure tramite l’apposito elenco. Affinate la ricerca specificando lo stile tramite le varie caselle di controllo poste sulla sinistra ed utilizzate l’anteprima in tempo reale per vedere il font in varie dimensioni.

Selezione dei font di Google

Selezione dei font di Google

Dopo aver cliccato sul font scelto vi viene richiesto se desiderate scaricarlo ed installarlo. Su molti computer che utilizzano Windows, e a seconda delle relative impostazioni, vi verrà richiesto di accordare il permesso all’installazione eseguita da un programma separato di FontInstall. Ogni font installato appare nella sezione Google Fonts del relativo menu.

I Google Web font non sono solo dei caratteri per il web, sono dei normali TrueType o OpenType compatibili con Windows che possono essere usati da qualsiasi applicazione sul vostro computer, ad esempio per documenti da stampare, come i PDF.

Nota: alcuni browser non rendono i font di Google in modo efficace come altri, quindi è sempre meglio provare le pagine in diversi browser per assicurarsi che la qualità sia accettabile.

High Quality Body
Se siete confusi dalla categoria “high quality body”, niente paura: si tratta di font selezionati da Magix per la loro alta qualità, specialmente con piccole dimensioni (generalmente usate per il testo del body) e sono testati con tutti i maggiori browser.

Grafiche o testo?
Web Designer aveva, ed ha tuttora, un metodo semplice per convertire del testo in grafica: raggruppare l’oggetto (anche se è uno solo). Questo resta il metodo preferito per piccole quantità di testo con font non web safe differenti. Tuttavia, se si usa un font incorporato, i motori di ricerca lo possono individuare e indicizzare, contrariamente a quello convertito in grafica. Gli utenti possono anche selezionarlo e copiarlo proprio come un normale testo in un browser.

Headline_Fonts

Ecco un esempio di un font di Google un po’ inusuale (Akronim) con una leggera ombreggiatura applicata con Web Designer. In precedenza, questa sarebbe dovuta essere una grafica, ma ora è un semplice testo HTML con ombre di testo CSS3.

Performance
È importante sapere che l’uso di molti font incorporati, che siano i vostri o di Google, rallenterà il sito. Questo perché per mostrare tutto correttamente, oltre all’HTML del sito, il browser dovrà scaricare anche i file dei font. Cercate quindi di usare pochi font web (buona pratica anche per ottenere un bel design del sito).

Web Designer è una soluzione basata su modelli già pronti e vi fornisce una libertà di creazione totale anche senza conoscere l’HTML. Web Designer include inoltre grafiche web personalizzabili, modelli di pagine e di interi siti, strumenti per creare il proprio design, per il photo editing (uno strumento fotografico integrato ultra-rapido e non distruttivo) e per layout di testo avanzato. La Galleria Design include anche una selezione di widget. Inoltre, potete caricare il sito online gratis grazie al servizio d hosting gratuito!

Il software è disponibile in due versioni: Web Designer e Web Designer Premium (con funzioni di grafica web avanzate). Web Designer

Traduzione e adattamento: Valentina Ricci

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *