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 )
Per informazione, su Linux questa pagina usa i seguenti font:
RispondiEliminaDejaVu Sans sistema
Liberation Mono Bold sistema
Liberation Mono sistema
Liberation Sans Bold sistema
Liberation Sans sistema
Liberation Sans Italic sistema
Roboto remoto
Roboto Bold remoto
DejaVu Serif sistema
DejaVu Sans sistema
Liberation Sans Bold sistema
Liberation Sans sistema
Liberation Sans Bold sistema
Liberation Sans sistema
Il fatto che il blog venga visualizzato prima con un font, poi con un altro secondo me dipende dalle ricorrenze nel modello delle medesime istruzioni. Bisognerebbe provare a commentarle tutte tranne quella in uso.
Se devo indovinare, a naso direi che Arial viene tradotto in Liberation e Georgia in Dejavu.
EliminaOk.
RispondiEliminaCome va la lettura, con questo carattere ?
Meglio. Bianco su grigio non è il massimo ma non si può avere tutto.
RispondiEliminaMi fa piacere, Lorenzo.
Elimina...
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 ).
Guarda, ai primordi Blogger aveva un diverso sistema di template e io ci perdevo un sacco di tempo in customizzazioni. Poi ho perso la voglia e adesso mi limito ad usare le cose che ci sono predefinite. E' uno di quei casi in cui "meno è meglio", anche perché Blogger potrebbe chiudere da un giorno all'altro.
RispondiEliminaDirei 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.
UomoCoso, mi tocca ripetermi.
EliminaUno dei principi fondamentali di Internet è che, non sapendo niente sulla natura del ricevente, quando mandi un "messaggio", ,'unica cosa che viene preservata è il contenuto. Tutte le altre informazioni sono volutamente "labili" e possono essere decise dal ricevente.
Il browser, fino dalla prima incarnazione, è concepito secondo il principio del "faccio del mio meglio" che ha come corollario "se non ci riesco, provo con A e poi provo con B".
Praticamente è IL CONTRARIO della tipografia.
Non sai quante volte ho provato a spiegare questo concetto a gente che pensava di potere definire esattamente colori, dimensioni, spazi, righe e colonne. Le stesse persone che poi si entusiasmano per i gadget tipo i furborologi, non riuscendo a fare 2+2, cioè associando la variabilità del supporto alla necessaria variabilità del formato e della modalità di visione.
Elimina