Here are nice typography thanks to some CSS properties
Light, uppercase, with spacing
See source code
<style>
.typo1{
background-image: linear-gradient(135deg, #723362, #9d223c);
background-color: #9d223c;
color: #fff;
padding : 1em 0;
font-weight: 300;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
letter-spacing: .4em;
padding-left: .4em;
margin: 5px
}
</style>
<div class="typo1">typography</div>
Contrasting weights and styles
See source code
<style>
.typo2{
background: #fff;
color: #000;
text-align: center;
border: .5em solid;
font-size: 1.5em;
padding: 1em 0;
margin: 5px
}
.typo2 .title{
text-transform: uppercase;
letter-spacing: .4em;
padding-left: .4em;
font-weight: 700
}
.typo2 .author{
color: #888;
font-style: italic;
font-size: .7em;
font-weight: 300;
letter-spacing: .12em;
padding-left: .12em
}
</style>
<div class="typo2">
<div class="title">digitools</div>
<div class="author">by nicolas casel</div>
</div>
Individual letter treatment
See source code
<style>
.typo3{
color: #fff;
border: .2em solid #ff4136;
text-align: center;
font-size: 3em;
padding: .2em
}
.typo3 span{
display: inline-block;
width: 15%;
padding: .6125rem
}
.typo3 span:nth-child(1) { background: #0000ff }
.typo3 span:nth-child(2) { background: #fff000 }
.typo3 span:nth-child(3) { background: #000000 }
.typo3 span:nth-child(4) { background: #096600 }
.typo3 span:nth-child(5) { background: #ff0000 }
</style>
<div class="typo3">
<span>G</span>
<span>A</span>
<span>M</span>
<span>E</span>
<span>S</span>
</div>