Formattazione del testo

CSS

Lo stesso argomento in dettaglio: CSS.

I CSS hanno diverse opzioni per formattare i font:

Definizione del font

p {font-family: arial;}

Caratteri sicuri per il Web

Esiste solo un numero limitato di caratteri disponibili su tutti i sistemi: essi possono quindi essere utilizzati senza troppe preoccupazioni. In inglese sono detti web safe font:

Caratteri predefiniti nei CSS

Font stacks

Poiché non si può garantire la disponibilità dei caratteri che si desidera utilizzare sulle pagine web (anche un carattere web potrebbe non funzionare per qualche motivo), si possono definire dei "font stacks" in modo che il browser abbia più caratteri tra cui scegliere. Ciò implica un valore font-family costituito da più nomi di caratteri separati da virgole, ad esempio:

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

In tal caso, il browser si avvia all'inizio dell'elenco e verifica se quel carattere è disponibile sulla macchina. In caso affermativo, applica quel carattere agli elementi selezionati. In caso contrario, passa al carattere successivo e così via.

Incorporare font non standard

@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }

Tipi di font

• WOFF / WOFF2

Sta per: Web Open Font Format.

Creati per l'uso sul Web e sviluppati da Mozilla insieme ad altre organizzazioni, i caratteri WOFF spesso si caricano più velocemente di altri formati perché utilizzano una versione compressa della struttura utilizzata dai caratteri OpenType (OTF) e TrueType (TTF). Questo formato può anche includere metadati e informazioni sulla licenza all'interno del file del carattere.

WOFF2 è la prossima generazione di WOFF e vanta una compressione migliore dell'originale.

• SVG / SVGZ

Lo stesso argomento in dettaglio: Scalable Vector Graphics.

SVG (Scalable Vector Graphics) è una ricreazione vettoriale del carattere, che lo rende molto più leggero nelle dimensioni del file e lo rende ideale anche per l'uso mobile. SVGZ è la versione zippata di SVG.

• EOT

Sta per: Embedded Open Type.

Questo formato è stato creato da Microsoft ed è uno standard di file proprietario.

• OTF / TTF

Sta per: OpenType Font e TrueType Font.

Il formato WOFF è stato inizialmente creato come reazione a OTF e TTF, in parte perché questi formati potevano essere facilmente (e illegalmente) copiati, tuttavia, OpenType ha funzionalità a cui molti designer potrebbero essere interessati (legature e simili).

Dimensione del font

La dimensione del carattere (impostata con la proprietà font-size) può assumere valori misurati nella maggior parte di queste unità (e altre, come le percentuali), tuttavia le unità più comuni per ridimensionare il testo sono:

• px(pixel): il numero di pixel in altezza che vuoi che sia il testo.
• emè uguale alla dimensione del carattere impostata sull'elemento genitore dell'elemento corrente che stiamo modellando (più specificamente, la larghezza di una lettera maiuscola M contenuta all'interno dell'elemento genitore.)
• rem: Funzionano esattamente come em, tranne per il fatto che 1 rem è uguale alla dimensione del carattere impostata sull'elemento radice del documento (cioè <html>), non sull'elemento genitore.

Peso visivo

Il CSS fornisce quattro proprietà comuni per modificare il peso visivo e l'enfasi del testo:

• font-style: Utilizzato per attivare e disattivare il testo in corsivo. I valori possibili sono i seguenti:
  • normal: Imposta il testo sul carattere normale (disattiva il corsivo esistente).
  • italic: Imposta il testo per utilizzare la versione corsivo del carattere, se disponibile; se non disponibile, simulerà invece il corsivo con l'obliquo.
  • oblique: Imposta il testo per utilizzare una versione simulata di un carattere corsivo, creato inclinando la versione normale.
• font-weight: Consente di impostare il livello di grassetto del testo. Questo ha molti valori disponibili nel caso in cui si dispone di molte varianti di font disponibili (come -Light, -Normal, -bold, -extrabold, -nero, ecc.).
  • normal, bold: Spessore del carattere normale e grassetto
  • lighter, bolder: Imposta il grassetto dell'elemento corrente in modo che sia più leggero o più pesante di un gradino rispetto al grassetto dell'elemento genitore.
  • 100- 900: valori numerici di grassetto che forniscono un controllo granulare più fine rispetto alle parole chiave sopra, se necessario.
