Generatore di tratti di testo CSS

Da dove viene il contorno testo CSS

L'idea di contornare un glifo precede il CSS di decenni; è nativa di PostScript (Adobe, 1984) ed è stata trasportata in SVG 1.1 (Raccomandazione W3C, 2ª edizione, 16 agosto 2011), che definisce gli attributi di pittura stroke, stroke-width, stroke-linecap e stroke-linejoin per qualsiasi forma incluso <text>. CSS ha ottenuto la propria versione quando Apple ha rilasciato -webkit-text-stroke in Safari 3 a giugno 2007, insieme a -webkit-text-fill-color. La proprietà non è mai stata standardizzata in alcuna spec W3C pubblicata; vive nell'Editor's Draft del Modulo CSS Text Decoration Livello 4 come text-stroke senza prefisso, ma nel 2026 il nome senza prefisso non è ancora abilitato in alcun browser. Firefox 49 (20 settembre 2016) ed Edge 15 (5 aprile 2017) hanno entrambi aggiunto -webkit-text-stroke come alias esplicito di compatibilità web per gestire le pagine che usano solo il nome con prefisso WebKit. In produzione, scrivi il prefisso.

Tre modi per contornare il testo sul web

C'è più di un modo per disegnare un contorno attorno al testo. Lo strumento giusto dipende dalla larghezza, dal budget di leggibilità e dal fatto che i glifi sottostanti debbano rimanere nitidi:

• -webkit-text-stroke, la proprietà che questo generatore emette. Una riga di CSS, composta da GPU, gratuita a qualsiasi framerate. Il contorno è disegnato centrato sul contorno del glifo, metà dentro e metà fuori, il che significa che i contorni spessi iniziano a mangiare le forme delle lettere.
• text-shadow a quattro direzioni, il ripiego universale che funziona in ogni browser fino a IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; impila quattro ombre da 1 pixel in ogni angolo per fingere un contorno di 1 px. Definito nel Modulo CSS Text Decoration Livello 3 (W3C Candidate Recommendation agosto 2019). A contorni più larghi gli artefatti a gradini diventano visibili; otto o sedici direzioni possono ammorbidirli al costo di più ombre.
• SVG <text> con paint-order: stroke fill;, la risposta giusta quando hai bisogno di un contorno spesso senza che l'inchiostro sanguini all'interno della lettera. La proprietà paint-order disegna prima il contorno, poi il riempimento sopra, quindi il riempimento rimane alla sua piena larghezza pubblicizzata.

Accessibilità: logica del contrasto, no al testo corpo, sì al decorativo

Il Criterio di Successo WCAG 2.1 1.4.3 «Contrasto (Minimo)» (Raccomandazione W3C 5 giugno 2018) richiede contrasto 4,5:1 per il testo normale e 3:1 per il testo grande (18 pt / 14 pt grassetto). Con un contorno applicato, il bordo visivamente dominante del glifo è il colore del contorno, quindi il controllo del contrasto deve confrontare quel colore con lo sfondo, non il riempimento. Un fallimento comune: un logo giallo su bianco con un sottile contorno nero passa se controlli nero vs bianco, ma il corpo della lettera è giallo su bianco e si legge male a dimensioni piccole. I contorni distruggono la leggibilità sul testo corpo. Sotto i 16 px di dimensione del font, un contorno da 1 px riempie il 10-15% dell'interno del glifo e un contorno da 2 px può chiudere i controforme (i buchi in «a», «e», «o»). Riserva il contorno del testo per intestazioni, tipografia di display e uso decorativo; non applicarlo mai al testo del paragrafo senza test espliciti a ogni breakpoint.

Quando un contorno del testo è lo strumento giusto

• Titoli di fumetti e UI di gioco: il look classico Marvel / Nintendo contorno-nero-spesso su riempimento brillante.
• Filigrane e overlay decorativi: solo contorno semi-trasparente, niente riempimento, appoggiato sulle immagini.
• Grafica di tutorial, screenshot, callout dove il testo deve risaltare contro uno sfondo sconosciuto.
• Pulsanti «fantasma» dove il testo del pulsante usa un contorno e un riempimento trasparente per sentirsi abbinato in peso con il pulsante bordato stesso.
• Intestazioni solo contorno nel design editoriale, il look «lettera cava» che era grande alla fine degli anni 2010.

Errori comuni

• Dimenticare il prefisso -webkit-. Il text-stroke senza prefisso è solo in stato Editor's Draft e non è stato rilasciato. Scrivi sempre la forma con prefisso in produzione.
• Cercare di animare -webkit-text-stroke-width. Non è nella lista delle proprietà CSS animabili. Le transizioni «salteranno» invece di interpolare. Anima text-shadow o usa SVG quando è richiesto il movimento.
• Applicare un contorno al testo piccolo. Sotto i 16 px il contorno riempie l'interno del glifo e chiude i controforme. Imposta una guardia di dimensione minima del font con una media query.
• Combinare contorni larghi con letter-spacing stretto. Il contorno attraversa tra glifi adiacenti e produce sbavature grigie dove le forme si toccano.
• Contare il colore del contorno come il «colore del testo» nei controlli di contrasto. Sia il riempimento che il contorno devono passare WCAG 1.4.3 contro lo sfondo.
• Non testare i fogli di stile per la stampa. I contorni possono renderizzarsi drammaticamente più spessi o più sottili quando stampati, specialmente sui browser che riducono la gamma di colori per l'output PDF.

Altre domande frequenti

Perché il mio contorno appare più spesso su un display Retina rispetto a un monitor 1080p?

Non è, in pixel CSS. Un contorno 2px è esattamente 2 pixel CSS su entrambi. Quello che cambia è la nitidezza percepita: su un display Retina (DPR 2×), un contorno di 2 pixel CSS è 4 pixel dispositivo e fa antialiasing in modo pulito. Su un display 1×, 2 pixel dispositivo danno un bordo notevolmente più sfocato. Se hai bisogno di un'hairline che si allinei a un pixel dispositivo su Retina, scrivi 0.5px; i browser arrotondano a un pixel dispositivo su schermi ad alto DPR.

Posso avere un colore di contorno diverso per ogni lettera?

Non con una singola dichiarazione -webkit-text-stroke. O avvolgi ogni lettera in uno <span> e stila individualmente, o usa elementi SVG <tspan> con il proprio attributo stroke. Lo pseudo-elemento ::first-letter accetta text-stroke se hai bisogno solo che la prima lettera sia diversa.

Quanto spesso è troppo spesso per un contorno?

Un soffitto pratico è circa l'8 percento della dimensione del font. A 100 px di font, sono 8 px di contorno; oltre questo le lettere iniziano a sovrapporsi. Se vuoi un visual di contorno più spesso, usa SVG <text> con paint-order: stroke fill; in modo che il riempimento rimanga alla larghezza originale e il contorno si estenda solo verso l'esterno.

-webkit-text-stroke funziona sugli emoji?

Sugli emoji a colori (l'impostazione predefinita nei browser moderni), il contorno si applica alla silhouette esterna del glifo emoji. Il risultato è solitamente sottile perché l'emoji ha già il proprio contorno e ombreggiatura. Per gli emoji in bianco e nero (la variazione font text), il contorno si applica in modo pulito come qualsiasi altro glifo.

Qualcosa viene inviato a un server?

No. Il testo che digiti nell'anteprima, i colori che scegli e il CSS generato sono tutti elaborati nel JavaScript del tuo browser. Nessuna chiamata di rete viene effettuata. Apri la scheda Rete in DevTools per verificare.