What CSS3 Can Do For You: Typography and Special Effects

written by aext on July 8, 2010 in Web Design with 26 comments

Images, transitions and everything in between is a great way to compliment your website, but there is one aspect you should not forget about—typography. Typography is, “the art and technique of arranging type, type design, and modifying type glyphs.” Without great looking typography, it is hard to compose a well rounded looking website.

Content is extremely important to a website. For your clients it allows them to say who they are, what they do, and how to contact them. Great content is also valuable for SEO purposes. You might not HAVE to have good looking typography, but the better your website looks, the more likely it is people will stay and read that great content.

Custom Fonts


Besides the numerous other things CSS3 brings to us, it also gives us some custom font options. CSS3 allows you to manipulate fonts and add a lot of variety.

Web Typography

For example, the look above only uses two different fonts, the reason it looks so clean and unique is because the designer, “was able to create a wide range of styles, simply by altering the size, weight, colour and other properties of the type. This is a great way to generate typographical interest without having to rely on a lot of fonts.”

The main changes made to this text were to the <span> tag, meta data lines, and you now can use CSS code to create the columns (look to the code below for the column code).

.body p{
  font-family: Verdana;
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
  line-height: 1.5em;
  color: rgb(69,54,37);
}

To set up a certain font throughout the webpage, you can set up @font-face selector (not a new technique, but is honed with CSS3) to create the font you would like. An example of this is below, and provided by CARDEO.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

div {
 font-family: aller-display;
 font-size: 2em;
}

Shadow


Creating shadows can add depth to your script, and depending on the site, could make it easier to read. You may not want to have your entire font shaded, but it is a great alternative to bolding to use as an emphasis. To implement a shadow effect, you will do the following:

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

Browsers that support this type of effect are:

  • FireFox
  • Opera
  • Safari
  • Chrome

Along with shading, you can add other like features such as the appearance your font is glowing. This effect is possible by blurring the radius of the font.

Glowing effect typograhy

Special Effects


Adding certain effects can really add something to your website. It doesn’t have to be something popping out at the visitors, or even be something extremely complicated to design. Designing a great looking website can be something simple like adding a magazine flip to the transition from going to one page to the next, or having your site horizontally scrolling.

Magazine Flip

Pure CSS3 Magazine Flip

Many of these types of special effects can be done with CSS3 and very little else. To get a magazine flip, for webkit browsers you would utilize a few different techniques, “by using CSS3 gradients, transitions, 2d transforms and clipping, I’ve achieved this pure CSS3 — without Javascript — page flipping effect. By adding some Javascript it would be possible to do a full catalog viewer just like the existent ones done in Flash.”

Border Radius

This effect is great for buttons, and also to use to when adding something to a rotating image. The Art of the Web goes on to say that, “web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners.”

This effect also works in all browsers that are CSS3 compatible. Below is a screen shot showing you how to create the border radius feature in each browser.

CSS3 (Opera browser) Mozilla equivalent WebKit equivalent
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

Playing off of this you can create images that are skewed, shaded, rotated and multiple other effects that stem from the border radius command.

Overlays

Going even further with the border-radius command, and you can create a great looking overlay effect. Check out the screenshot below:

css3 overlay

According to Zurb, “the trick with these overlays is the gradient border, going from a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.”

Take into account, you will need to adjust your image because it will be stretched from the middle out. Doing a little bit of pre-planning will help you avoid messing up your potential masterpiece. Looking at the screenshot above, you will see how the programmers for this site planned out their overlay effect.

These are just some of the many things you can do with CSS3. Combining different effects can produce a very well designed web site, and hopefully save you time. Although many clients are still demanding IE6 compatibility, it is wise to start brushing up on your skills now.

Staying ahead of the design curve is a must in this industry, and knowing new techniques will only keep you up to par. CSS3 can do a lot of exciting new things without the use of Flash and Javasricpt, but it also can be integrated with these other tools to heighten the user experience. jQuery and other programs are also a great match with a lot of the new CSS3 capabilities.

What types of techniques have you found useful? Are you brushing up on your CSS3 knowledge now, or waiting for more browser capabilities? Let us know in the comments below.