• text-transform: Consente di impostare la trasformazione del carattere. I valori includono:
  • none: Impedisce qualsiasi trasformazione.
  • uppercase: Trasforma TUTTO IL TESTO IN MAIUSCOLO.
  • lowercase: Trasforma tutto il testo in minuscolo.
  • capitalize: Trasforma tutte le parole in modo Che La Prima Lettera Sia Maiuscola.
  • full-width: Trasforma tutti i glifi in modo che vengano scritti all'interno di un quadrato a larghezza fissa, simile a un carattere a spaziatura fissa, consentendo l'allineamento, ad esempio, di caratteri latini con glifi delle lingue asiatiche (come cinese, giapponese, coreano).
• text-decoration: Imposta/deseleziona le decorazioni del testo sui caratteri.
• none: Disabilita eventuali decorazioni di testo già presenti.
  • underline: Sottolinea il testo.
  • overline: Conferisce al testo una linea superiore.
  • line-through: Mette un barrato sul testo.

Ombreggiatura del testo

Ombra singola:

text-shadow: 4px 4px 5px red;

Ombra multipla:

text-shadow: 1px 1px 1px red,2px 2px 1px red;

Allineamento del testo

La proprietà text-align viene utilizzata per controllare il modo in cui il testo è allineato all'interno della sua casella di contenuto. I valori disponibili sono i seguenti (funzionano più o meno allo stesso modo di un qualsiasi programma di elaborazione testi):

• left: Giustifica il testo a sinistra.
• right: Giustifica il testo a destra.
• center: Centra il testo.
• justify: Allarga il testo, variando gli spazi tra le parole in modo che tutte le righe di testo abbiano la stessa larghezza.

Altezza della linea

La proprietà line-height imposta l'altezza di ogni riga di testo. Esempio:

line-height: 1.6;

Spaziatura tra lettere e parole

p::first-line {letter-spacing: 4px;word-spacing: 4px;}

Stili dei caratteri

• font-variant: Consente di passare dal maiuscolo alle alternative di caratteri normali.
• font-kerning: Consente di attivare e disattivare le opzioni di crenatura dei caratteri.
• font-feature-settings: Consente di attivare e disattivare varie funzioni dei caratteri OpenType.
• font-variant-alternates: Controlla l'uso di glifi alternativi per un determinato tipo di carattere.
• font-variant-caps: Controlla l'uso di glifi maiuscoli alternativi.
• font-variant-east-asian: Controlla l'utilizzo di glifi alternativi per le scritture dell'Asia orientale, come il giapponese e il cinese.
• font-variant-ligatures: Controlla quali legature e forme contestuali vengono utilizzate nel testo.
• font-variant-numeric: Controlla l'utilizzo di glifi alternativi per numeri, frazioni e indicatori ordinali.
• font-variant-position: Controlla l'utilizzo di glifi alternativi di dimensioni più piccole posizionati come apice o pedice.
• font-size-adjust: Consente di regolare la dimensione visiva del carattere indipendentemente dalla dimensione effettiva del carattere.
• font-stretch: Passa tra le possibili versioni estese alternative di un dato carattere.
• text-underline-position: Specificare la posizione delle sottolineature impostata utilizzando il valore della text-decoration-lineproprietà underline.
• text-rendering: Prova a eseguire un'ottimizzazione del rendering del testo.

Stili di layout del testo

• text-indent: Specificare quanto spazio orizzontale deve essere lasciato prima dell'inizio della prima riga del contenuto del testo.
• text-overflow: Consente di definire la modalità di segnalazione agli utenti del contenuto in overflow che non viene visualizzato.
• white-space: Definisce come vengono gestiti gli spazi bianchi e le interruzioni di riga associate all'interno dell'elemento.
• word-break: Consente di specificare se interrompere le righe all'interno delle parole.
• direction: Definire la direzione del testo (dipende dalla lingua e di solito è meglio lasciare che HTML gestisca quella parte poiché è legata al contenuto del testo.)
• hyphens: Attiva e disattiva la sillabazione per le lingue supportate.
• line-break: Rilassa o rafforza l'interruzione di riga per le lingue asiatiche.
• text-align-last: Definisce come viene allineata l'ultima riga di un blocco o di una riga, subito prima di un'interruzione di riga forzata.
• text-orientation: Consente di definire l'orientamento del testo in una riga.
• overflow-wrap: Consente di specificare se il browser può o meno interrompere le righe all'interno delle parole per evitare l'overflow.
• writing-mode: Consente di definire se le righe di testo sono disposte orizzontalmente o verticalmente e la direzione in cui scorrono le righe successive.

Riempimento e contorno

Come nei file vettoriali per la stampa, anche i font web hanno riempimento e contorno (stroke).

.module { stroke: black; }

Esempio. Tipologie di stroke:

• fill
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-width