Extreme CSS typography

Extreme CSS typography can be a real fun. To achieve our goals, we start with a basic markup like this:

<div id="branding">
    <p id="strapline">A world of style</p>

Then we can specify enormous font sizes, like so:

#branding {
    width: 100%;
    background: #224185 url(img/brand.jpg) no-repeat top right;

#branding h1 {
    font: 17em Impact, sans-serif;
    color: #fff;
    margin: 0;
    padding: 20px 460px 20px 20px;

#strapline {
    margin: 0;
    padding: 20px;
    color: #224185;
    font: 6em Georgia, serif;
    background: #fff;
    text-align: center;

As you can see, we've used 17em and 6em, respectively. You can find the final result here.

Leave a Reply

Note: Only a member of this blog may post a comment.