Višestruki “span” u CSS-u (jedan jako zanimljivi logo)

<div id="type-wrap">
<h1 id="type">
<em>J<span>o<span>n</span></span></em>
<em>T<span>a<span>n</span></span></em>
<strong>g<span>e<span>r<span>i<span>n<span>e<span>.
</span></span></span></span></span></span></strong></h1>
</div>

#type-wrap,
#type,
#type em,
#type strong,
#type i,
#type span{
border:1px solid transparent;
background:transparent;
}
#type em,
#type strong,
#type i,
#type span{
padding:0.111em 0.222em; /* 8px y 16px x @72px f-size */
position:absolute;
}
 
#type-wrap{
height:6.875em;
text-align:left;
display:block;
clear:both;
width:48.125em;
margin:0.938em auto 1.563em auto;
border:1px solid #fff;
}
#type{
font-size:4.5em; /* 72px */
line-height:1em;
font-weight:300;
font-family:'times new roman',serif;
letter-spacing:0;
float:none;
color:#000;
margin:0;
padding:0;
width:4em;
position:relative;
}
 
/* Jon */
 
#type em{
text-transform:lowercase;
left:0;
top:0;
/* over-ride defaults */
font-size:1em;
line-height:1em;
font-style:italic;
margin:0;
}
#type em span{
font-size:0.25em; /* 18px */
font-style:normal;
left:1.333em; /* 24px */
top:1.778em; /* 32px */
}
#type em span span{
font-size:1.333em;  /* 24px */
font-style:italic;
left:0.333em; /* 8px */
top:0;
}
 
/* Tan */
 
#type i{
font-size:1em; /* 72px */
font-style:italic;
font-weight:900;
text-transform:lowercase;
left:0.25em; /* 18px */
top:-0.056em; /* 4px */
}
#type i span{
font-size:0.25em; /* 18px */
font-style:normal;
font-weight:300;
left:2em; /* 36px */
top:-0.389em; /* 7px */
}
#type i span span{
font-size:2em; /* 36px */
font-style:italic;
left:0.083em; /* 3px */
top:0;
}
 
/* gerine */
 
#type strong{
font-size:1em; /* 72px */
font-weight:300;
left:0.472em; /* 34px */
top:0.167em; /* 12px */
}
#type strong span{
font-size:0.5em; /* 36px */
font-style:italic;
left:1.056em; /* 38px */
top:0.25em; /* 16px */
}
#type strong span span{
font-size:0.667em; /* 24px */
left:0.25em; /* 6px */
top:-1em; /* 24px */
}
#type strong span span span{
font-size:1.333em; /* 36px */
font-weight:900;
text-transform:lowercase;
left:0.167em; /* 6px */
top:0.139em; /* 5px */
}
#type strong span span span span{
font-size:1.667em; /* 60px */
font-weight:300;
font-style:normal;
left:0.067em; /* 4px */
top:0.1em; /* 6px */
}
#type strong span span span span span{
font-size:0.6em; /* 36px */
text-transform:uppercase;
font-style:italic;
left:-0.222em; /* 8px */
top:1.056em; /* 38px */
}
#type strong span span span span span span{
font-size:2em; /* 72px */
color:#fa0;
left:0.194em; /* 14px */
top:-0.416em; /* 30px */
}