Se vi piace creare dei progetti grafici o multimediali sarete sempre alla ricerca di font originali ma adatti al contenuto realizzato. Vi sarà certamente capitato di imbattervi in un sito e visualizzare una famiglia di caratteri che vi piace particolarmente ma di cui non conoscete il nome. In questo post mostrerò tre sistemi per scoprirlo.
Vedremo nell'ordine come catturare un'immagine di una porzione del testo che ci interessa investigare, come trovare online il nome della famiglia mediante dei tool e una estensione, come scoprire font simili a quello con Photoshop e infine come ispezionare il codice sorgente della pagina per trovare in modo certo il nome della famiglia di caratteri.
Ho pubblicato sul Canale Youtube un tutorial in cui illustro come scoprire il nome della famiglia di font di un sito.
Per catturare una porzione di testo da un sito web bisogna scattare una istantanea che in gergo si chiama screenshot. Lo si può fare con programmi specifici come PicPick o il commerciale Snagit ma anche con uno strumento nativo di Windows. Si tratta dello Strumento di Cattura con cui si può anche registrare tutto o parte dello schermo.
Per aprirlo di digita la scorciatoia da tastiera
Cliccando sul pulsante del floppy disk si potrà salvare come immagine JPG o PNG la porzione di testo catturata.
1) SCOPRIRE IL NOME DEI FONT CON TOOL ONLINE
Ci sono strumenti gratuiti online con cui è possibile scoprire il nome della famiglia di caratteri da una immagine.
Non sono particolarmente affidabili ma possono essere utili quando il testo si trovi già dentro un'immagine.
I primi tre link riguardano degli strumenti online mentre il quarto link rimanda a una estensione di Chrome.
Il loro funzionamento è simile. Si carica una immagine quindi si attende che venga mostrato il nome del carattere.
Purtroppo spesso non si ottengono dei risultati attinenti alla realtà e quindi questa deve essere l'extrema ratio.
2) SCOPRIRE IL NOME DEI FONT CON PHOTOSHOP
Con il programma di grafica per antonomasia Photoshop si può trovare il nome della famiglia dei font e, in subordine, un elenco di famiglie di caratteri simili a quella data. Si fa andare Photoshop e si clicca su File → Apri.
Verrà caricata l'immagine del testo che è stata catturata. Si va quindi nel menù orizzontale in alto su Testo.
Si va poi su Trova Font Simili per aprire una finestra. Con il mouse si regola la selezione per contornare tutto il testo e escludere tutto il resto. Nella finestra che appare sulla destra si potranno visualizzare i nomi dei font simili.
Anche in questo caso i risultati non sempre sono precisi pure nel caso in cui il font sia già installato sul computer.
3) SCOPRIRE IL NOME DEI FONT con LA SORGENTE PAGINA
Il metodo più sicuro per scoprire il nome di un font usato in un testo è quello di aprire la pagina in cui si trova con un browser come Chrome. Il limite di questo metodo è che può essere applicato solo ai testi mostrati in una pagina web e non ai testi inseriti p.e. in una immagine o in un video. In questi casi l'unica è catturarne lo screenshot.
Si apre la pagina in cui è presente il testo da investigare con Chrome quindi si va nel menù dei tre puntini in alto a destra. Si clicca su Altri Strumenti → Strumenti per Sviluppatori con cui si aprirà una finestra in basso.
Si clicca su Elements quindi sul pulsante della selezione che è quello più in alto a sinistra. Si punta il testo con il cursore. L'elemento su cui abbiamo passato il mouse(hover) assumerà lo sfondo celeste e mostrerà i suoi parametri.
Oltre al nome del font verranno mostrati anche la sua dimensione, il suo colore e i margini. Volendo ci si può cliccare sopra per selezionarlo e andare in basso a destra per ispezionarne i CSS che ne determinano l'aspetto.
In font-family si visualizzerà il nome della famiglia dei caratteri. Si può p.e. usare questo codice HTML
<p style="font-family:ptserif, Georgia, Times, Times New Roman; font-size:19px">Testo inserito con lo stesso font del sito in oggetto</p>
per visualizzare il testo con lo stesso aspetto di quello del sito e investigato e scoperto nel sorgente pagina.
Lo screenshot è stato realizzato incollando il codice su Real Time HTML Editor che ne mostra il rendering.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy