Question

I’m currently slicing Illustrator assets from our graphic designer into HTML, and there is one part of the design which I’m not sure how best to represent:

It’s not too hard to imagine using table-based layout for this, e.g.

<table>
  <tr>
     <td>TDC <br/> CHANNEL</td>
     <td>B</td>
  </tr>
</table>

And change font-size of B until it looks right. But representing this design in HTML really seems to be a challenge of proper typography, and it seems evil to use tables for this. I’m wondering if there’s a better way?

Answer 1

Styled and with semantic markup:

http://jsfiddle.net/kboucher/pXyrd/

<dl class="clearfix">
    <dt>TDC<br />Channel</dt>
    <dd>B</dd>
</dl>

dl {
    background: #B5B8BE;
    color:#415987;
    display:inline-block;
    font-family: Helvetica, Arial, sans-serif;
    padding:1.5% 1% 1%;
}
dt {
    clear: left;
    float:left;
    font-size:0.8em;
    line-height:1em;
    text-transform: uppercase;
}

dd {
    float:left;
    font-size:2.1em;
    font-weight: bold;
    line-height:1em;
    margin: -0.1em 0 0 0.1em;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}