Beautiful typography always intrigues me and I’m always looking for ways to combine web typography and technology to make them display better. Last month I got a chance to experiment with CSS3 typography techniques and see how far I could mix and match these techniques to create a visually stunning piece of typography on the web.
Today, I’ll show you how you can use these CSS3 properties to spice up your typography or create stunning text effects in a way you don’t think is possible.
Note: These effects will only work on Webkit browsers but I have added fallbacks to make it viewable on other browsers.
[tut demo=”https://onextrapixel.com/examples/css3-typography-techniques/” download=”https://onextrapixel.com/examples/css3-typography-techniques/css3-typography-techniques.zip”]
Cutting Edge CSS3 Typography Techniques
Gradient on Text
This works the same way as creating a gradient background with CSS3 but we clip the background to a text instead. Here’s an example code:
CSS:
h1#gradient {
color: #FF0052; /* Fallback Color */
text-transform: uppercase;
font-weight: bold;
font-family: helvetica;
text-align:center;
font-size: 70px;
letter-spacing: -4px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1#gradient {
background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
HTML:
<h1 id="gradient">CSS3 Rocks!</h1>
Unfortunately, This technique only works on webkit browsers. The problem with Firefox is that there’s no properties that allow background-clip to work with text, so when viewing on other browsers, it will fall back to a normal color. I also wrapped the effect with @media screen and (-webkit-min-device-pixel-ratio:0) to prevent the background gradient showing up on unsupported browsers.
The Relief Shade Effect
Even with the gradient, I felt that I could extend it further and so I decided to add some depth by applying a relief shade effect. The relief shade effect is a well-known technique that shows a clear separation between the letter and its shadow as if the letter is floating. This technique can be accomplished by using 2 values of text-shadow. The first shadow’s color should match the background color to create a gap between the second shadow. Here’s an example code, extended from the previous example:
CSS:
body {
background: #441369;
}
h1#gradient {
text-align:center;
}
h1#gradient span {
position:relative;
display: inline-block;
color: #FF0052; /* Fallback Color */
text-transform: uppercase;
font-weight: bold;
font-family: helvetica;
text-align:center;
font-size: 70px;
letter-spacing: -4px;
text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1#gradient span{
background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:none !important;
}
h1#gradient span:after {
background: none;
content: attr(data-text);
left: 0;
position: absolute;
text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); //relief shade effect
top: 0;
z-index: -1;
}
}
HTML:
<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>
This part is tricky. The problem I had was that the text-shadow and the gradient text weren’t playing nice together. The shadow overlapped the gradient for some reason so I created a workaround. I added a CSS :after selector to render each effect separately and give the shadow a z-index -1 so that it no longer overlapped the text.
I quickly realized that this workaround would not work if I have text-align: center. The effect in the :after selector would be misaligned and in order to solve this I had to wrap the text with another span tag with position: relative and display: inline-block to keep the :after selector aligned.
Since I was rendering the :after selector separately, I needed a way to let the stylesheet know what to render. I added an HTML data-text attribute containing the word “CSS3 Rocks!” to the span tag and added a content: attr(data-text) property to the CSS :after selector. I now have a stunning typography with a relief shade effect working together with a gradient.
Textured Shadow Effect
I wondered to myself whether I could add one more effect to make it even more interesting. As it turned out, I could. Textured shadow is a nice little bit of eye candy that can give your website a unique look and feel. Here’s an example code extended from the previous examples:
CSS:
body {
background: #441369;
}
h1#gradient {
text-align:center;
}
h1#gradient span {
position:relative;
display: inline-block;
color: #FF0052; /* Fallback Color */
text-transform: uppercase;
font-weight: bold;
font-family: helvetica;
text-align:center;
font-size: 70px;
letter-spacing: -4px;
text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1#gradient span{
background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:none !important;
}
h1#gradient span:after {
content: attr(data-text);
left: 8px;
position: absolute;
background: url(http://i.imgur.com/RkDRMcJ.png); /* image source for your texture */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1);
top: 8px;
z-index: -1;
width: 100%;
}
}
HTML:
<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>
With a few adjustments to the position of the text-shadow and adding an image for the texture, I now get a visually stunning typography effect on my website without even opening Photoshop.
[tut demo=”https://onextrapixel.com/examples/css3-typography-techniques/” download=”https://onextrapixel.com/examples/css3-typography-techniques/css3-typography-techniques.zip”]
Conclusion
CSS3 typography effects have always been widely used in the web design community but few have used them this extensively. With the right combination of fonts, colors and alignment, you could create an awesome looking typographic poster with only CSS and HTML.
Let us know what you think about these techniques and feel free to share your own techniques in the comment section below.
