Tätä opasta ei ole vielä omalla kielelläsi, joten tässä se on englanniksi.
Lyhyesti
- Text effects are treatments applied to letters, such as outlines, inlines, extrusion, offset echoes, print misregistration and glows.
- Effects work best on a few large words, in a heavy weight, where they add character without making the text harder to read.
- Effects look dated when they are applied at full strength to every line, stacked together, or used to fix weak type.
- Outlined text needs a thick, simple typeface and a calm background, because the letters lose their solid shape.
- Pick one effect per design and tie its colours to the palette of the background so it looks designed rather than added.
Tällä sivulla
Text effects are treatments applied to letters, such as an outline, an inline, a 3D extrusion, an offset echo, a printed misregistration or a soft glow. They don't look dated when three rules hold: use one effect per design, apply it to a few large words in a heavy weight, and take its colours from the background rather than from a preset. Effects fail when they are stacked, spread across every line, or used to rescue type that wasn't working.
This guide covers the main families of effect, when each suits a message, how to keep them readable, and how to build a few in CSS. If you haven't chosen the typeface yet, start with display fonts, since most effects need big, sturdy letters to work.
The main kinds of text effects
Most lettering treatments belong to a handful of families. Each carries its own associations, which is why choosing one is really choosing a tone of voice.
| Effect | What it looks like | Tone it sets | Legibility risk |
|---|---|---|---|
| Outline (contour) | Letters drawn as strokes only | Airy, modern, editorial | High on busy grounds |
| Inline | A thin line inside each stroke | Vintage signage, craft, sport | Low at large sizes |
| Extrude | Letters with 3D depth | Retro, playful, loud | Moderate |
| Double or echo | An offset copy or trail behind | Motion, music, energy | Moderate |
| Cut | Letters sliced and shifted | Tension, fashion, tech | Moderate |
| Riso | Offset colour layers, print texture | Indie print, zines, warmth | Low if offset is small |
| Halo or glow | Soft light around the letters | Night, neon, calm luxury | Low on dark grounds |
When a text effect helps, and when it hurts
An effect helps when it carries meaning the words can't carry alone. An echo behind Loud makes it vibrate. An extrusion on a retro menu board places it in time. A glow on a late-night event poster suggests the room. When the effect doesn't say anything, it becomes decoration, and decoration dates quickly.
One big word is where an effect earns its place: there is little to read and a lot to feel.
On an event poster, the effect belongs on the title only. Dates and details stay plain.
Avoid
- An effect on the headline and the body text
- Outline plus shadow plus glow on one word
- Default colours, like a black drop shadow on everything
- Thin or light fonts under heavy effects
- Effects used to make weak copy look exciting
Do
- One effect, on the few biggest words
- One treatment per design, used with conviction
- Effect colours taken from the background palette
- Heavy, simple letterforms that survive the effect
- Copy that works plainly, then an effect that adds tone
How to make outline text readable
Outlined text is the effect most likely to fail, because it removes the solid shape that makes letters easy to recognise. Use it on a heavy sans or slab with open shapes, at large sizes, over a calm background. Set the stroke thick enough to read as a line, not a hairline: around 2 to 4 percent of the font size is a good start.
A reliable pattern pairs one solid word with one outlined word, such as Summer solid and Sessions outlined. The solid word anchors the reading; the outline adds rhythm. Avoid outlining small text entirely, and check it on a phone, where thin strokes vanish first.
/* Outline: a stroke, no fill. */
.outline {
color: transparent;
-webkit-text-stroke: 0.03em #f5f0ff;
}
/* Extrude: stacked shadows, each 1px further. */
.extrude {
color: #fde8d0;
text-shadow:
1px 1px 0 #d9485f,
2px 2px 0 #d9485f,
3px 3px 0 #b83250,
4px 4px 0 #b83250,
5px 5px 0 #8f2442,
6px 6px 0 #8f2442;
}
/* Echo: one offset copy in a palette colour. */
.echo {
color: #ffffff;
text-shadow: 0.06em 0.06em 0 #7c3aed;
}
/* Halo: a soft glow for dark grounds. */
.halo {
color: #fff7ed;
text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
0 0 0.8em rgb(244 114 182 / 0.35);
}-webkit-text-stroke works in all major browsers despite its prefix. Shadows in em scale with the text.Choosing colours for text effects
Effects look added when their colours come from nowhere. They look designed when they come from the background. Take the extrusion's side colour from the darkest part of the gradient, the echo from its most saturated colour and the glow from its lightest. The effect then reads as light and material from the same scene.
Keep the letter face itself high in contrast with the ground, and let the effect sit between them in lightness. That way the effect adds depth without taking contrast away from the letters. For the underlying contrast rules, see colour contrast.
Text effects in Gradiently
Gradiently's Studio includes eight Lettering treatments: Contour, Inline, Cut, Extrude, Double, Trail, Riso and Halo. A Mark also knows where the words are: its calmest region moves behind them, and Auto ink picks light or dark type per line from the Mark's own palette, which gives a treated word a steady ground to sit on. The same rules still apply: one treatment, a few words, a heavy face.
A single treated phrase on a calm field shows restraint doing the work.
For more on getting type to read on colourful grounds, read text on a gradient; for effects built into the gradient itself, see gradient text in CSS.
Usein kysyttyä
What text effects look modern?
Restrained ones: a thick outline paired with a solid word, a small offset echo, a subtle riso misregistration or a soft glow on a dark ground, each used on one or two large words.
How do I make outline text in CSS?
Set the text colour to transparent and add -webkit-text-stroke with a width and colour, such as -webkit-text-stroke: 0.03em #ffffff. It works in all major browsers.
How do I make a 3D text effect?
Stack several text-shadow layers, each offset one pixel further in the same direction, darkening towards the back. Take the colours from your background so the depth looks lit by the same light.
Do text effects hurt readability?
They can. Keep effects to large, heavy words, one effect per design, and check that the letter face still has strong contrast with the background.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
