- Home
- Blog
- Web Design How to Create Inset Typography with CSS3
How to Create Inset Typography with CSS3
- 4 min. read
-
William CraigCEO & Co-Founder
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”
That is correct, but this time we are going to do it using only CSS.
I set out to recreate the How to Create Inset Typography in Photoshop tutorial, and after experimenting with some fresh and new CSS3 properties, I was able to make a similar type treatment.
We’ll do all of this in less than ten lines of CSS.
Step 1: The HTML markup
Let’s first set up the HTML, which is super simple. The typography will be an h1
element, wrapped around a div
for its background.
<div id="insetBgd"> <h1 class="insetType">Inset Typography</h1> </div>
Step 2: The background
The first bit of CSS we want to do is the background.
We are going to create it similar to the background in the Photoshop tutorial mentioned above. We’ll set the width to 550px
and height to 100px
.
Next, we are going to use CSS3 gradients. If you’ve never used the required browser extensions for CSS3, hop on over to my previous article called CSS3 techniques you should know first, to catch up.
We want the background to have a gradient going top to bottom, from #003471
to #448CCB
.
The code to do this is:
#insetBgd { width: 550px; height: 100px; background: -moz-linear-gradient(-90deg, #003471, #448CCB); background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB)); }
Step 3: Define the font stack and styles
Next, we want to define our preferred font.
The Photoshop tutorial used Rockwell STD, but we are going to just use the normal Rockwell. Neither are considered acceptable web-safe fonts, but more users will have the plain, old Rockwell than the Rockwell STD variant.
However, in case the user doesn’t have Rockwell, we’ll define a few web-safe fonts to render in its place.
In the example, I set the font-size
to 50px
, and the font color
to #0D4383
. Here’s what we have:
h1.insetType { font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 50px; color: #0D4383; }
Step 4: The inset styles
The next and final step is the most important part.
We’ll style the font and give it the “inset” look we’re trying to achieve. We’ll do this by using the text-shadow
style.
You’ll notice Jacob used “inner shadow” in Photoshop to get this effect. Unfortunately for us, text-shadow
doesn’t have an “inset” value.
So what we’ll have to do is create multiple instances of RGBA black and white 1px shadows, some being negative pixels, as well as adding different levels of opacity to each.
I messed around with a bunch of different variations, and settled on this:
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
Add the text-shadow
style to the h1.insetType
class above, and our final CSS code looks like the following:
#insetBgd { width: 550px; height: 100px; background: -moz-linear-gradient(-90deg,#003471,#448CCB); background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB)); } h1.insetType { padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */ padding-top: 17px; font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 50px; color: #0D4383; text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px; }
CSS3 Inset Typography Demo:
Below, you’ll see the final result. Note that you’ll only be able to see it if your browser supports current CSS3 specs for the attributes that we used in this tutorial.
Your browser does not support iframes, you will not be able to view this demo.
What It Looks like in Firefox 3.6 (without Rockwell)
Below is a screen shot of what this effect should look like, taken through a Windows OS machine, Firefox 3.6 and without Rockwell installed.
Conclusion
So there you have it. Pretty simple, right?
It may not look quite as good as it would in Photoshop, but it will take up less load time, it’s more flexible than a static image, and it’s all done without any special software.
I want to give credit to StylizedWeb for giving me an idea of how to go about doing this. Thanks for reading!
Related Content
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX is a full-service marketing agency with 1000+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorWeb Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator