**Typography** is all about style, proportions, and spacing. Good typography is not only imperative for aesthetic appeal, but it also improves site usability when text legibility and readability concepts are applied.



![](/api/edpresso/shot/5150954854809600/image/5535014588514304)


Typography is also about emotion. Do the letters complement your content, or contradict it? Even when typography is applied to the same text, it can make different people feel different things. Therefore, being ​deliberate about typography lets us control these feelings.

![](/api/edpresso/shot/5150954854809600/image/4674745356255232)

# Typography properties in CSS

<br>

## Color



body {
  
}
.text1 {
    color: red
}
/* You can use hexadecimal color codes. */
.text2 {
    color: #05ffb0;
}
/* You can use rgb() color codes with each channel can take a value from 0 to 255 */
.text3 {
    color: rgb(50, 115, 220);
}
/* You can use rgba() color codes.The alpha value can go from zero 0 (transparent) to one 1 (opaque).*/
.text4 {
    color: rgba(0, 0, 0, 0.5);
}
/* You can use hsl() color codes. hue takes a value from 0 - 359 while saturation and luminosity take a %age value */
.text5 {
    color: hsl(10, 70%, 53%);
}
/* You can use hsla() color codes.The alpha value can go from zero 0 (transparent) to one 1 (opaque).*/
.text6 {
    color: hsla(14, 100%, 53%, 0.6);
}

<html>
 <head>
 </head>
 <body>      
    <div class="text1">
      <h1>Educative</h1>
    </div>
    <div class="text2">
      <h1>Educative</h1>
    </div>
    <div class="text3">
      <h1>Educative</h1>
    </div>
    <div class="text4">
      <h1>Educative</h1>
    </div>
    <div class="text5">
      <h1>Educative</h1>
    </div>
    <div class="text6">
      <h1>Educative</h1>
    </div>
 </body>
</html>

codemirror

## Font family
 

>**Note:** When using multiple values, the list of font families defines the priority in which the browser should choose the font.

body {
  
}
/* In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font. */
.text1 {
    font-family: "Source Sans Pro", "Arial", sans-serif;
}
/* sans-serif font. */
.text2 {
    cfont-family: sans-serif;
}
/* monospace font */
.text3 {
    font-family: monospace;
}
/* fantasy font.*/
.text4 {
    font-family: fantasy;
}

<html>
 <head>
 </head>
 <body>      
    <div class="text1">
      <h1>Educative</h1>
    </div>
    <div class="text2">
      <h1>Educative</h1>
    </div>
    <div class="text3">
      <h1>Educative</h1>
    </div>
    <div class="text4">
      <h1>Educative</h1>
    </div>
 </body>
</html>

body {
  
}
/* The text will use the browser's default medium size. */
.text1 {
    font-size: medium;
}
/* Using pixel values */
.text2 {
    font-size: 20px;
}
/* You can use em values.
The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements. */
.text3 {
    font-size: 1.2em;
}
/* You can use percentage values. They act like em values.*/
.text4 {
    font-size: 90%;
}
/* You can use relative keywords */
.text5 {
    font-size: smaller;
}
/* You can use absolute keywords (like shirt sizes) */
.text6 {
    font-size: x-large;
}

body {
  
}
.text1 {
    font-style: normal;
}
/* slightly slanted text. */
.text2 {
    font-style: italic;
}
/* relatively more slanted text */
.text3 {
    font-style: oblique;
}

<html>
 <head>
 </head>
 <body>      
    <div class="text1">
      <h1>Educative</h1>
    </div>
    <div class="text2">
      <h1>Educative</h1>
    </div>
    <div class="text3">
      <h1>Educative</h1>
    </div>
 </body>
</html>

body {
  
}
.text1 {
    font-size: x-large;
    font-weight: normal;
}
/* BOLD text. */
.text2 {
    font-size: x-large;
    font-weight: bold;
}
/* using a numerical value for the weight */
.text3 {
    font-size: x-large;
    font-weight: 800;
}

<html>
 <head>
 </head>
 <body>      
    <div class="text1">
      <p>Educative</p>
    </div>
    <div class="text2">
      <p>Educative</p>
    </div>
    <div class="text3">
      <p>Educative</p>
    </div>
 </body>
</html>

body {
  
}
.text1 {
    font-size: x-large;
    letter-spacing: normal;
}
/* using pixel values for spacing. */
.text2 {
    font-size: x-large;
    letter-spacing: 2px;
}
/* using em values for spacing */
.text3 {
    font-size: x-large;
    letter-spacing: 0.2em;
}

<html>
 <head>
 </head>
 <body>      
    <div class="text1">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
    <div class="text2">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
    <div class="text3">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
 </body>
</html>

body {
  
}
.text1 {
    font-size: x-large;
    word-spacing: normal;
}
/* using pixel values for spacing. */
.text2 {
    font-size: x-large;
    word-spacing: 2px;
}
/* using em values for spacing */
.text3 {
    font-size: x-large;
    word-spacing: 0.2em;
}

body {
  
}
.text1 {
    font-size: large;
    text-align: left;
}
/* using pixel values for spacing. */
.text2 {
    font-size: large;
    text-align: right;
}
/* using em values for spacing */
.text3 {
    font-size: large;
    text-align: center;
}
.text4 {
    font-size: large;
    text-align: justify;
}
.text5 {
    font-size: large;
    text-decoration: underline;
}

<html>
 <head>
 </head>
 <body>      
    <div class="text1">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
    <div class="text2">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
    <div class="text3">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
    <div class="text4">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
    <div class="text5">
      <p>I scream, you scream, we all scream, for ice cream!</p>
    </div>
 </body>
</html>

What is CSS typography?

Typography encompasses styling, proportions, and spacing, enhancing site aesthetics, usability, and emotional impact through CSS properties like color, font, and alignment.

What is CSS typography?

Typography properties in CSS

Color

Font family

Font size

Font style

Font weight

Letter spacing

Word spacing

Text align and decoration