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

Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥
ૡScritto in Sfondo pagina
Gabriella ~ 09/03/2026 18:37:40
Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie
ૡScritto in Decori pagine Primavera
soleyada ~ 07/03/2026 22:02:27
Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-*
ૡScritto in Countdown Primavera
Cris ~ 24/02/2026 08:17:18
Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti.
ૡScritto in Home
MOra Ribelle ~ 16/02/2026 12:05:35
Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie
ૡScritto in Gif & co...
Sari ~ 14/01/2026 17:31:32
Buon Anno Penelope. Ho prelevato un top pagina sostituendo quello natalizio. Tutto bello e utile qui, grazie.
ૡScritto in Marquee con Javascript
Frann ~ 25/12/2025 15:09:37
Cara amica Penelope, ti auguro un Natale, con pace, amore e tanta gioia. Bacione ~ Frann
ૡScritto in Home
filod'arianna ~ 24/12/2025 08:50:20
Auguri di buon Natale Penelope, e a tutti i visitatori del Telaio 🎄✨😃
ૡScritto in Home
Sari ~ 18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ૡScritto in Home
filod'arianna ~ 14/12/2025 09:32:05
Ciao Penelope, ho preso un countdown Grazie mille per averli messi a disposizione, sono deliziosi! Ne userò più d'uno sicuramente:-)
ૡScritto in Countdown stagioni e feste