Typography with CSS properties

Facebooktwitterlinkedinmail

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>

Leave a Reply

Your email address will not be published. Required fields are marked *