Realistic Typography with CSS

Learn Front-End Development

Letterpress

The goal with this effect is to create the illusion of letterpress text. Letterpress can be thought of as text that is "carved in" so in order to achieve this, we have to mimic the look of 3-dimensional text or "pseudo-3D".

To achieve this goal, we use two variations. One variation has a medium-light background with darker text, while the second variation has a darker background with and lighter text. With the lighter text variation, we used a darker shadow above the text, and with the darker text variation, we used a lighter shadow below the text. This gives the text the "carved in" effect.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

<style>
p.letterpress {
font: 200%/1.6 Baskerville, Palatino, serif;
padding: .8em 1em;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
p.letterpress + p.letterpress {
background: hsl(210, 13%, 30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px rgba(0,0,0,0.6);
}
</style>
<p class="letterpress">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>
<p class="letterpress">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>

Stroked Text

The goal here is to achieve a stroked text effect similar to what could be produced in Adobe Photoshop, Adobe Illustrator, or any other graphics editing software.

The most common way to achieve this effect is with multiple text-shadows with slightly different offsets.

The second example shown below is our favorite way to add stroke to any text. Even though it requires more markup, the stroke is cleaner and renders better across browsers.

CSS

CSS

<style>
.stroked-text-container {
background-color: deeppink;
padding: .4em 0;
text-align: center;
}
.stroked-text {
margin: 0;
color: white;
font-size: 62px;
}
.stroked-text:first-child {
text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}
.stroked-text text {
fill: currentColor
}
.stroked-text use {
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
}
</style> 
<div class="stroked-text-container">
<p class="stroked-text">CSS</p>
<p class="stroked-text"><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text id="css" y="1em">CSS</text></svg></p>CSS</p>
</div>
</div>

Glowing Text

Glowing text is a great style to apply to hovered links, headers, and various other typography throughout your web design.

To achieve this effect, we used a few text-shadows, no offsets, and used the same color shadow as our text.

If you want to create an interesting hover effect, you can hide the text on hover, making it appear like it's slowly blurring.

Hover over the text below.

Glow

<style>
.glow-container {
background: #203;
padding: .5em 0;
}
.glow-text {
transition: 1s;
color: #ffc;
font-size: 62px;
text-align: center;
}
.glow-text:hover{
text-shadow: 0 0 .1em, 0 0 .3em;
}
</style> 
<div class="glow-container">
<p class="glow-text">Glow</p>
</div>

Extruded Text

Extruded text is another "pseudo-3d" effect that is popular in typographic print design and web design. This effect can look really unique if it is used in moderation.

In order to achieve this effect, we added many stacked shadows to the text with no blur, only 1px difference, and getting progressively darker to the end. The very last shadow is highly blurred and much darker emulating the shadow the text would realistically create.

Extruded

<style>
.extruded-container {
background: #58a;
padding: .5em 0;
}
.extruded-container .extruded-text {
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;
font-size: 62px;
text-align: center;
}
</style> 
<div class="extruded-container">
<p class="extruded-text">Extruded</p>
</div>

Retro Text

In order to achieve this effect, you can have many black shadows and remove the final blurry shadow. This effect emulates the look of old/retro signage.

Retro

<style>
.retro-container {
background: hsl(0,50%,45%);
padding: .5em 0;
}
.retro-container .retro-text {
color: #fff;
text-shadow: 1px 1px black, 2px 2px black,
3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black,
7px 7px black, 8px 8px black;
text-align: center;
font-size: 62px;
letter-spacing: 0.03em;
}
</style> 
<div class="retro-container">
<p class="retro-text">Retro</p>
</div>