Header tipografici: qualche idea
Lunedì 13 Febbraio 2006 - 09:00
di Alessandro Fulciniti
Ispirato in parte da Typography for headlines di cui ho parlato in questo post, ho
pensato di preparare un po’ di header tipografici: si tratta di sette titoli h2 personalizzati con i CSS, ciascuno anticipato dalla relativa regola CSS necessaria pronta per il copia-incolla. Ho lasciato il testo ridimensionabile, così potrete ammirarli nelle varie grandezze.
Un paio di curiosità: il primo titolo è senza dubbio il più moderno: font Arial e letter-spacing negativo sono piuttosto diffusi in siti Web2.0; il quarto titolo mostra il Times New Roman, font quasi dimenticato, nel suo splendore, mentre l’ultimo è un buon modo per usare testo serif in maniera un po’ diversa. E se aveste difficoltà con la scelta dei colori da attribuire ai titoli, la pratica palette dei colori potrebbe fare al caso.
Commenti
1
In effetti sono proprio carini! Però, a proposito di tipografia, volevo un parere su “cotali beltà” viste su Linux (qualsiasi browser).
Ho scoperto, dovendo gestire del testo in uno spazio di larghezza che era fisso, che su Linux la gestione dello spazio tra le lettere (letter-spacing) è diversa. Il valore base, cioè, spazia le lettere in modo maggiore rispetto a ciò che avviene su Win e Mac (qualsiasi browser). E siccome quel valore non è allineabile a quello dei browser Mac/Win, alla fine pur intervenendo sul letter-spacing con CSS (valori negativi e altre amenità) si ottengono risultato molto diversi su Linux (anche perchè non ho modo di applicare il CSS solo ai browser Linux…).
Più lungo è il testo più sono diversi i risultati: maggiore spazio tra le lettere = più righe. Se - per esigenze le più disparate - si deve stare in un box con larghezza e altezza fisse e overflow hidden si è fregati.
Qualcun altro si è imbattuto nel problema? Alla fine ho dovuto risolvere accorciando il testo in modo che le differenze fossero meno marcate e perciò più gestibili…# - postato da redcat - 13 Febbraio 2006 - 10:19
2
li è più un problema di fonts
infatti i fonts che vai ad usare sono sotto copyright quindi se non hai una licenza di windows non puoi installarli su linux e di conseguenza di default non ci sono quelli, ma dei font più simili possibili motivo per il quale la spaziatura come i font sono leggermente diversi :)
# - postato da daniele_dll - 13 Febbraio 2006 - 10:26
3
Ma pure per Arial, Times New Roman, Verdana e compagnia bella? I font basici, intendo.
Ovvio che non mi spinga ad utilizzare font strani, non per questioni di licenza (ove esiste compro la versione OpenType e utilizzabile su più piattaforme) ma per il fatto che poi l’utente non li avrebbe sulla sua macchina.# - postato da redcat - 13 Febbraio 2006 - 10:36
4
Ciao Danié,
perchè non posti un elenco di font liberi che troviamo di default su win, linux e mac?# - postato da Salvatore PECORARO - 13 Febbraio 2006 - 11:10
5
Ciao anche io sarei interessato ad una lista di font liberi presenti sia su Linux che su Windows.
# - postato da Fello - 13 Febbraio 2006 - 11:29
6
cortesemente mi spiegate perchè il body ha 76% e non 15% o 95% o 47,33%? :)
# - postato da Fabio Sirna - 13 Febbraio 2006 - 20:30
7
Salvatore e Fello, una discreta indicazione sulla diffusione dei font per sistemi operativi si può trovare su questa pagina.
Fabio, le ragioni per il font-size del body pari al 76% sono quasi storiche, e generalmente è la misura che adotto in tutti gli esempi e gli articoli. Il punto è che con dimensione del font medio nel browser il testo risulta 16 pixel. Il 76% equivale quindi a 12 pixel e oltre a risultare ridimensionabile offre un dimensionamento piuttosto consistente nei diversi browser. 76% è una misura empirica e comunemente adottata che risulta da Sane CSS typography, uno studio condotto da Owen Briggs nel 2002.
# - postato da Alessandro Fulciniti - 13 Febbraio 2006 - 22:16
8
Io normalmente uso 100% nel body :D
e poi in em all’interno del body :D# - postato da Andrea Paiola - 13 Febbraio 2006 - 23:36