Different Fonts at a variety of Sizes

by Eric

HTML

<div class="preview-box">
    <div class="font-box ubuntu">
        <div class="font-box-title">Ubuntu</div>
        <div class="size-11"><span class="content-text"></span></div>
        <div class="size-12"><span class="content-text"></span></div>
        <div class="size-13"><span class="content-text"></span></div>
        <div class="size-14"><span class="content-text"></span></div>
        <div class="size-15"><span class="content-text"></span></div>
        <div class="size-16"><span class="content-text"></span></div>
    </div>
    
    <div class="font-box opensans">
        <div class="font-box-title">Open Sans</div>
        <div class="size-11"><span class="content-text"></span></div>
        <div class="size-12"><span class="content-text"></span></div>
        <div class="size-13"><span class="content-text"></span></div>
        <div class="size-14"><span class="content-text"></span></div>
        <div class="size-15"><span class="content-text"></span></div>
        <div class="size-16"><span class="content-text"></span></div>
    </div>
    
    <div class="font-box calibri">
        <div class="font-box-title">Calibri</div>
        <div class="size-11"><span class="content-text"></span></div>
        <div class="size-12"><span class="content-text"></span></div>
        <div class="size-13"><span class="content-text"></span></div>
        <div class="size-14"><span class="content-text"></span></div>
        <div class="size-15"><span class="content-text"></span></div>
        <div class="size-16"><span class="content-text"></span></div>
    </div>
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    background: rgba(0, 0, 0, .3);
}

.preview-box
{
    display: flex;
}

.font-box
{
    padding: 8px;
    line-height: 1.5;
    
    border: 1px solid rgba(0, 0, 0, .3);
}
.font-box-title
{
    font-weight: bold;
    text-decoration: underline;
}

.content-text
{ 
}
.content-text:before
{
    content: 'Etiam ultricies nisi vel augue.';
}

.ubuntu
{
    font-family: 'Ubuntu', sans-serif;
}

.opensans
{
    font-family: 'Open Sans', sans-serif;
}

.calibri
{
    font-family: 'Calibri', sans-serif;
}

.size-11 {
    font-size: 11px;
}
.size-11:before
{
    font-size: 11px;
    content: '11px: ';
}
.size-12 {
    font-size: 12px;
}
.size-12:before
{
    font-size: 11px;
    content: '12px: ';
}
.size-13 {
    font-size: 13px;
}
.size-13:before
{
    font-size: 11px;
    content: '13px: ';
}
.size-14 {
    font-size: 14px;
}
.size-14:before
{
    font-size: 11px;
    content: '14px: ';
}
.size-15 {
    font-size: 15px;
}
.size-15:before
{
    font-size: 11px;
    content: '15px: ';
}
.size-16 {
    font-size: 16px;
}
.size-16:before
{
    font-size: 11px;
    content: '16px: ';
}