Introduction to CSS3 – Part 3: Text Effects

by on 9th May 2008 with 23 Comments

The third part in this series on CSS3 will be delving into the new text effects. Typography is, without any doubt, one of the most important aspects to get right when designing a layout. Type can draw the reader through a page, give a certain impression, provide impact, be subtle, or aid in separating content.

CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.

All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Text Shadow

Text shadows sound a little tacky, but it all depends how they are executed. When experimenting for this article I found some combinations to look terrible, and some to give an attractive, subtle effect. Shadows could definitely be put to good use in headings and titles – there are some great examples of their use at Matthias Kretschmann’s blog.

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

CSS3 Text Shadow

Word Wrapping

At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:

.text_wrap {
word-wrap:  break-word;
}

CSS3 Text Wrapping

Web Fonts

Whilst these are not classed as a ‘text effect’, we are going to cover them here briefly. A Web Font is simply a way to use any font in your page, being downloaded automatically by the browser. This will be a revolutionary change to web design, which previously has been limited to 10-15 widely supported fonts. However, this new feature brings bring copyright into debate as only properly licensed fonts should be used.

Currently, the latest version of Safari (3.1) is the only browser supporting Web Fonts. Opera is suggested to be another which will soon be enabling support, and the others will no doubt follow at some point in the future. An example of how this could be achieved would be:

@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.net/fonts/font.ttf');
}

A few examples of pages have been mocked up using this technique. The following are examples in the vein of CSS Zen Garden, created by A List Apart. The linked versions will only work on certain browsers:

CSS3 Web Fonts CSS3 Web Fonts

In conclusion…

Many of the missing features of CSS2 have been rectified in this update. This article doesn’t cover all the additions in terms of text – if you’re interested, you can read more about the text module. All these additions are great when used in a subtle way, enhancing the typographic layout of the page.

The next article in this series will be expanding on some of the user interface enhancements in CSS3. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

Comments & Discussion

23 Comments

Comments & Discussion

23 Comments

  1. steve says:

    Safari 3.1 supporting Web Fonts perfectly.

  2. Thanks – I’ve updated the article to clarify Safari 3.1 supports them rather than WebKit.

  3. kremalicious says:

    Nice series of articles! Maybe you are interested in my article about the text-shadow property which includes some more informations for what you can do with it:
    Text-Shadow Exposed: Make cool and clever text effects with css text-shadow

  4. sumit says:

    its gonna be awesome

  5. Lut says:

    Wow, web font looks fantastic. I’m really looking forward to see these things working in most used browsers. It’s gonna be legen… :-)

  6. Alexander says:

    The downloadable font feature is something that can save many people a lot of headache,hope it will be implemented on the browser majority soon… But I believe it could be easier just to specify
    font-family: url(http://mysite.com/myfont.ttf);

  7. flash tekkie says:

    Web Fonts support has been there for quite some time now but there are also 2 additional modules: CSS3 transitions and transforms, both available in WebKit, the core of Safari and Google Chrome.

  8. Naresh Varshney says:

    Mostly CSS 3.0 does support Safari Browser

  9. jai says:

    its Awesome bt yet very much disturbed that font-face is not going proper with IE7…but yet its a graet,,,

  10. Anna says:

    Thank god for webfonts! this has got to be one of the best things in CSS3…It’s always been such a pain thinking about only using the most boring fonts so that everybody can see it properly..

    I hope this catches on and spreads..fast! :)

  11. Jaime says:

    Is it just me, or is that example page not displaying any sort of style at all?

    I’m working with Firefox 3.6, so I know not all of those will work, but it doesn’t seem to be showing any styles.

  12. manuj says:

    awesome site

Leave a Comment

Subscribe
Membership
About the Author