



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>