<hgroup style="box-sizing: border-box; ">

UPDATED: JUNE 13TH, 2011 / ROSS JOHNSON /  198 COMMENTS

10 EXAMPLES OF BEAUTIFUL CSS TYPOGRAPHY AND HOW THEY DID IT…</hgroup><main id="main" class="site-main col-lg-6 col-md-8" role="main" style="box-sizing: border-box; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: none; width: 748px; margin-left: auto; margin-right: auto; ">

Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS.

Think about how difficult sIFR or images get when you want to replicate that typography or typeface over 100 pages powered by a CMS. If you can get beautiful type via CSS it makes this situation very easy and with out compromise.

There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. We want to know what did they do, and how/why does it result in beautiful type? NOTE: Do not simply steal the design/code/style listed here, learn from it. I have seen a few sites that have ripped off the design elements of these sites and it is awful.

</main>

This is a paragraph

This paragraph contains an image --><--.

Hello world!

It's nice to see you today, world!

Hello World again!

Hello world 3!