Extreme CSS typography can be a real fun. To achieve our goals, we start with a basic markup like this:
<div id="branding"> <h1>CSS</h1> <p id="strapline">A world of style</p> </div>
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.