1
Scrivo un paio di post per articolare una risposta a un commento di Lorenzo sulle mie scelte tipografiche per questo blog [ 1 ].
Blogger
La scelta del carattere da usare in ogni sezione del sito ( font, stile - grassetto, corsivo - dimensione, colore dell'inchiostro ... ) può essere eseguita agilmente con il Designer modelli di Blogger [ 2 ] : sulla Bacheca bisogna selezionare Modello dal menu a cascata di fianco al nome del blog che si vuole ( ri- )disegnare, quindi Live su blog → Personalizza → Avanzato ...
A questo punto, si può usare il comodo editor per formattare le impostazioni di default del testo a schermo, per ogni sezione ( testo pagina, titolo blog, testo schede, titolo post ... ).
Sono disponibili 7 font che vengono caricati dal Pc ( se non è presente il prescelto, il codice ne userà uno simile ), e svariati web-font che vengono caricati dal web; come ricorda l'amico diarista, se viene scelto un web-font questo verrà caricato dopo la prima visualizzazione della pagina con un font “standard”, ottenendo una fastidiosa trasmutazione dei caratteri a schermo.
I font sono questi :
font | tipo |
anno |
produttore |
Arial | sans serif |
1982 |
Monotype |
Courier New | monospace |
1955 |
Monotype |
Georgia | serif |
1993 |
Microsoft Corporation |
Helvetica | sans serif |
1957 |
Haas'sche Schriftgießerei |
Impact | sans serif |
1965 |
Stephenson Blake |
Times New Roman | serif |
1931 |
Monotype |
Trebuchet MS | sans serif |
1996 |
Microsoft Corporation |
Verdana | sans serif |
1996 |
Microsoft Corporation |
I font elencati sopra sono 8 : nel Designer modelli è presente il font Impact, mentre nell'editor di post troviamo al suo posto il più popolare Helvetica.
Tutti i font elencati, tranne l'Helvetica, facevano parte di Core fonts for the web [ 3 ] un pacchetto di caratteri tipografici multi-piattaforma ( Windows, Mac Os, Linux ) distribuito gratuitamente da Microsoft per l'uso su internet, dal 1996 al 2002.
...
Cliccare sul bottone Applica al blog quando sono stati eseguiti tutti i settaggi desiderati.
testo |
font |
formato |
Questo font è serif dimensionato “più piccolo” | Georgia |
xx-small |
Questo font è serif dimensionato “piccolo” | Georgia |
x-small |
Questo font è serif dimensionato “normale” | Georgia |
small |
Questo font è serif dimensionato “grande” | Georgia |
large |
Questo font è serif dimensionato “più grande” | Georgia |
x-large |
testo |
font |
formato |
Questo font è sans serif dimensionato “più piccolo” |
Arial |
xx-small |
Questo font è sans serif dimensionato “piccolo” |
Arial |
x-small |
Questo font è sans serif dimensionato “normale” |
Arial |
small |
Questo font è sans serif dimensionato “grande” |
Arial |
large |
Questo font è sans serif dimensionato “più grande” |
Arial |
x-large |
2
Il tipo di carattere impostato di default per il blog, può essere modificato all'interno del codice HTML di ogni singolo post che si scrive.
( è possibile peraltro impostare il codice di default per i post in : Bacheca → Impostazioni → Post e commenti → Modello post [ 4 ] ).
Qua sopra, nelle tabelle sono rappresentate alcune frasi usando font di famiglie classiche serif ( con le grazie, o con i riccioli ) e sans serif ( senza le grazie, o senza i riccioli ) come il Georgia e l'Arial : scegliendo dal menu a tendina tT la keyword assoluta che sostituisce la dimensione del carattere di testo data nel Designer modelli ( nell'esempio soprastante è 15px ), o scrivendo direttamente il codice HTML, si imposta una nuova dimensione del testo valida per il post.
3
Scrivendo il codice, è possibile specificare la dimensione del carattere con la proprietà font-size all'interno di style in qualunque tag, e usare differenti unità di misura o keyword assolute, oppure unità di misura o keyword relative.
Ad esempio, all'interno del contenitore generico span :
Una tabella delle principali unità di misura :
dimensioni assolute |
|
mm | millimetro |
cm | centimetro ( 10 mm ) |
in | inch, pollice ( 0.39in sono circa 10mm ) |
pt | punto tipografico ( 1pt = 1/72 pollice ) |
pc | pica ( 1pc = 12pt ) |
px | pixel, punto-base dello schermo |
dimensioni relative |
|
% | percentuale |
em | moltiplicatore ( 1em è la dimensione data ) |
ex | 1ex è relativo all'altezza del carattere “x” nel font dato [ 5 ] |
Una tabella delle principali keyword :
keyword assolute |
|
xx-small | molto piccolo |
x-small | piccolo |
small | normale |
medium | medio |
large | grande |
x-large | molto grande |
xx-large | grandissimo |
keyword relative |
|
smaller | più piccolo |
larger | più grande |
Come illustrato nel paragrafo 2, da menu a tendina dell'editor di post in Blogger ( lingua italiana ) è possibile selezionare 5 formati di testo con keyword ( non il medium e l'xx-large ) mentre con normale si ottiene la formatttazione small nel codice.
{ alcune letture sul dimensionamento dei caratteri in CSS : [ 6 , 7 ] }.
4
Concludendo.
Nella piattaforma Blogger è possibile definire le caratteristiche dei caratteri a schermo in ( almeno ) tre modi :
- usando le funzioni di base del Designer modelli di Blogger;
- inserendo CSS ( fogli di stile ) dettagliati con il Designer modelli [ 8 ];
- usando le funzioni di base dell'editor di post e/o scrivendo il codice HTML del singolo post.
( continua )
Ok.
RispondiEliminaCome va la lettura, con questo carattere ?
Mi fa piacere, Lorenzo.
RispondiElimina...
Sto pensando ad un nuovo template, chiaro e completamente differente da questo ( la grafica non è un problema, ho accatastato svariati giga di materiale mio su hdd, in questi anni ) ...
Ma ri-progettare daccapo richiede un sacco di tempo che adesso non posso dedicare a questo spazio, cui pure sono affezionato.
===
Ho rifinito il post, con due esempi di codice ''standard'' e una tabella in più ( per i newbies di passagio da queste parti ).
Direi una buona presentazione della strumentazione messa a disposizione da parte di blogger.
RispondiEliminaSu questi apparentemente dettagli (il tipo/corpo del carattere, dimensioni, etc.) si può dover investire molto tempo.
La tipografia è una branca del sapere tecnico ormai corposa.