Learn CSS3 A-Z: How To Use CSS3’s Text Styling Properties

Introduction

Even though CSS3 is not supported on all browsers yet, many web developers have started to use some of the techniques that it provides. CSS3 has evolved into a technology which, when combined with HTML5 and JavaScript, may end up being a Flash-killer. In this series of articles, we will cover the key additions to CSS3. In the previous article, we learned about border properties with CSS3, and today we will cover the text styling properties that it has to offer.

Text Styling

Print may have gone out of vogue; but the contributions it made to the world of typography are invaluable. Some of the digital work attempt to mimic print, and then add the advancements to it. Typography on the web has always trod a couple of steps behind the rest of the digital space. CSS3 makes an attempt to bridge some of these gaps by introducing downloadable fonts, text-shadow, multi-column layouts, text shadow. Through this article, we will take a look at each of these properties and see how we can use them.

Downloadable Fonts

One of the drawbacks of the web was that we didn’t have too many options for fonts. As developers, we can not know what fonts are installed on the user’s machine. So either we had to make sure the site looks good even with not-so-sweet fonts or we could target the lowest common denominator and design the site with only the basic fonts that we could be more or less sure the user would have. All this changed when CSS introduced downloadable fonts.

With very little CSS, you can achieve wonderful results. Here is the CSS:

@font-face {

       

font-family: Handwriting; src: url(

‘

HandwritingDakota.ttf

’

);

               

}

.handwriting {

      

font-family:

‘

Handwriting

’

;

                 

}

For more information on how downloadable fonts work, you can read more about it here.

Multi-Column Layouts

This is another text property that the web is borrowing from the print industry. Newspapers, magazines and several other publications lay out text in multiple columns on the same page. The reason for this is that a block of text that is very wide becomes hard to read. The optimal width of a block of text should be about 7 to 8 words per row. You might be thinking that it should be rather simple to implement multi-column layouts even without CSS supporting it, but in reality it isn’t. So thankfully CSS3 has introduced support for multi-column layouts. You can either define the width of the columns or the number of columns that you would like and the browser will accordingly lay the text in equally wide and tall columns. If you specify the height of the container, then the browser will make sure that the columns have at least that much height.

Here is a sample of the CSS used to display text in 3 columns:

#text-block {

      

width: 800px;

      

-moz-column-count: 3;

      

-webkit-column-count: 3;

      

-moz-column-gap: 20px;

      

-webkit-column-gap: 20px;

      

height: 600px;

                

}

Text Shadow

If the designer tells you that they want certain text on the page to render with a shadow, you would make a painful grimace in the hope that they would tell you to let it go, but if that doesn’t happen, you will have to fire up Photoshop, enter the text there, create a shadow for it and export it as an image and insert it in your page. Painful isn’t it? Now if you are using CSS3, you won’t make any grimace when the designer asks you to add a shadow to any text. Rather you will smile and ask them if she would like to add shadow on other pieces of text too.

Here is the syntax for the text-shadow property:

text-shadow: H-offset V-offset blur shadow_color;

And here is a sample of the CSS code that is used to create it:

text-shadow: 2px 2px 2px #000;

Browser compatibility is always a concern with CSS3 features; text-shadow works on all browser platforms except for Internet Explorer. Version 9 is out and it still doesn’t text-shadow. But since text-shadow isn’t a critical property, if it doesn’t work on certain browsers, we can overlook it.

Conclusion

That covers the text properties that CSS3 offers as a step towards bridging the gap between print and digital forms of content. There are several other text properties that were introduced in earlier versions of CSS that are only now beginning to be implemented by many browsers.