Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 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 2265 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...

DanyGraphic ~ 06/04/2026 20:14:40
Ciao Penny , grazie per il tuo consiglio, sei sempre un punto di riferimento . Un abbraccione a te . Ti auguro una buona serata
ૡScritto in Home
DanyGraphic ~ 06/04/2026 13:51:58
Ciao Penny e buona Pasquetta , oggi casualmente ho dato un occhiata alle pagine con testo scorrevole che volevo sistemare e magicamente funziona tutto come prima , compreso le stelline che scendono sulle immagini .....è un caso che tu sappia ....? io non trovo nulla a riguardo, ma credo rimetterò le pagine online . Buonissima giornata
ૡScritto in Home
ૡPenelope ♥ ~ 04/04/2026 17:38:15
Grazie infinite Bibi e Krault un abbraccio forte forte Buona Pasqua a voi e a tutti gli amici del telaio
ૡScritto in Home
Krautl ~ 04/04/2026 09:53:12
Frohe Ostern
ૡScritto in Commenti telaio...
BiBi ~ 04/04/2026 07:18:36
Buona Pasqua a Penelope 🌺 e a tutta l'utenza
ૡScritto in Home
DanyGraphic ~ 02/04/2026 18:17:56
Sono passata per un saluto . Sempre piacevole navigare nel tuo sito , un abbraccione e cari Auguri di buona Pasqua
ૡScritto in Home
Grazia ~ 02/04/2026 08:16:05
Buongiorno carissima Penelope, sempre bellissimo e interessante qui! Ottimo il nuovo aggiornamento sulla funzione marquee :) Ti lascio un forte abbraccio e tanti carissimi auguri per una serena Pasqua. Ciao!
ૡScritto in Home
ૡPenelope ♥ ~ 30/03/2026 16:18:12
Ciao carissima Ahamiah non sono riuscita a lasciare un saluto nel tuo forum quindi ti ringrazio tantissimo e ti mando un forte abbraccio qui
ૡScritto in Datari con saluto more image
=ahamiah= ~ 29/03/2026 09:48:10
Buona domenica delle Palme, ho riscoperto il vostro forum e vi faccio i complimenti. Ho prelevato il codice di uno dei vostri saluti con data. Grazie a buon lavoro.
ૡScritto in Datari con saluto more image
Cris ~ 28/03/2026 18:34:53
Ciao, sono passata per un salutino. Buon fine settimana!
ૡScritto in Commenti telaio...