The Designer’s Guide to CSS3: Text Styles

The Designer’s Guide to CSS3

Creating beautiful text online has long frustrated designers. But with some new features in CSS3, we can do things to text with code that previously had to be done with images. Our text will work nicely with content management systems and will be dynamic. Let’s look at some CSS3 text styles that designers will love.

Text shadows

Easy-to-use layer styles in Photoshop made text shadows ubiquitous. But historically the style could only be used online by generating images for the text that needed shadows.

Text shadows are highly prone to abuse. So, while I encourage you to understand it and use it, please exercise some restraint. Here are two demonstrations of what can be accomplished with CSS3:

You can do basic shadows that mimic the default layer styles in Photoshop, but you can do so much more than that. The samples you see above were created using multiple text shadows on the same element. Such an approach is difficult to plan for without the code in mind. Check out the resources for text shadows listed below to fiddle with the output and see ways you can use this.

You can also use text shadows in a way that doesn’t look like shadows at all. In the image below, the text looks pressed or inset. Subtle effects like this can be a nice alternative to the radical demonstrations above.

CSS3 text shadow resources

Custom web fonts with @font-face

As fun as drop shadows can be, by far CSS3′s most popular enhancement to text is the ability to leverage custom fonts. Even better, this is one of the CSS3 elements that have some of the broadest browser support. Amazingly, even Internet Explorer supports it—all the way back to version 4!

This advancement makes generating images for headline or display text a thing of the past (though it was already a very dated approach). Custom fonts can be used on dynamic content coming out of systems like WordPress, even.

Below is an image of some text rendered in a browser using CSS-based fonts. The font is Kingthings Petrock from FontSquirrel.com:

I intentionally selected a font that doesn’t even remotely resemble a standard web-safe font to prove a point. There are countless beautiful fonts available to use, some commercially, others for free. Check out the resources below for some great options for custom type.

Web font resources

Gradients

While CSS3 doesn’t have gradient tags specific to text, gradients can be applied to text, which can be a great way to add subtle or extremely bold styles to text. Be sure to check out the articles on backgrounds and gradients to get an idea of what’s possible.

More resources

Next up: Transformations in CSS3

CSS3 Resources from MyDesignShop.com

COMMENT