Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.004 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Testo, font e personalizzazioni

..:: Testo, font e personalizzazioni ::..

Tra le prime cose da imparare quando si inizia a realizzare un sito o dei gadget web
è sicuramente, come impostare e personalizzare il font/carattere, per il testo dei contenuti,
ovviamente molto dipenderà dal tipo di sito o lavori che vogliamo realizzare

Benché ormai sia possibile "importare" qualsiasi tipo di font, leggete -> Font personalizzato nel sito
la scelta più semplice è utilizzare un font "standard" compatibile con i vari sistemi operativi
e/o browser, tipo Georgia, Palatino Linotype, Times New Roman, Arial, Trebuchet MS, Verdana,
Comic Sans MS, Courier New, comunque sceglierne uno che si legga bene, senza troppi fronzoli

Per chi è agli inizi è importante sapere che è possibile utilizzare tutti i font
che abbiamo sul nostro pc solo se si eseguono determinati passaggi, perché non è detto che
chi legge abbia gli stessi sul proprio, mi ripeto, leggete il tutorial linkato sopra

Iniziamo con i parametri base, il tipo di font/carattere, la misura ed il colore,
potremmo scrivere queste indicazioni nello style in linea, anche se sarà ovviamente più comodo
inserire questi ed altri parametri, per maggiori personalizzazioni, nei css/foglio di style

<font face="Arial" size="3" color="#a4584b">Testo</font>
Prova scrittura testo con style in linea

- Classe css per impostare lo style del font per il testo in tutta la pagina

<style type="text/css">
body {background-image: url('...'); o background-color: #xxxxxx;
text-align:center; o left o right;
font-family: "Georgia";
font-size : 14px;
color : #785c58
}
</style>

* Parametri base per inserire il font/carattere nei css/foglio di style

font-family:"Georgia"; : Nome del font/carattere

font-size: xxpx; o xxem 0 xx% : Misura del font/carattere, si può impostare in pixel,
in em* o in percentuale
*em è un'unità di misura utilizzata in tipografia, nel web 1 em equivale a 16 pixel,
io preferisco usare i pixel, più semplici da valutare - Guida dettagliata wikipedia-Em

color: #xxxxxx : Colore del font/carattere espresso con valore esadecimale,
6 elementi tra numeri e lettere, ad esempio per il colore nero sarà color: #000000
In questa pagina potrete vedere moltissimi colori con il proprio valore esadecimale
Colori esadecimali

Poche righe di codice per scrivere su qualunque punto della pagina ed il testo
si visualizzerà con le caratteristiche che abbiamo stabilito, potremmo però aver bisogno
di scrivere un titolo o un piccolo testo con delle caratteristiche differenti,
allora useremo il tag apposito per i paragrafi: <p>Testo</p>

- Paragrafo con personalizzazioni di style in linea

<p style="text-align: center; font-family:Courier New; font-size: 16px; color: #628182"> Testo</p>

Paragrafo con testo personalizzato

I paragrafi sono molto comodi nelle pagine web, "contenitori" versatili per scrivere
un testo con caratteristiche personalizzate anche differenti dal resto della pagina, è un blocco a se
per cui non si può affiancare a nulla, va a capo in automatico lasciando anche parecchio spazio
se non si stabilisce nello style che ovviamente è più comodo scrivere nei css/foglio di style
così da poter richiamare la classe ogni volta che occorre

Ecco un paio di esempi per le classi dei paragrafi, ai parametri base, font/carattere,
misura e colore ho aggiunto margin: 0px; per stabilire lo spazio con il contenuto della pagina.
In pratica di default, dopo la chiusa del paragrafo è come se ci fossero due a capo,
il parametro "margin: xpx;" ci permette di modificare questa caratteristica

<style type="text/css">
p.extra {
text-align:center;
font-family: "Georgia";
font-size: 14px;
color : #909753;
margin: 0px;
}
p.font_decor {
text-align:center;
font-family: "Cookie", cursive;
font-size: 26px;
color : #657785;
margin: 0px;
}
</style>

- Per richiamare le classi nel tag del paragrafo scriveremo:
<p class="extra">Testo</p> <p class="font_decor">Testo</p>

Testo scritto con la classe p.extra

Testo scritto con la classe p.font_decor


N.B.: Utilizzare un font/carattere personalizzato per scrivere i titoli nelle pagine può
penalizzare il sito in termini di indicizzazione, specifici tag html sono previsti per questa funzione
e hanno determinate regole, leggete la guida dettagliata qui -> w3schools tag titoli



Per modificare velocemente e in linea una parola o una piccola parte di testo
utilizziamo il tag <span style="...">Testo</span>

Nello style dell'esempio ho modificato solo il colore del testo ma ovviamente si può
aggiungere ogni parametro necessario <span style="color:#898f51">Testo</span>
Questo testo è una prova, questa parte è in verde e ora torna il marrone...

Anche per questo tag è possibile scrivere una o più classi dedicate nei css/foglio di style,
ecco un paio di esempi, con la prima classe il testo racchiuso nel tag sarà verde, in corsivo e
sottolineato, con la seconda invece, il testo sarà di colore azzurro e tutto maiuscolo

<style type="text/css">
span.decor {
color: #909753;
font-style: oblique;
text-decoration: underline
}
span.more {
color: #657785;
text-transform:uppercase
}
</style>

- Per richiamare le classi nel tag scriveremo:
<span class="decor">Testo</span> <span class="more">Testo</span>
* Testo di prova con la prima classe, ora sono nel tag span... e ora torno classico
* Testo di prova con la seconda classe, ora sono nel tag span... e ora torno classico

Ai parametri base per il testo, font, colore e misura, ne possiamo aggiungere
alcuni molto utili e altri decorativi, tutti i parametri si possono inserire in linea o nello style,
spesso sono scritti nello stesso modo ma in alcuni casi, in linea si usano solo brevi tag

text-align:center; o left o right; parametro necessario per la posizione del testo,
nella pagina o in un qualunque "contenitore" web

line-height: 1.5em; parametro per modificare lo spazio tra le righe del testo per ottenere
maggiore leggibilità, ovvero interlinea, il valore può essere espresso in pixel, em e percentuale

- Con alcuni font/caratteri diventa quasi indispensabile altrimenti il testo risulta troppo fitto

font-style: oblique; parametro per visualizzare il testo in corsivo
Per approfondire le proprietà del parametro font-style, leggete la guida qui -> css-tricks

Se occorre per evidenziare una parola o una frase, quindi in linea, si possono utilizzare i tag
<em>Testo</em> o <i>Testo</i>
In questo caso em non è il valore con cui esprimere una misura, sta per "emphasis"

font-weight:bold; parametro da inserire nello style per visualizzare il testo in grassetto,
direttamente nel testo si possono usare i tag <strong>Testo</strong> o <b>Testo</b>

text-decoration: underline; parametro da inserire nello style per visualizzare il testo sottolineato, direttamente nel testo si possono usare i tag <ins>Testo</ins> o <u>Testo</u>

text-decoration:line-through;parametro da inserire nello style per visualizzare il testo barrato, direttamente nel testo si può usare il tag <del>Testo</del>

- Questi tre parametri vanno inseriti nello style quindi se si vogliono utilizzare per una parola
o una frase si possono usare con il tag <span> o in un paragrafo <p>

text-transform:uppercase; le lettere saranno visibili tutte in maiuscolo
<span style="text-transform:uppercase;">testo visibile tutto in maiuscolo</span>
testo visibile tutto in maiuscolo

text-transform:lowercase; le lettere saranno visibili tutte in minuscolo
<span style="text-transform:lowercase;">TESTO VISIBILE TUTTO IN MINUSCOLO</span>
TESTO VISIBILE TUTTO IN MINUSCOLO

text-transform:capitalize; la prima lettera di ogni parola si visualizzerà in maiuscolo
<span style="text-transform:capitalize;">Testo....</span>
la prima lettera di ogni parola si visualizza in maiuscolo

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^

💻 ✨ Apprezzato
80%
Voti totali: 6
Rating... 4




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^









~ Pagina visitata da 2486 utenti





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥


Basi e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

elise ~ 09/10/2026 16:38:03
Ciao carissima Penelope, ho preso il tuo bellissimo quadrotto fatato. Sempre bellissimo il tuo sito, pieno di creazioni stupende.BRAVISSIMA!!!!!Grazie, un abbraccione e buona serataElise
ૡScritto in Quadrotti fate
ૡPenelope ♥ ~ 22/09/2026 20:36:49
Grazie a te carissima Marina
ૡScritto in Calendario magico box small
marina ~ 20/09/2026 20:04:19
Grazie infinite per il bellissimo calendario.
ૡScritto in Calendario magico box small
ૡPenelope ♥ ~ 14/09/2026 22:32:30
Cara Filo d'arianna un po' di anni fa ho realizzato qualche grafica per ForumFree ed era un delirio non so se è ancora così ma la grafica si componeva con decine di piccole immagini, davvero tanto lavoro nemmeno gratificante purtroppo, per quanto riguarda i tutorial, sono una maniaca di html, php e js ma sulla gestione di un forum non saprei da dove partire Un abbraccio forte
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 14/09/2026 18:34:20
Carissima Filo d'arianna grazie alla tua segnalazione ho risolto un problema nel commentario purtroppo per evitare spam e messaggi sgradevoli avevo impostato un eccesso nei controlli, ripristinato, ora si può commentare e mettere url del proprio spazio senza problemi grazie infinite cara un abbraccio forte forte
ૡScritto in Home
filod'arianna ~ 14/09/2026 07:41:37
Ciao Penelope! Ho preso il Settimanello micioso:-DL'ho inserito all'interno della sezione "Appunti" sul mio forum, però ho visto che non si può più linkare qui nei messaggi, non riesco a farti vedere dove l'ho inserito. Ad ogni modo il forum è Librandosi tra le pagine, su forumfree. Un abbraccio a presto!
ૡScritto in Home
filod'arianna ~ 12/09/2026 06:52:57
Hai mai pensato di buttarti nel creare grafica e tutorial per ForumFree? 😂 Sto scherzando, ma solo a metà! Sarebbe fantastico. Ne approfitterei immediatamente
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 11/09/2026 16:56:26
Carissima Filod'arianna ti ringrazio tantissimo è il più bel complimento che si possa riceve! Un abbraccio forte e viva l'autunno!!!
ૡScritto in Blogger Kit Autunno
filod'arianna ~ 10/09/2026 07:03:48
Adoro il colore di Ortensie vorrei un blog su Blogger solo per i tuoi kit e i tuoi accessori:-D Grazie mille per tutto ciò che metti a disposizione carissima 😘N.B. Anch'io non vedevo l'ora che arrivasse un po' di fresco -.-'
ૡScritto in Blogger Kit Autunno
Cris ~ 02/07/2026 19:45:24
Ciao, sono passata per un salutino e per rivedere il tuo sito. Buona serata e buon fine settimana.
ૡScritto in *Amici del telaio...*