Testata

Dimensionare il testo ( Blogger )





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 )

Bookmark and Share

9 commenti:

  1. Per informazione, su Linux questa pagina usa i seguenti font:

    DejaVu 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.

    RispondiElimina
    Risposte
    1. Se devo indovinare, a naso direi che Arial viene tradotto in Liberation e Georgia in Dejavu.

      Elimina
  2. Ok.
    Come va la lettura, con questo carattere ?

    RispondiElimina
  3. Meglio. Bianco su grigio non è il massimo ma non si può avere tutto.

    RispondiElimina
    Risposte
    1. Mi fa piacere, Lorenzo.

      ...

      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 ).

      Elimina
  4. 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.

    RispondiElimina
  5. Direi una buona presentazione della strumentazione messa a disposizione da parte di blogger.
    Su 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.

    RispondiElimina
    Risposte
    1. UomoCoso, mi tocca ripetermi.

      Uno 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.

      Elimina
    2. 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