In a post on css-tricks, I recently posted about a problem i encountered with Google's web font directory not having a small-caps variant. So after some messing around i came up with a way to achieve that effect using and inline unordered list and some text sizing;
Code:
<html>
   <head>
   <link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
      <style>
         body{ background: #000; color: #fff; }
         
         #heading li{ display: inline; }
         #headerf{ 
            font: normal 24px/26px 'Yanone Kaffeesatz';
            letter-spacing: .4px;
            text-transform: uppercase;
         }
         #header{ 
            font: normal 15px/26px 'Yanone Kaffeesatz';
            text-transform: uppercase;
            letter-spacing: 1.2px;
         }
         
      </style>
   </head>
   <body>
         <ul id="heading">
            <li id="headerf">j</li>
            <li id="header">eremy</li>
            <li id="headerf">c</li>
            <li id="header">arlsten</li>
         </ul>   
   </body>
The problem comes when trying to use this text dynamically, the words are split up in separate list elements, If I were to use this for say a header in Wordpress i wouldn't be able to use the admin panel to type in the site name as i could only place it in one element(As far as i know). My questions; first, Is there possibly a better way to achieve the effect? Second; If not, is there possibly some jquery or JavaScript, that could force the separate list elements to act as one?

Thanks in advance,
Jeremy Carlsten