We use Xtypo plugin for this content typography. Xtypo plugin is a Free Joomla Plugin from TemplatePlazza.com that will produce a Nice Web 2.0 CSS Styling from any text in your joomla articles. This plugis in is configurable, you can change the look of the styling from backend parameter.
Feel free to download this plugin from templateplazza download section

{xtypo_alert} I've seen too much :o) 12244567890!@#$%^&*()_+~ This is a sample of the 'xtypo_alert' style. You can use this style to denote specific information to your users.  To use this style use the folllowing code: {xtypo_alert} . . . { /xtypo_alert}
{/xtypo_alert}

{xtypo_info} I've seen too much :o) This is a sample of the 'xtypo_info' style. You can use this style to denote specific information  to your users. To use this style use the folllowing code:{xtypo_ info} . . . { /xtypo_info}
{/xtypo_info}

{xtypo_warning}This is a sample of the 'xtypo_warning' style. You can use this style to denote specific information  to your users.  To use this style use the folllowing code: {xtypo_warning} . . . {/xty po_warning} {/xtypo_warning}

{xtypo_sticky}This is a sample of the 'xtypo_sticky' style. You can use this style to denote specific information  to your users. To use this style use the folllowing code:{xtypo_sticky} . . . { /xtypo_sticky}{/xtypo_sticky}

{xtypo_feed}This is a sample of the 'xtypo_feed' style. You can use this style to denote specific information to your users.
To use this style use the folllowing code:{xtypo_feed} . . .{ /xtypo_feed}
{/xtypo_feed}

{xtypo_download}This is a sample of the 'xtypo_download' style. You can use this style to denote specific information to your users.  To use this style use the folllowing code:{ xtypo_download} . . . {/xtypo_download }{/xtypo_download}

Below is a sample of the 'xtypo_code' style. You can use this style to publish a piece of programming code to your users.

{xtypo_code}<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>p.rightalign {
  text-align: right;
}
.red {
  color: #c00;
}
.green {
  color: #0c0;
}
{/xtypo_code}

To use the xtypo_code style use the folllowing code: { xtypo_code}. . . { /xtypo_code}

{xtypo_quote}This is a sample of the 'xtypo_quote' style. You can use this style to quote a piece of content to your users. To use the xtypo_quote style use the folllowing code: {xtypo_quote}. . . { /xtypo_quote}
{/xtypo_quote}

{xtypo_quote_left}This is a sample of the 'left aligned xtypo_quote' style. You can use this style to quote a piece of
content to your users.  To use this style use the folllowing code:{xtypo_quote_left}. . .{ /xtypo_quote_left}{/xtypo_quote_left} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_quote_right}This is a sample of the 'left aligned xtypo_quote' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{xtypo_quote_right}. . . {/xtypo_quote_right }{/xtypo_quote_right} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
 

{xtypo_dropcap}T{/xtypo_dropcap}his is a sample of the 'xtypo_dropcap' style. You can use this style to give a nice dropcap
styling to your content.

To use the xtypo_dropcap style use the folllowing code: {xtypo_dropcap} T {/xtypo_dropcap } is is a dropcap

{xtypo_rounded1} This is a sample of the 'xtypo_rounded1' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded1} . . . { / xtypo_rounded1 }{/xtypo_rounded1}

{xtypo_rounded_left1}This is a sample of the 'xtypo_rounded_left1' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_left1} . . . { / xtypo_rounded_left1 }{/xtypo_rounded_left1} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded_right1} This is a sample of the 'xtypo_rounded_right1' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_right1} . . . { / xtypo_rounded_right1 }{/xtypo_rounded_right1} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded2} This is a sample of the 'xtypo_rounded2' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded2} . . . { / xtypo_rounded2 }{/xtypo_rounded2}

{xtypo_rounded_left2} This is a sample of the 'xtypo_rounded_left2' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_left2} . . . { / xtypo_rounded_left2 }{/xtypo_rounded_left2} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded_right2} This is a sample of the 'xtypo_rounded_right2' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_right2} . . . { / xtypo_rounded_right2 }{/xtypo_rounded_right2} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded3} This is a sample of the 'xtypo_rounded3' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded3} . . . { / xtypo_rounded3 }{/xtypo_rounded3}

{xtypo_rounded_left3} This is a sample of the 'xtypo_rounded_left3' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_left3} . . . { / xtypo_rounded_left3 }{/xtypo_rounded_left3} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded_right3} This is a sample of the 'xtypo_rounded_right3' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_right3} . . . { / xtypo_rounded_right3 }{/xtypo_rounded_right3} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded4} This is a sample of the 'xtypo_rounded4' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded4} . . . { / xtypo_rounded4 }{/xtypo_rounded4}

{xtypo_rounded_left4} This is a sample of the 'xtypo_rounded_left4' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_left4} . . . { / xtypo_rounded_left4 }.{/xtypo_rounded_left4} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_rounded_right4} This is a sample of the 'xtypo_rounded_right4' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{ xtypo_rounded_right4} . . . { / xtypo_rounded_right4 }.{/xtypo_rounded_right4} Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

{xtypo_button1} Button1 {/xtypo_button1}{xtypo_button2} Button 2 {/xtypo_button2}{xtypo_button3} Button 3 {/xtypo_button3}

To use the button styles above you can use the folllowing codes: { xtypo_button1} Button 1 { /xtypo_button1} , { xtypo_button2} Button 2{ /xtypo_button2} , { xtypo_button3} Button 3 { /xtypo_button3}