Home » Creative Web Typography Style Using HTML and CSS

Creative Web Typography Style Using HTML and CSS

by techmidpoint

Creative Web Typography Style Using HTML and CSS

Hello, guys In this tutorial I am going to create a creative web typography style using HTML and CSS. Here you can see three different style typography on screen. First, you have to choose a suitable background. You can add a direct image or you can add CSS background style in the body section.


<!DOCTYPE html>
        <title>Creative web typography style</title>
        <link rel="stylesheet" href="style.css">
        <section class="main">
           <h2 class="cs-text"><span>Time</span> <span>for</span> <span>Design</span></h2>


    background: url(bg.jpg);
  background-size: cover;
  font-family: arial;

.container > header h1,
.container > header h2 {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

.cs-text {
    width: 660px;
    margin: 120px auto 30px;
    cursor: default;
    transform: skewY(-12deg);
    text-align: center;

.cs-text span {
    display: block;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 6px;

.cs-text span:first-child {
    font-size: 100px;
    letter-spacing: 96px;
    text-shadow: 6px 6px 0px rgba(255,255,255,0.3);

.cs-text span:nth-child(2) {
    font-weight: 400;
    text-transform: none;
    font-style: italic;
    line-height: 60px;
    font-size: 67px;
    color: #392f2c;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    position: relative;

.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
    content: '';
    width: 240px;
    height: 2px;
    background: #392f2c;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2);

.cs-text span:nth-child(2):before {
    left: 0px;

.cs-text span:nth-child(2):after {
    right: 0px;

.cs-text span:nth-child(3) {
    font-size: 8em;
          2px 2px 0 #645f59,
          4px 4px 0 #fff,
          6px 6px 0 #645f59,
          8px 8px 0 #fff,
          10px 10px 0 #645f59,
          12px 12px 0 #fff,
          14px 14px 0 #645f59,
          16px 16px 0 #fff,
          18px 18px 0 #645f59,
          20px 20px 0 #fff,
          22px 22px 0 #645f59,
          24px 24px 0 #fff;      

For More Tutorials Please Click Here

You may also like

Leave a Comment