Mick Redman: h2

Saturday, 19 March 2011

Big fonts for header

This is another small post. All I have done is stretched the h2 to match the length of the h1. The effect works very well.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>