Ieri ho rifatto il logo del sito, ma anziché farlo con Gimp/Photoshop, o chiedere l’intervento di un grafico professionista, ho pensato di usare semplice testo e chiuderlo tra un h1 (sì, esatto, quello che vedete è fatto di solo testo)!
Per il globo ho usato “fontAwesome” (nemmeno quelo è immagine…), per il resto, invece, il font Ubuntu (il mio preferito, tanto che poi lo ho applicato, come potete notare, all’intero sito).
Adesso farò un breve esempio su come creare quel logo, grazie ai Google Fonts, proprio basandomi sul codice che ho usato io.
Andiamo su: https://www.google.com/fonts
e cerchiamo il carattere che più ci piace (in tal caso ubuntu):
Cliccando lì dove ho indicato con la freccia (quick use), si aprirà la pagina dove sarà possibile impostare determinati aspetti del font! Qui bisogna stare attenti: meno voci si selezionano, più sarà leggero “l’impatto” sul caricamento della pagina (a destra possiamo notare una sorta di tachimetro che ci darà un’idea).
Un modo che non viene molto pubblicizzato da google per ottimizzare il caricamento dei font è aggiungere la variabil &text=miotesto
Provo a spiegarmi:
Scelto il carattere, selezionato normal e bold (400 e 700 nel caso di ubuntu), il codice da inserire nell’header del nostro template sarà:
<linkhref='https://fonts.googleapis.com/css?family=Ubuntu:400,700'rel='stylesheet'type='text/css'>
Quindi abbiamo un riferimento a: https://fonts.googleapis.com/css?family=Ubuntu:400,700
Questo includerà l’intero font nel nostro sito!
Proviamo invece a modificare il codice aggiungendo &text=***
<linkhref='https://fonts.googleapis.com/css?family=Ubuntu:400,700&text=L’AltroWeb'rel='stylesheet'type='text/css'>
E apriamo il nuovo url: https://fonts.googleapis.com/css?family=Ubuntu:400,700&text=L’AltroWeb
La differenza è notevole, non trovate?
Dunque, se vogliamo usare un webfont di google per un paragrafo, o un titolo, un h1 ecc (un testo ben specifico a noi noto)… Possiamo benissimo ottimizzarlo indicando il testo da includere nel webfont.
Diversamente, se desideriamo utilizzare il font per altre parti della nostra pagina (o per l’intero sito) non utilizzeremo la variabile &text e caricheremo l’intero webfont (con un leggero aumento dei tempi di caricamento, ma anche l’occhio vuole la sua parte… la grafica può fare la differenza)!
Detto ciò, alla fine richiameremo il nostro webfont con un semplice:
font-family:'Ubuntu', sans-serif;
Tutto chiaro fin qui? 🙂
Ecco il codice usato da me (io ho usato Ubuntu font per l’intero sito):
header:
<linkhref='https://fonts.googleapis.com/css?family=Ubuntu:400,700'rel='stylesheet'type='text/css'>
html:
<h1id="h1-logo"> <ahref='https://www.laltroweb.it/'title='HomePage: L’AltroWeb'>L’AltroWeb</a></h1>
css:
/* Logo */#h1-logo { float: left; font-size:40px; margin:30px0; font-family:'Ubuntu', sans-serif; position: relative; z-index:2001;}/* ho usato a#* per conflitto con uno span#* nel backend */ a#elLogo { color:#fff;}/* Se non avete fontAwesome potete usare un simbolo, o uno smilies */ a#elLogo::before { color:#78b025; /* content: "? ? ? ..."; */ content:"f0ac"; font-family:"FontAwesome"; padding-right:10px; font-weight: normal;}
Fatto ciò, con un banale screen grab (facendo una inversione di colori con firebug per ottenere quella nera) ho prelevato le immagini che poi ho ritagliato e ottimizzato per usare sulla newsletter e nella mail del sito. Per finire, sempre tramite gimp, ho ricavato dal globo la nuova favicon (ico e png). Insomma, a volte non è necessario affidarsi a dei grafici professionisti o usare photoshop (a volte – dipende anche dalle nostre necessità! altre volte, invece, meglio affidarsi a chi sa bene ciò che fa)! Basta trovare il giusto font e saper usare un po’ i css 😉
Cita
Questo è quanto! Spero sia abbastanza chiaro e spiegato nel modo più semplice possibile.
Se avete dubbi, perplessità, difficoltà o critiche/consigli, i commenti sono accessibili a tutti (anche ai visitatori) 🙂