Saksaha Logo

by Jonathan McGlone

HTML

<!-- Questrial -->
<p class="questrial">Questrial</p>
<div class="masthead">
    <a href="#" title="Saksaha: A Journal of Manchu Studies">
        <div class="logo questrial">Saksaha</div>
    <div class="subtitle lato questrial_spacing">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>
</div>

<!-- Lato 700 -->
<p class="lato700">Lato 700</p>
<div class="masthead">
    <a href="#" title="Saksaha: A Journal of Manchu Studies">
        <div class="logo lato700">Saksaha</div>
    <div class="subtitle lato lato700_spacing">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>
</div>


<!-- Muli 400 -->
<p class="muli400">Muli</p>
<div class="masthead">
    <a href="#" title="Saksaha: A Journal of Manchu Studies">
        <div class="logo muli400">Saksaha</div>
    <div class="subtitle lato muli400_spacing">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>
</div>


<!-- Roboto 400 -->
<p class="roboto400">Roboto</p>
<div class="masthead">
    <a href="#" title="Saksaha: A Journal of Manchu Studies">
        <div class="logo roboto400">Saksaha</div>
    <div class="subtitle lato roboto400_spacing">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>
</div>

<!-- Didact Gothic -->
<p class="didact">Didact Gothic</p>
<div class="masthead">
    <a href="#" title="Saksaha: A Journal of Manchu Studies">
        <div class="logo didact">Saksaha</div>
    <div class="subtitle lato didact_spacing">
    <h1>A Journal of Manchu Studies</h1>
    </div>
    </a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Questrial);
@import url(http://fonts.googleapis.com/css?family=Muli:400);
@import url(http://fonts.googleapis.com/css?family=Roboto:400);
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);
@import url(http://fonts.googleapis.com/css?family=Lato:300);
@import url(http://fonts.googleapis.com/css?family=Lato:700);

.masthead { padding: 20px; width: 360px;}
p { padding: 20px 0px 0px 20px; font-size: 18px; }
.logo { font-size: 64px; margin: 0px 20px 0px 0px; letter-spacing: 7px; text-transform: uppercase;}

.subtitle { font-size: 18px; text-transform: uppercase; }

.questrial { font-family: 'Questrial', sans-serif; }
.questrial_spacing { word-spacing: 13px; }
.lato700 { font-family: 'Lato', sans-serif; font-weight: 700;}
.lato700_spacing { word-spacing: 15px; }
.didact { font-family: 'Didact Gothic', sans-serif; }
.didact_spacing { word-spacing: 4px; }
.muli400 { font-family: 'Muli', sans-serif; font-weight: 400; }
.muli400_spacing { word-spacing: 15px; }
.roboto400 { font-family: 'Roboto', sans-serif; font-weight: 400; }
.roboto400_spacing { word-spacing: 12px; }


.lato { font-family: 'Lato', sans-serif; font-weight: 300; }


a, a:hover { text-decoration: none; }
a .logo { color: #34272C;  }
a:hover .logo { color: #D03F39; }
a .subtitle { color: #D03F39; }